Android 开发必备自定义view

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

2019-05-03  本文已影响34人  总会颠沛流离

在实现的过程中,采用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绘制完后调用。因为只有测量绘制之后,才能知道文本的长度。

上一篇下一篇

猜你喜欢

热点阅读