指定TabLayout的指示器宽度

引言：

关于TabLayout的指示器宽度，无法进行指定，默认宽度为所在TabView的宽度。虽然可以通过setTabIndicatorFullWidth(false)使指示器宽度为标题长度，但是还是达不到效果。

 

解决思路：

我先查找指示器的绘画代码，这里把我的查找流程放出来

setupWithViewPager
setPagerAdapter
populateFromPagerAdapter
addTab
addTabView
this.slidingTabIndicator.addView(tabView, tab.getPosition(), this.createLayoutParamsForTabs());

最后我们看看这个slidingTabIndicator变量是啥，果然是专门绘画指示器的类

private class SlidingTabIndicator extends LinearLayout

在这个类里的draw里指定了指示器的宽高

selectedIndicator.setBounds(this.indicatorLeft, indicatorTop, this.indicatorRight, indicatorBottom);

而indicatorLeft和.indicatorRight在此函数指定

setIndicatorPosition

而往上查找调用的函数，顺序如下

updateIndicatorPosition
onLayout

我们要好好看看updateIndicatorPosition这个函数

        private void updateIndicatorPosition() {
            View selectedTitle = this.getChildAt(this.selectedPosition);
            int left;
            int right;
            if (selectedTitle != null && selectedTitle.getWidth() > 0) {
                left = selectedTitle.getLeft();
                right = selectedTitle.getRight();
//当指示器不设置满宽度
                if (!TabLayout.this.tabIndicatorFullWidth && selectedTitle instanceof TabLayout.TabView) {
//根据Tab View的宽度，来设置指示器的宽度
                    this.calculateTabViewContentBounds((TabLayout.TabView)selectedTitle, TabLayout.this.tabViewContentBounds);
                    left = (int)TabLayout.this.tabViewContentBounds.left;
                    right = (int)TabLayout.this.tabViewContentBounds.right;
                }

。。。
                }
            } else {
                right = -1;
                left = -1;
            }

            this.setIndicatorPosition(left, right);
        }

 

最后我发现我只需要只能通过修改draw给的参数才行，但是都是私有属性，所以我直接自己创建了一个TabLayout，把原TabLayout复制过去，修改一点代码

 

代码地址

https://github.com/979451341/Audio-and-video-learning-materials/blob/master/TabLayout.java

 

使用如下

        vp1.setAdapter(fragmentPagerAdapter);
        tb1.setIndictorWidth(30);
        tb1.setupWithViewPager(vp1);

效果如下