如何在TabLayout中的选项卡之间添加边距？

Question

有没有办法在TabLayout中的选项卡之间添加边距？我尝试过为Widget.Design.TabLayout使用自定义样式,但是有些属性只与填充有关,但没有边距.

Answer 1

好的伙伴,花了2-3个小时后,我终于找到了解决方案.

如果您使用的是TabLayout,则无法使用样式等向选项卡添加边距.(作为@Connecting与Android之前的生活)

但是,您可以通过编写一些Java代码来实现.总而言之,您的代码应该与那个代码类似:

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

为了将每个选项卡作为View,我们必须首先获取包含它们的容器.在这种情况下,TabLayout使用SlidingTabStrip作为选项卡的容器.SlidingTabStrip是TabLayout的第一个子节点:

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

在这个小细节之后,一切都非常直截了当.

Answer 2

这是我在纯 xml 中的做法。

尺寸.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. -->

包含您的 TabLayout 的布局：

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

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

......这就是诀窍所​​在。有效地，item根据您的@dimen/tab_spacing_half值将您的背景形状包裹在“填充”中。最后...

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>

Answer 3

这是@Todor Kostov 答案的 Kotlin 版本。

 for (i in 0 until applicationList_tabLayout.tabCount) {
            val tab = (applicationList_tabLayout.getChildAt(0) as ViewGroup).getChildAt(i)
            val p = tab.layoutParams as ViewGroup.MarginLayoutParams
            p.setMargins(10, 0, 10, 0)
            tab.requestLayout()
 }

Answer 4

@Todor Kostov 回答得很好，但是选项卡的中心被滑开了，因为最后一个选项卡也有边距。

所以使用mTabLayout.getTabCount() - 1而不是仅仅使用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();
        }