看了下网上很多的文章来设置下划线宽度的问题，有点杂乱无章，有的博文直接贴代码，无法理解设置的过程和实际的意义，看来只能自己动手才能丰衣足食了。
使用
viewPager = (ViewPager) findViewById(R.id.qbdd_viewpager); viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList)); tabLayout = (TabLayout) findViewById(R.id.qbdd_tablayout); tabLayout.addTab(tabLayout.newTab()); tabLayout.addTab(tabLayout.newTab()); tabLayout.addTab(tabLayout.newTab()); tabLayout.setupWithViewPager(viewPager); tabLayout.getTabAt(0).setText("全部"); tabLayout.getTabAt(1).setText("待付款"); tabLayout.getTabAt(2).setText("待评论"); 复制代码
分析
来看tabLayout.newTab()操作
public Tab newTab() { Tab tab = sTabPool.acquire(); if (tab == null) { tab = new Tab(); } tab.mParent = this; tab.mView = createTabView(tab); return tab; } private TabView createTabView(@NonNull final Tab tab) { TabView tabView = mTabViewPool != null ? mTabViewPool.acquire() : null; if (tabView == null) { tabView = new TabView(getContext()); } tabView.setTab(tab); tabView.setFocusable(true); tabView.setMinimumWidth(getTabMinWidth()); return tabView; } 复制代码
这个步骤的操作不难，就是创建一个TabView，设置一些参数，然后将TabView设置到tab.mView，然后返回Tab。
然后来看tabLayout.addTab(tabLayout.newTab())操作
//有很多的重载方法，我们直接看最后调用的方法 public void addTab(@NonNull Tab tab, int position, boolean setSelected) { if (tab.mParent != this) { throw new IllegalArgumentException("Tab belongs to a different TabLayout."); } configureTab(tab, position); addTabView(tab); if (setSelected) { tab.select(); } } //集合存储下当前的Tab private void configureTab(Tab tab, int position) { tab.setPosition(position); mTabs.add(position, tab); final int count = mTabs.size(); for (int i = position + 1; i < count; i++) { mTabs.get(i).setPosition(i); } } //将Tab里面存储的TabView添加到mTabStrip布局里面 private void addTabView(Tab tab) { final TabView tabView = tab.mView; mTabStrip.addView(tabView, tab.getPosition(), createLayoutParamsForTabs()); } 复制代码
这个部分也比较简单，就是将之前创建好的Tab里面的TabView，添加到mTabStrip里面去。那么mTabStrip是个什么东西呢？我们ctrl+F来看看他在TabLayout这个类里面干了啥
private final SlidingTabStrip mTabStrip; public TabLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); ... // Add the TabStrip mTabStrip = new SlidingTabStrip(context); super.addView(mTabStrip, 0, new HorizontalScrollView.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT)); ... } 复制代码
在TabLayout的构造方法里面我们看到了他的应用，将mTabStrip直接add到TabLayout，也就是说SlidingTabStrip是TabLayout的子类，那么，刚刚添加进来的TabView是SlidingTabStrip的子类。
然后我们来看看SlidingTabStrip这个类是干什么的
private class SlidingTabStrip extends LinearLayout { SlidingTabStrip(Context context) { super(context); setWillNotDraw(false); mSelectedIndicatorPaint = new Paint(); } } 复制代码
构造方法没找到设置方向的代码，说明当前LineaLayout默认是水平方向，和我们看到TabLayout水平排列的一样。
然后看看onMeasure方法,这个地方直接看注释吧，代码有点多
@Override protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); ... //这种情况只有在设置TabLayout的tabMode为fixed的时候触发 if (mMode == MODE_FIXED && mTabGravity == GRAVITY_CENTER) { final int count = getChildCount(); // First we'll find the widest tab //for循环遍历所有子TabView的宽度，以最宽的TabView的宽度来为每个子TabView的宽度 int largestTabWidth = 0; for (int i = 0, z = count; i < z; i++) { View child = getChildAt(i); if (child.getVisibility() == VISIBLE) { largestTabWidth = Math.max(largestTabWidth, child.getMeasuredWidth()); } } if (largestTabWidth <= 0) { // If we don't have a largest child yet, skip until the next measure pass return; } final int gutter = dpToPx(FIXED_WRAP_GUTTER_MIN); boolean remeasure = false; //如果所有子TabView的宽度之和还没SlidingTabStrip宽度减去一个偏移值宽的话，那么就给所有的子TabView重新设置宽度为最大宽度的TabView， //然后设置weight权重为0，那么所有的子view就会按比例均分SlidingTabStrip的宽度 if (largestTabWidth * count <= getMeasuredWidth() - gutter * 2) { // If the tabs fit within our width minus gutters, we will set all tabs to have // the same width for (int i = 0; i < count; i++) { final LinearLayout.LayoutParams lp = (LayoutParams) getChildAt(i).getLayoutParams(); if (lp.width != largestTabWidth || lp.weight != 0) { lp.width = largestTabWidth; lp.weight = 0; remeasure = true; } } } else { // If the tabs will wrap to be larger than the width minus gutters, we need // to switch to GRAVITY_FILL mTabGravity = GRAVITY_FILL; updateTabViews(false); remeasure = true; } if (remeasure) { // Now re-measure after our changes super.onMeasure(widthMeasureSpec, heightMeasureSpec); } } 复制代码
主要就是计算下子view的宽度，然后设置子view的宽度
然后大致来看看onLayout方法
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); if (mIndicatorAnimator != null && mIndicatorAnimator.isRunning()) { // If we're currently running an animation, lets cancel it and start a // new animation with the remaining duration mIndicatorAnimator.cancel(); final long duration = mIndicatorAnimator.getDuration(); //动画移动指示器在哪个position位置上面，此处就不深入了，主要就是一个ValueAnimatorCompat动画 animateIndicatorToPosition(mSelectedPosition, Math.round((1f - mIndicatorAnimator.getAnimatedFraction()) * duration)); } else { // If we've been layed out, update the indicator position updateIndicatorPosition(); } } 复制代码
主要就是判断动画有么有被初始化并且是否在做动画，如果是的话，给TabLayout滑块做动画，滑动到指定位置的position上面，如果没有，则来设置这个滑块。此处，我们来到了我们想要设置的关键点，滑块的宽度。
我们来看updateIndicatorPosition方法,看注释吧
private void updateIndicatorPosition() { //根据当前滑块的位置拿到当前TabView final View selectedTitle = getChildAt(mSelectedPosition); int left, right; if (selectedTitle != null && selectedTitle.getWidth() > 0) { //拿到TabView的左、右位置 left = selectedTitle.getLeft(); right = selectedTitle.getRight(); //这句就是在滑块滑动的时候，如果滑动超过了上一个或是下一个滑块一半的话，那就说明移动到了上一个或是下一个滑块，然后取出left和right if (mSelectionOffset > 0f && mSelectedPosition < getChildCount() - 1) { // Draw the selection partway between the tabs View nextTitle = getChildAt(mSelectedPosition + 1); left = (int) (mSelectionOffset * nextTitle.getLeft() + (1.0f - mSelectionOffset) * left); right = (int) (mSelectionOffset * nextTitle.getRight() + (1.0f - mSelectionOffset) * right); } } else { left = right = -1; } //设置滑块的位置 setIndicatorPosition(left, right); } void setIndicatorPosition(int left, int right) { if (left != mIndicatorLeft || right != mIndicatorRight) { // If the indicator's left/right has changed, invalidate mIndicatorLeft = left; mIndicatorRight = right; ViewCompat.postInvalidateOnAnimation(this); } } 复制代码
从代码的整体来看，设置滑块的宽度是根据子TabView的宽度来设置的，也就是说，TabView的宽度是多少，那么滑块的宽度就是多少。
停下来想想，按照上面的分析，我们先画个布局层图
最外面是TabLayout，子view是SlidingTabStrip,所有addTab创建的tab都是SlidingTabStrip的子类，并且通过onMeasure重新给Tabview设置了宽度和权重，致使每个tabView都是占满布局。
因为滑块的宽度跟TabView的宽度有关，那么我们重新给TabView设置LayoutParams，设置marginLeft和marginRight，这样，会压缩TabView的宽度，致使滑块的宽度也跟着变化，如下思路图所示
朝上的花括号是margin，黄色的是滑块，这样不就可以控制滑块的宽度了嘛，那么，我们来试试
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { //一些TabLayout的addTab操作 tabLayout.post(new Runnable() { @Override public void run() { setTabWidth(); } }); } public void setTabWidth(){ //拿到SlidingTabStrip的布局 LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0); //遍历SlidingTabStrip的所有TabView子view for (int i = 0; i < mTabStrip.getChildCount(); i++) { View tabView = mTabStrip.getChildAt(i); LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)tabView.getLayoutParams(); //给TabView设置leftMargin和rightMargin params.leftMargin = dp2px(10); params.rightMargin = dp2px(10); tabView.setLayoutParams(params); //触发绘制 tabView.invalidate(); } } 复制代码
这个地方需要在Tablayout设置完成后操作，并且必须等所有绘制操作结束，使用tabLayout.post拿到属性参数，然后设置下margin，搞定，来看看效果图
看起来还行，仔细看的时候会发现，当TabView的文字有2个的时候TextSize特别大，有三个的时候TextSize比较小，这种情况只适合所有TabView的文字长度都是一样的情况。我们来想想，为啥会导致这种情况呢，在我们设置TabView的宽度的时候，并没有考虑到TabView子view的wrap情况，万一TabView的子view宽度有的大，有的小，我只考虑到给每个TabView设置平均的宽度的话，考虑的不是特别周全，所以，我们先来看看TabView里面有啥，然后重新整理思路。
来看看TabView是个啥玩意
class TabView extends LinearLayout implements OnLongClickListener { private Tab mTab; private TextView mTextView; private ImageView mIconView; private View mCustomView; private TextView mCustomTextView; private ImageView mCustomIconView; private int mDefaultMaxLines = 2; public TabView(Context context) { super(context); if (mTabBackgroundResId != 0) { ViewCompat.setBackground( this, AppCompatResources.getDrawable(context, mTabBackgroundResId)); } ViewCompat.setPaddingRelative(this, mTabPaddingStart, mTabPaddingTop, mTabPaddingEnd, mTabPaddingBottom); setGravity(Gravity.CENTER); setOrientation(VERTICAL); setClickable(true); ViewCompat.setPointerIcon(this, PointerIconCompat.getSystemIcon(getContext(), PointerIconCompat.TYPE_HAND)); } } 复制代码
是一个垂直方向的LineaLayout，然后我们回到最上面，看一下TabView的创建。调用了tabView.setTab(tab)方法
void setTab(@Nullable final Tab tab) { if (tab != mTab) { mTab = tab; update(); } } final void update() { ... if (mCustomView == null) { // If there isn't a custom view, we'll us our own in-built layouts if (mIconView == null) { ImageView iconView = (ImageView) LayoutInflater.from(getContext()) .inflate(R.layout.design_layout_tab_icon, this, false); //将iconView添加到TabView addView(iconView, 0); mIconView = iconView; } if (mTextView == null) { TextView textView = (TextView) LayoutInflater.from(getContext()) .inflate(R.layout.design_layout_tab_text, this, false); //将TextView添加到TabView addView(textView); mTextView = textView; mDefaultMaxLines = TextViewCompat.getMaxLines(mTextView); } TextViewCompat.setTextAppearance(mTextView, mTabTextAppearance); if (mTabTextColors != null) { mTextView.setTextColor(mTabTextColors); } updateTextAndIcon(mTextView, mIconView); } else { // Else, we'll see if there is a TextView or ImageView present and update them if (mCustomTextView != null || mCustomIconView != null) { updateTextAndIcon(mCustomTextView, mCustomIconView); } } 复制代码
这地方就是初始化mTextView和mIconView，就是我们常见的TabLayout设置带有icon的tab，然后添加到TabView里面。
TabView的子view没多少，总共就5个，自定义的view目前可以不用关心，我们先来关心关心mTextView,因为我们刚刚是因为他出了问题。
我们之前设置的是TabView的宽度，导致了TextView显示被压缩，那么，现在我们换个思路，我们去拿TextView的宽度，然后设置到TabView的宽上面，使TabView的宽度来适应TextView的宽度，不采用之前平均分配宽度的方式。
那么，来试试吧
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { //一些TabLayout的addTab操作 tabLayout.post(new Runnable() { @Override public void run() { setTabWidth(); } }); } public void setTabWidth(){ //拿到SlidingTabStrip的布局 LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0); //遍历SlidingTabStrip的所有TabView子view for (int i = 0; i < mTabStrip.getChildCount(); i++) { View tabView = mTabStrip.getChildAt(i); //通过反射拿到TabView的的mTextView Field mTextViewField = tabView.getClass().getDeclaredField("mTextView"); mTextViewField.setAccessible(true); //拿到TextView的宽度 TextView mTextView = (TextView) mTextViewField.get(tabView); int txWidth = mTextView.getMeasuredWidth(); LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)tabView.getLayoutParams(); //给TabView设置宽度 params.width = txWidth; //还可以使用tabView.setMinimumWidth(txWidth);给TabView设置最小宽度为textView的宽度 //给TabView设置leftMargin和rightMargin params.leftMargin = dp2px(10); params.rightMargin = dp2px(10); tabView.setLayoutParams(params); //触发绘制 tabView.invalidate(); } } 复制代码
效果图
嗯，很完美，这里地方主要就是通过mTextView的宽度来控制TabView的宽度，这里有两种方式，一种是直接给TabView设置宽度，还有一种是给TabView设置最小宽度为mTextView的宽度，总之就是要保证mTextView的文字正常显示。
最后还有一点就是有的人这么使用会报错，是因为混淆产生的问题，反射mTextView的时候可能会出问题，可以在混淆配置里面设置下TabLayout不被混淆
-keep class android.support.design.widget.TabLayout{*;}
总结
继续看源码，看别人的设计思路
推荐一本最近在看的书《自控力》，人要做到“慎独”、严于律己，慎其独也者，言舍夫五而慎其心之谓也。独然后一，一也者，夫五为一也，然后得之。
