Android 自定义ViewPager下划线指示器Indica

大部分项目开发中都会使用到ViewPager这个控件，而UI设计师有时候为了美观往往提出各种各样的要求。比如说要求Tab下划线与文本长度一致：

19271026.png

在实现的过程中，采用TabLayout+ViewPager的方式。但是TabLayout并没有提供有效的API给我们设置线的宽度，阅读TabLayout的源代码可以知道，下划线的宽度是TabLayout的子View来控制的，也就是每个包含标题的View的宽度决定了下划线的宽度。在不修改源代码的前提，可以通过反射的方式获取到子View，修改属性来控制下滑线宽度。

工具类代码如下：

     public static void setIndicatorWidth(final TabLayout tabLayout) {
      //从源码得知 线的宽度是根据 tabView的宽度来设置的   
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                try {//拿到tabLayout的mTabStrip属性               
                    LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
                    //将dp转换成px             
                    int leftMargin = (int) Utils.convertDpToPixel(20f);
                    int middleMargin = (int) Utils.convertDpToPixel(22f);
                    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                        View tabView = mTabStrip.getChildAt(i);
                        //拿到tabView的mTextView属性  tab的字数不固定一定用反射取mTextView 
                        // 最新版的名字已经修改，如果修改版本，需要修改 
                        String flagTextName = "mTextView";
                        Field mTextViewField = tabView.getClass().getDeclaredField(flagTextName);
                        mTextViewField.setAccessible(true);
                        TextView mTextView = (TextView) mTextViewField.get(tabView);
                        tabView.setPadding(0, 0, 0, 0);
                        //想要的效果是   字多宽线就多宽，所以测量mTextView的宽度           
                        int width = 0;
                        width = mTextView.getWidth();
                        if (width == 0) {
                            mTextView.measure(0, 0);
                            width = mTextView.getMeasuredWidth();
                        }//设置tab左右间距 ，因为源码中线的宽度是根据tabView的宽度来设置的，所以得注意这里不能使用Padding       
                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                        //指示器宽度值设置               
                        params.width = width;
                        //设置一下tabview的margin，不设置会连在一起     
                        if (i == 0) {
                            params.leftMargin = leftMargin;
                            params.rightMargin = 0;
                        } else if (i == mTabStrip.getChildCount() - 1) {
                            params.leftMargin = middleMargin;
                            params.rightMargin = leftMargin;
                        } else {
                            params.leftMargin = middleMargin;
                            params.rightMargin = 0;
                        }
                        tabView.setLayoutParams(params);
                        tabView.invalidate();
                    }
                } catch (NoSuchFieldException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
        });
    }

需要注意的是，最新版的SDK的属性名已经改变，mTextView改成了textView。调用该工具类，需要在TabLayout绘制完后调用。因为只有测量绘制之后，才能知道文本的长度。