TabLayout设置每个选项卡的间距或边距

Question

我想在每个标签之间设置保证​​金.就像在PagerTabStrip中有setTextSpacing(int textSpacing)来制作tab之间的文本间距一样.TabLayout能做到吗？

Answer 1

一直在解决这个问题,在这个线程上找到了解决方案:Android设计支持库TabLayout使用自定义选项卡布局但布局包装选项卡

<!-- 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">

Answer 2

当您想为自己实现这样的目标时，TabLayout请按照以下步骤操作：

1.布局XML代码：

    <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. 选项卡背景可绘制选择器 ( 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. 可绘制的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. tab_background_unselected 的可绘制：

 <?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>

Answer 3

您可以删除的重量和组marginEnd，marginStart并width在标签TabLayout。

科特林：

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()
}

爪哇：

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();
}

Answer 4

布局

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

爪哇

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;
}

Answer 5

如果有人有选项卡（选择器）的自定义背景，您只需将图层列表添加到选项卡背景并为其设置边距

选择器：

<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>

选定的选项卡：

<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>

未选择的选项卡：

<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>

Answer 6

您可以使用tabMinWidth属性。像这样。

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

Answer 7

当你设置tabPadding不起作用时，你可以尝试设置tabMaxWidth和tabMinWidth。这对我来说是工作。

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