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

Question

我想在每个选项卡之间设置边距。就像在 PagerTabStrip 中一样，它具有 setTextSpacing(int textSpacing) 以使选项卡之间的文本间距。 TabLayout 能做到吗？

Answer 1

如果假设选项卡之间的距离相同，则会显示答案以提供帮助。

但有时您需要将最后一个选项卡与其他选项卡分开（在视图的末尾）。因此，您不能为工具栏创建菜单（也不能创建工具栏），而对所有内容都使用通用选项卡指示器。

很遗憾，您不能直接为每个 tabitem 设置 paddings 和 margins，但是您可以创建一个虚拟的多一个 tab item，并通过属性控制距离：

app:tabPaddingStart 应用程序：tabPaddingEnd 应用程序：tabMinWidth 应用：tabMaxWidth

虽然这有点像拐杖的解决方案。

Answer 2

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

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

Answer 3

您可以删除权重并为TabLayout 中的标签设置marginEnd、marginStart 和width。

科特林：

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

Answer 4

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMinWidth="0dp"
        app:tabMode="scrollable"
        />

Answer 5

这个问题也有一段时间了，在这个帖子上找到了解决方案：Android Design Support Library TabLayout using custom tabs layout but layout wrapping the 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">

Answer 6

这是为四个不同标签设置边距的方法。您可以更改 setMargins(v1,v2,v3,v4) 函数值以获得适合您正在使用的选项卡数量的拟合。我希望这有帮助。 请注意，tabHost 是 TabHost 托管您正在使用的不同选项卡的对象。

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

            }

Answer 7

布局

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

Answer 8

您可以使用 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" />