TabLayout选项卡之间的分隔符以编程方式LinearLayout.SHOW_DIVIDER_MIDDLE

时间:2018-04-14 12:04:18

标签: android android-tablayout divider

我尝试在标签之间添加分隔线,而不使用任何自定义布局。我已经使用以下方法以编程方式尝试了它:

public static void addTabsDividers(TabLayout tabLayout, @ColorRes int divColorRes,int divWidthDP,int divHeightDP){
        View root = tabLayout.getChildAt(0);
        if (root instanceof LinearLayout) {
            ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
            GradientDrawable drawable = new GradientDrawable();
            drawable.setColor(tabLayout.getContext().getResources().getColor(divColorRes));
            drawable.setSize(divWidthDP, divHeightDP);
//            ((LinearLayout) root).setDividerPadding(10);
            ((LinearLayout) root).setDividerDrawable(drawable);
        }
    }

但是这会在标签的左侧增加额外的空间: tab divider image

请注意标签左侧的奇怪空白区域,我想删除它!!

Tabs xml:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="?actionBarSize">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/tabs"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <FrameLayout
                android:id="@+id/fl_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabPaddingTop="5dp"
            app:tabPaddingBottom="0dp"
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="0dp"
            app:tabTextColor="@color/md_white_1000"
            app:tabSelectedTextColor="@color/md_white_1000"
            app:tabTextAppearance="@style/TabTextStyle"
            app:tabBackground="@drawable/tab_color_selector"/>
    </RelativeLayout>

1 个答案:

答案 0 :(得分:1)

我在使用的同一个问题上看到了你,你使用和我一样的解决方案,我有同样的问题!但我发现使用自定义drawable分频器100%解决了问题,现在我只在我的两个选项卡中间有一个分隔符。这是我正在使用的绘图:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <size android:width="1dp" />
        <solid android:color="@android:color/white" />
    </shape>
</item>

<item
    android:bottom="16dp"
    android:top="12dp">

    <shape android:shape="rectangle">
        <solid android:color="@color/color_gray" />
        <size android:width="1dp" />
    </shape>
</item>

请告诉我这是否适合您。

public class MyTabLayout extends TabLayout {
public MyTabLayout(Context context) {
    super(context);
}

public MyTabLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

/**
 * Adds vertical dividers between tabs
 */
public void addTabDivider() {
    LinearLayout linearLayout = (LinearLayout)getChildAt(0);
    linearLayout
            .setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
    Drawable drawable = MyApp.getInstance().getDrawable(R.drawable.tab_divider);
    linearLayout.setDividerDrawable(drawable);
}