重写TabLayout达到线的宽度和字的宽度一样(自定义线的颜色)

//重写TabLayout

public class TabLayoutIndicatorCompat extends TabLayout {
    private float tabMargin;
    private boolean matchParent;

    public TabLayoutIndicatorCompat(Context context) {
        this(context, null);
    }

    public TabLayoutIndicatorCompat(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init(AttributeSet attrs) {
        if (attrs == null) {
            tabMargin = ScreenUtils.dp2px(10);
            return;
        }
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.TabLayoutIndicatorCompat);
        tabMargin = a.getDimension(R.styleable.TabLayoutIndicatorCompat_tabMargin, ScreenUtils.dp2px(10));
        matchParent = a.getBoolean(R.styleable.TabLayoutIndicatorCompat_matchParent, false);
        a.recycle();
    }

    public void setupWithViewPager(@Nullable ViewPager viewPager) {
        super.setupWithViewPager(viewPager);//了解源码得知 线的宽度是根据 tabView的宽度来设置的
        post(() -> {
            try {
                //拿到tabLayout的mTabStrip属性
                Field mTabStripField = TabLayout.class.getDeclaredField("mTabStrip");
                mTabStripField.setAccessible(true);

                LinearLayout mTabStrip = (LinearLayout) mTabStripField.get(TabLayoutIndicatorCompat.this);

                int tabCount = mTabStrip.getChildCount();
                for (int i = 0; i < tabCount; i++) {
                    View tabView = mTabStrip.getChildAt(i);

                    //拿到tabView的mTextView属性
                    Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
                    mTextViewField.setAccessible(true);

                    TextView mTextView = (TextView) mTextViewField.get(tabView);

                    tabView.setPadding(0, 0, 0, 0);

                    //因为我想要的效果是   字多宽线就多宽,所以测量mTextView的宽度
                    int width;
                    width = mTextView.getWidth();
                    if (width == 0) {
                        mTextView.measure(0, 0);
                        width = mTextView.getMeasuredWidth();
                    }

                    //设置tab左右间距为10dp  注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的
                    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                    params.width = width;
                    if (matchParent) {
                        int margin = (int) ((getWidth() / (float) tabCount - width) / 2);
                        params.leftMargin = margin;
                        params.rightMargin = margin;
                        tabView.post(() -> {
                            LinearLayout.LayoutParams params1 = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                            if (tabView != null && tabView.getWidth() != getWidth()) {
                                int margin1 = (int) ((getWidth() / (float) tabCount - params1.width) / 2);
                                params1.leftMargin = margin1;
                                params1.rightMargin = margin1;
                                tabView.setLayoutParams(params1);
                                tabView.invalidate();
                            }
                        });
                    } else {
                        params.leftMargin = (int) tabMargin;
                        params.rightMargin = (int) tabMargin;
                    }
                    tabView.setLayoutParams(params);

                    tabView.invalidate();
                }

            } catch (Exception e) {
                e.printStackTrace();
            }
        });
    }
}

//使用

<com.heyjoy.maiya.biz.view.TabLayoutIndicatorCompat
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/topbar"
        app:matchParent="true"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/text_color_primary" />

//效果图

猜你喜欢

转载自blog.csdn.net/Mr_GLY_di/article/details/80003871