TabLayout 自定义下划线

一、需求

页面顶部添加Tab条，类似微博首页的关注和热门两个Tab，如下图：

Screenshot_2017-11-02-21-47-09-751_com.sina.weibo.png

二、方案

三个实现要点：

• TabLayout+FrameLayout
• 两个Tab对应两个Fragment，根据TabLayout.OnTabSelectedListener的回调切换Fragment
• 不使用ViewPager

三、问题

两个下划线样式问题：

• 不支持自定义宽度
• 不支持导圆角

四、解决

有两种方案，最终采用了第二种：

• 使用开源库
  MagicIndicator
  FlycoTabLayout
  NavigationTabStrip
  上面三个开源库均支持多种形式的Tab条，其中MagicIndicator支持在非ViewPager场景使用，另两个库目前不支持。
• 自定义下划线
  思路：给TabLayout的mTabStrip设置背景实现自定义下划线
  优点：可以绘制任意样式的下划线，线条、三角等，只要你想得到
  Step1：创建背景Drawable，在onDraw方法中完成自定义的下划线绘制：

public class IndicatorDrawable extends Drawable {
    private static final int INDICATOR_MARGIN = ScreenUtils.dp2px(24);
    private static final int INDICATOR_HEIGHT = ScreenUtils.dp2px(3);
    private static final int INDICATOR_RADIUS = ScreenUtils.dp2px(1.5f);

    private View view;
    private Paint paint;

    public IndicatorDrawable(View view) {
        this.view = view;
        this.paint = new Paint();
        paint.setColor(view.getContext().getResources().getColor(R.color.main_color));
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        int mIndicatorLeft = getIntValue("mIndicatorLeft");
        int mIndicatorRight = getIntValue("mIndicatorRight");
        int radius = INDICATOR_RADIUS;
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRoundRect(new RectF(mIndicatorLeft + INDICATOR_MARGIN, view.getHeight() - INDICATOR_HEIGHT, mIndicatorRight - INDICATOR_MARGIN, view.getHeight()), radius, radius, paint);
        }
    }

    private int getIntValue(String name) {
        try {
            Field f = view.getClass().getDeclaredField(name);
            f.setAccessible(true);
            Object obj = f.get(view);
            return (Integer) obj;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return 0;
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.UNKNOWN;
    }
}

Step2：xml中隐藏掉TabLayout原有的下划线：

Step3：代码里使用自定义下划线，即给mStripView设置背景：

 private void initTabLayout(FeedHotVideoConfig config) {
        tabLayout.removeAllTabs();
        tabLayout.clearOnTabSelectedListeners();

        View view = LayoutInflater.from(getContext()).inflate(R.layout.feed_tab, null);
        tvFollow = (TextView) view.findViewById(R.id.tv_tab);
        noticeFollow = view.findViewById(R.id.view_notice);

        tabLayout.addTab(tabLayout.newTab().setCustomView(view).setTag(TAG_FOLLOW));//自定义Tab样式
        tabLayout.addTab(tabLayout.newTab().setText(config.info.name).setTag(TAG_VIDEO));
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //Tab点击处理
                int tag = (int) tab.getTag();
                if (listener != null) {
                    listener.onTabSelected(tag);
                }

                refreshTab(tag);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        View tabStripView = tabLayout.getChildAt(0);
        tabStripView.setBackground(new IndicatorDrawable(tabStripView));//设置背景 添加自定义下划线
        tabLayout.setVisibility(VISIBLE);
    }

五、遇到的问题

• java.lang.NoSuchFieldException: mIndicatorLeft | mIndicatorRight
  问题：通过反射获取SlidingTabStrip的两个私有变量值，debug包正常运行，release包报错找不到变量。
  解决办法：在混淆文档中去掉对widget包的混淆，即加上
  -keep class android.support.design.widget.** { *; }