web-dev-qa-db-fra.com

Comment ajouter une marge entre les onglets dans TabLayout?

Est-il possible d'ajouter une marge entre les onglets d'un TabLayout? J'ai essayé d'utiliser un style personnalisé pour Widget.Design.TabLayout , mais il existe des propriétés uniquement liées au remplissage, mais pas aux marges.

androidandroid-tablayout
12
Todor Kostov

Ok les gars, après avoir passé 2-3 heures à cela, j'ai finalement trouvé une solution. 

Si vous utilisez TabLayout, vous ne pouvez pas ajouter de marges aux onglets à l'aide de styles, etc. (comme @Connectant la vie avec Android plus tôt)

Mais vous pouvez le faire en écrivant du code Java. Dans l'ensemble, votre code devrait ressembler à celui-là:

            for(int i=0; i < mTabLayout.getTabCount(); i++) {
                View tab = ((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i);
                ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
                p.setMargins(0, 0, 50, 0);
                tab.requestLayout();
            }

Pour obtenir chaque onglet comme une vue, nous devons d’abord obtenir le conteneur qui les contient. Dans ce cas, le TabLayout utilise un SlidingTabStrip en tant que conteneur pour les onglets. Le SlidingTabStrip est le premier enfant de TabLayout:

View tab = ((ViewGroup) mTabLayout.getChildAt(0))

Et après ce petit détail, tout est assez simple.

29
Todor Kostov

@Todor Kostov a bien répondu, mais le centre des onglets a disparu, car le dernier onglet a aussi une marge.

utilisez donc mTabLayout.getTabCount() - 1 au lieu de mTabLayout.getCodeCount().

        for(int i=0; i < mTabLayout.getTabCount() - 1; i++) {
            View tab = ((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i);
            ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
            p.setMargins(0, 0, 50, 0);
            tab.requestLayout();
        }
1
Tura

Voici comment je l'ai fait en XML pur.

dimens.xml: 

<!-- Set this to 50% of what you want the actual space between the tabs to be. -->
<dimen name="tab_spacing_half">5dp</dimen> <!-- i.e., 10dp spacing between tabs. -->

Mise en page contenant votre TabLayout: 

<Android.support.design.widget.TabLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/tab_spacing_half"/>

Ajoutez ceci à votre thème dans styles.xml: 

<item name="tabBackground">@drawable/tab_background</item>

drawable-nodpi\tab_background.xml: 

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:drawable="@drawable/tab_background_selected"
        Android:state_selected="true" />

    <item
        Android:drawable="@drawable/tab_background_unselected"
        Android:state_selected="false"
        Android:state_focused="false"
        Android:state_pressed="false" />

</selector>

drawable-nodpi\tab_background_selected.xml: 

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:left="@dimen/tab_spacing_half"
        Android:right="@dimen/tab_spacing_half"
        Android:top="@dimen/tab_spacing_half"
        Android:bottom="@dimen/tab_spacing_half">

        <shape
            Android:shape="rectangle">

            <corners
                Android:radius="@dimen/border_radius_small">
            </corners>

            <stroke
                Android:width="@dimen/divider_height_thick"
                Android:color="@color/white">
            </stroke>

        </shape>

    </item>

</layer-list>

... C'est là que réside le truc. Effectivement, envelopper votre forme d'arrière-plan dans une item avec un "remplissage" en fonction de votre valeur @dimen/tab_spacing_half. Et enfin...

drawable-nodpi\tab_background_unselected.xml: 

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:left="@dimen/tab_spacing_half"
        Android:right="@dimen/tab_spacing_half"
        Android:top="@dimen/tab_spacing_half"
        Android:bottom="@dimen/tab_spacing_half">

        <shape
            Android:shape="rectangle">

            <corners
                Android:radius="@dimen/border_radius_small">
            </corners>

            <stroke
                Android:width="@dimen/divider_height_thin"
                Android:color="@color/white">
            </stroke>

        </shape>

    </item>

</layer-list>
1
ban-geoengineering

Voici comment définir la marge pour quatre onglets différents. Vous pouvez modifier les valeurs de la fonction setMargins (v1, v2, v3, v4) pour obtenir un ajustement approprié pour le nombre d'onglets avec lesquels vous travaillez. J'espère que ça aide. Veuillez noter que tabHost est l'objet de TabHost hébergeant les différents onglets avec lesquels vous travaillez.

Display display = getWindowManager().getDefaultDisplay();
            int width = display.getWidth();
            View currentView;
          for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
            {
                //This code removes divider between tabs
                tabHost.getTabWidget().setDividerDrawable(null);
                tabHost.getTabWidget().getChildAt(i).setLayoutParams(new
                         LinearLayout.LayoutParams((width/8)-2,50));
                 currentView = tabHost.getTabWidget().getChildAt(i);
                  LinearLayout.LayoutParams currentLayout =
                      (LinearLayout.LayoutParams) currentView.getLayoutParams();
                  currentLayout.setMargins(30, 5, 80, 0);

            }
0
Edwinfad