TabLayout legt den Abstand oder Rand für jede Registerkarte fest

Ich möchte einen Rand zwischen den einzelnen Registerkarten festlegen. Wie in PagerTabStrip, der setTextSpacing(int textSpacing) hat, um Textabstände zwischen Tabulatoren zu erstellen. Kann TabLayout das?

Ich habe dieses Problem auch eine Weile bekämpft und die Lösung in diesem Thread gefunden: Android Design Support Library TabLayout mit benutzerdefiniertem Tab-Layout, aber Layout-Umbruch der Tabs

<!-- Add the padding to tabPaddingStart and/or tabPaddingEnd -->
<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tab_layout_height"
        app:tabPaddingStart="10dp"
        app:tabPaddingEnd="10dp">

Sie können das tabMinWidth-Attribut verwenden. so was.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    app:tabIndicatorColor="@color/default_enable"
    app:tabTextColor="@color/font_default_03"
    app:tabSelectedTextColor="@color/default_enable"
    app:tabMinWidth="50dp"
    android:clipToPadding="false"
    android:paddingLeft="4dp"
    android:paddingRight="4dp" />

Sie können Gewicht entfernen und einstellen marginEnd,marginStart und width für Tabs ein TabLayout.

Kotlin:

val tabs = tabLayout.getChildAt(0) as ViewGroup

for (i in 0 until tabs.childCount ) {
       val tab = tabs.getChildAt(i)
       val layoutParams = tab.layoutParams as LinearLayout.LayoutParams
       layoutParams.weight = 0f
       layoutParams.marginEnd = 12.dpToPx()
       layoutParams.marginStart = 12.dpToPx()
       layoutParams.width = 10.dpToPx()
       tab.layoutParams = layoutParams
       tabLayout.requestLayout()
}

Java:

ViewGroup tabs = (ViewGroup) tabLayout.getChildAt(0);

for (int i = 0; i < tabs.getChildCount() - 1; i++) {
       View tab = tabs.getChildAt(i);
       LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
       layoutParams.weight = 0;
       layoutParams.setMarginEnd(12);
       layoutParams.setMarginEnd(12);
       layoutParams.width = 10;
       tab.setLayoutParams(layoutParams);
       tabLayout.requestLayout();
}

Layout

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Java

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
int betweenSpace = 100;

ViewGroup slidingTabStrip = (ViewGroup) tabLayout.getChildAt(0);

for (int i=0; i<slidingTabStrip.getChildCount()-1; i++) {
    View v = slidingTabStrip.getChildAt(i);
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
    params.rightMargin = betweenSpace;
}

Wenn Sie festlegen, dass tabPadding nicht funktioniert, können Sie versuchen, tabMaxWidth und tabMinWidth festzulegen. Es ist Arbeit für mich.

  <android.support.design.widget.TabLayout
            app:tabMaxWidth="200dp"
            app:tabMinWidth="20dp"
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="16dp"
            app:tabMode="scrollable" />

Wenn jemand einen benutzerdefinierten Hintergrund für Registerkarten (Selektor) hat, müssen Sie nur die Ebenenliste zum Hintergrund der Registerkarten hinzufügen und den Rand für sie festlegen

Wähler:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_selected_tab" android:state_selected="true"/>
    <item android:drawable="@drawable/bg_unselected_tab"/>
</selector>

ausgewählte Registerkarte:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Green"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

Nicht ausgewählte Registerkarte:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Gray"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

Wenn Sie so etwas für Ihre erreichen wollten TabLayout dann folgen Sie diesen Schritten:

1. Layout-XML-Code:

    <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dp_5"
    app:tabBackground="@drawable/tab_selector"
    app:tabIndicator="@null"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/black" />

2. Tab-Hintergrund Drawable Selector (drawable/tab_selector):

   <?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" />
</selector>

3. Ziehbar von tab_background_selected :

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

    <item
        android:bottom="@dimen/dp_5"
        android:left="@dimen/dp_5"
        android:right="@dimen/dp_5"
        android:top="@dimen/dp_5">

        <shape>
            <solid android:color="@color/btnBG" />
            <corners android:radius="@dimen/dp_10" />
        </shape>
    </item>
</layer-list>

4. Drawable von tab_background_uns selected :

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

    <item
        android:bottom="@dimen/dp_5"
        android:left="@dimen/dp_5"
        android:right="@dimen/dp_5"
        android:top="@dimen/dp_5">

        <shape>
            <solid android:color="@color/white" />
            <corners android:radius="@dimen/dp_10" />
        </shape>
    </item>
</layer-list>