修改系统的TabLayout来改变Indicator（下划线）的
一、简述：
最近项目中有个需求，效果如下图：我的做法是使用系统的TabLayout来实现，但是系统的TabLayout的下划线的长度是每个Item的长度，太长了，而且UI还要求下划线的是圆角，于是我就想办法解决这个问题。
效果图
二、 使用网上普遍的方法，反射TabLayout
1、写个工具类 封装：
public class TabLayoutUtils {
public static void setIndicator(TabLayout tabs, int leftDip, int rightDip, int bottomDip) {
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
return;
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
return;
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
int bottom = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, bottomDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
params.bottomMargin = bottom;
child.setLayoutParams(params);
child.invalidate();
}
}
}
2、在Activity调用
tab_view.post(new Runnable() {
@Override
public void run() {
TabUtils.setIndicator(tab_view,10,10);
}
});
使用这种方式，是可以把下划线变短，但是它也会缩短可点击区域，而且下划线还不是圆角的。
因此，我使用了下面的方法来解决这个问题：修改系统的TabLayout
三 、查看系统的TabLayout
修改系统的TabLayout前，我们还必须看看TabLayout源码。
tab的创建是TabLayout.addTabI();方法添加到TabLayout的：
TabLayout.Tab tab = mTabLayout.newTab().setCustomView(view);
mTabLayout.addTab(tab, true);
然后直接查看这个方法，这里的addTab是方法重载，最终调用的是下面的代码：
addTab方法
这里面调用的是addTabView(tab);方法,继续看这个方法：
addTabView方法
可以看到最后添加到mTabStrip中，我们先来看看TabView里面有什么东西
TabView类
其实从属性中就可以看出TabView是可以自定义的，但是在这里并没有看见Indicator（下划线）的痕迹，于是我们在看看mTabStrip.
SlidingTabStrip类
我们可以发现mSelectedIndicatorHeight属性，和setSelectedIndicatorHeight方法，这是设置下划线的高度，继续追踪mSelectedIndicatorHeight
draw(Canvas canvas)
原来是在draw方法中进行绘画出来的，其中根据mIndicatorLeft和mIndicatorRight来决定下划线的长短，我们继续看看这两个属性的来源。
从上面setIndicatorPosition方法中给mIndicatorLeft和mIndicatorRight属性赋值的，而mIndicatorLeft和mIndicatorRight方法又是在updateIndicatorPosition方法中调用的，所以分析updateIndicatorPosition方法，可以知道selectedTitle就是TabView，让后直接获取了它的左边坐标和右边坐标，也就是说线的宽度是TabView的宽度。
到这里还有个疑问，就是当我们设置tabView为2个字和5个字的时候，为啥tabVIew的宽度一样呢，这时，我们先看看SlidingTabStrip的onMeasure方法
看到没，看到没，取最大值，然后记录这个最大值，最后赋值给tabView的宽度，原因就在这里的了。
分析了这么久的源码，也是对源码有了大概的认识，然后我们想实现UI的效果，那就修改TabLayout的源码了，下面就是修改源码的步骤
四、修改系统的TabLayout
1、拷贝类
首先打开系统TabLayout源码，查看所在的包
UZW`BO{ZJ][~2DWST`A1P12.png
打开下图的路径，找到TabLayout源码，(TabLayout所依赖的类其实都在这里面了)
拷贝TabLayout类到自己所建的包中，这时类中所引用的类因为是包权限关系会找不到，看看那个找不到，就在拷贝那个类。
最终拷贝的类有如下图：
到此，就可以像普通的自定义view一样使用自定义的TabLayout了。
2、自定义属性
TabLayout 先保留系统的属性（将系统定义的属性复制出来），也可添加自定义属性。
下图为系统属性
下图为添加了自定义属性之后,(先增加一个属性tabLineOffset，用于控制下划线的长度)
3、自定义属性的实现
1、在TabLayout的构造方法中加入自己的自定义属性
2、修改SlidingTabStrip类的draw方法
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
if(mTabLineOffset == 0){
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}else {
//原来的下划线的长度(也就是Tab的宽度)
int width = mIndicatorRight - mIndicatorLeft;
//Tab的中心点的坐标（mIndicatorRight-width/2也是）
int tabCenter = mIndicatorLeft+width/2;
RectF oval3 = new RectF(tabCenter-mTabLineOffset, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight-width/2+mTabLineOffset, getHeight());
canvas.drawRoundRect(oval3,30,30,mSelectedIndicatorPaint);
}
}
}
这里我进行了判断，如果在xml中没有使用自定义属性mTabLineOffset ，就还是展示的是系统TabLayout的样式，否者，就是我们可控制的下划线长度。
这里我们先取了Tab的宽度，算出Tab的中心坐标位置，让后根据中心位置坐标和mTabLineOffset 值来确定下划线的长度。
到此，任务完成了，
五、使用
1、MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout mTabLayout = findViewById(R.id.tab_layout);
for (int i = 0; i < 3; i++) {
View view = LayoutInflater.from(this).inflate(R.layout.item_skill_tab, null, false);
TextView tvName = view.findViewById(R.id.tv_name);
tvName.setText("城市导游" + i);
TabLayout.Tab tab = mTabLayout.newTab().setCustomView(view);
//设置第一个默认选中Tab
if (i == 0) {
mTabLayout.addTab(tab, true);
} else {
mTabLayout.addTab(tab);
}
}
}
}
2、activity_main.xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.zxj.mytablayout.tablayout.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="112dp"
android:text="Hello World!"
app:tabGravity="fill"
app:tabIndicatorHeight="5dp"
app:tabIndicatorColor="#fd676f"
app:tabLineOffset="20dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#fd676f"
app:tabTextColor="#fd676f" />
</android.support.constraint.ConstraintLayout>
3、最终效果如图
当然，这只是一个小小的改动，如有更复杂的需求，可以进一步的修改，反正限制源码都是你的了，你想怎么改就怎么改！
以上如有不对的地方，请多多指教!
