TabLayout 设置每个选项卡的间距或边距
TabLayout set spacing or margin each tab
我想在每个选项卡之间设置边距。就像在 PagerTabStrip 中一样，它具有 setTextSpacing(int textSpacing) 以在选项卡之间设置文本间距。 TabLayout 可以做到吗？
您可以使用 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" />
布局
<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;
}
也和这个问题斗争了一段时间，在这个线程上找到了解决方案：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">
这就是为四个不同的标签设置边距的方法。您可以更改 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);
}
<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"
/>
您可以删除权重并为 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();
}
当您设置 tabPadding 不起作用时，您可以尝试设置 tabMaxWidth 和 tabMinWidth。这是为我工作。
<android.support.design.widget.TabLayout
app:tabMaxWidth="200dp"
app:tabMinWidth="20dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="16dp"
app:tabMode="scrollable" />
如果假定选项卡之间的距离相同，则显示的答案会有所帮助。
但有时您需要将最后一个选项卡与其他选项卡区分开来（在视图的末尾）。因此，您不能为工具栏创建菜单（也不能创建工具栏），并为所有内容使用通用的选项卡指示器。
遗憾的是，您不能直接为每个tabitem设置paddings和margins，但是您可以创建一个虚构的多一个tabitem并通过属性控制距离：
app:tabPaddingStart
app:tabPaddingEnd
app:tabMinWidth
app:tabMaxWidth
虽然这有点拐杖的解决方法。
如果有人为选项卡（选择器）设置了自定义背景，您只需将图层列表添加到选项卡背景并为其设置边距
选择器：
<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>
如果您想为您的 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>
我想在每个选项卡之间设置边距。就像在 PagerTabStrip 中一样，它具有 setTextSpacing(int textSpacing) 以在选项卡之间设置文本间距。 TabLayout 可以做到吗？
您可以使用 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" />
布局
<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;
}
也和这个问题斗争了一段时间，在这个线程上找到了解决方案：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">
这就是为四个不同的标签设置边距的方法。您可以更改 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);
}
<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"
/>
您可以删除权重并为 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();
}
当您设置 tabPadding 不起作用时，您可以尝试设置 tabMaxWidth 和 tabMinWidth。这是为我工作。
<android.support.design.widget.TabLayout
app:tabMaxWidth="200dp"
app:tabMinWidth="20dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="16dp"
app:tabMode="scrollable" />
如果假定选项卡之间的距离相同，则显示的答案会有所帮助。
但有时您需要将最后一个选项卡与其他选项卡区分开来（在视图的末尾）。因此，您不能为工具栏创建菜单（也不能创建工具栏），并为所有内容使用通用的选项卡指示器。
遗憾的是，您不能直接为每个tabitem设置paddings和margins，但是您可以创建一个虚构的多一个tabitem并通过属性控制距离：
app:tabPaddingStart app:tabPaddingEnd app:tabMinWidth app:tabMaxWidth
虽然这有点拐杖的解决方法。
如果有人为选项卡（选择器）设置了自定义背景，您只需将图层列表添加到选项卡背景并为其设置边距
选择器：
<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>
如果您想为您的 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>