相信大家平时都有这样的需求，要修改原生TabLayout指示器的宽度。网上大致的做法可以总结为以下几种：
1.通过反射获取textView，修改宽度，但是这样tab就无法根据内容显示宽度了；
2.通过Tab.setCustomView()，在自定义布局里加上下划线，选中时显示，未选中时隐藏，但是这样没有滑动效果，切换会显得很生硬；
等等。
这篇文章自定义指示器样式的思路很简单：隐藏原生的指示器，在TabLayout子类的onDraw（）中重绘指示器样式。
1.自定义TabLayout子类：
public class CustomIndicatorTabLayout extends TabLayout {
private CustomIndicator customIndicator;
private boolean initDraw = true;
public CustomIndicatorTabLayout(Context context) {
this(context, null);
}
public CustomIndicatorTabLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomIndicatorTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setSelectedTabIndicatorColor(Color.TRANSPARENT);
addOnTabSelectedListener(new OnTabSelectedListener() {
@Override
public void onTabSelected(Tab tab) {
int position = tab.getPosition();
View content = CustomIndicatorTabLayout.this.getChildAt(0);
if (content instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) content;
if (position < vg.getChildCount()) {
View child = vg.getChildAt(position);
if (child.getWidth() == 0) return;
if (customIndicator != null)
customIndicator.onSelected(position, child, vg);
}
}
}
@Override
public void onTabUnselected(Tab tab) {
int position = tab.getPosition();
View content = CustomIndicatorTabLayout.this.getChildAt(0);
if (content instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) content;
if (position < vg.getChildCount()) {
View child = vg.getChildAt(position);
if (child.getWidth() == 0) return;
if (customIndicator != null)
customIndicator.onUnselected(position, child, vg);
}
}
}
@Override
public void onTabReselected(Tab tab) {
int position = tab.getPosition();
View content = CustomIndicatorTabLayout.this.getChildAt(0);
if (content instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) content;
if (position < vg.getChildCount()) {
View child = vg.getChildAt(position);
if (child.getWidth() == 0) return;
if (customIndicator != null)
customIndicator.onReselected(position, child, vg);
}
}
}
});
}
public void setCustomIndicator(CustomIndicator customIndicator) {
this.customIndicator = customIndicator;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (initDraw) {
initDraw = false;
int position = customIndicator == null ? 0 : customIndicator.defaultPosition();
View content = CustomIndicatorTabLayout.this.getChildAt(0);
if (content instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) content;
if (position < vg.getChildCount()) {
View child = vg.getChildAt(position);
if (customIndicator != null)
customIndicator.onDefaultSelected(position, child, vg);
}
}
}
if (customIndicator != null)
customIndicator.draw(canvas);
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (initDraw) {
initDraw = false;
int position = customIndicator == null ? 0 : customIndicator.defaultPosition();
View content = CustomIndicatorTabLayout.this.getChildAt(0);
if (content instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) content;
if (position < vg.getChildCount()) {
View child = vg.getChildAt(position);
if (customIndicator != null)
customIndicator.onDefaultSelected(position, child, vg);
}
}
}
if (customIndicator != null)
customIndicator.draw(canvas);
}
public interface CustomIndicator {
void draw(Canvas canvas);
void onSelected(int position, View selected, ViewGroup parent);
void onDefaultSelected(int position, View selected, ViewGroup parent);
void onUnselected(int position, View unselected, ViewGroup parent);
void onReselected(int position, View unselected, ViewGroup parent);
int defaultPosition();
}
}
2.实现CustomIndicator接口，实现动画绘制：常用滑动效果CommonIndicator
public class CommonIndicator implements CustomIndicatorTabLayout.CustomIndicator {
private UnderlineAnim underlineAnim;
private CustomIndicatorTabLayout tabLayout;
public CommonIndicator(final CustomIndicatorTabLayout tabLayout, int color, int lineWidth, int lineHeight, long duration) {
this.tabLayout = tabLayout;
underlineAnim = new UnderlineAnim(color, lineWidth, lineHeight, duration, new AnimListener() {
@Override
public void notifyInvalidate() {
tabLayout.invalidate();
}
});
}
@Override
public void draw(Canvas canvas) {
underlineAnim.draw(tabLayout, canvas);
}
@Override
public void onSelected(int position, View selected, ViewGroup parent) {
underlineAnim.animChangeOffset(getTabIndicatorOffset(selected));
}
@Override
public void onDefaultSelected(int position, View selected, ViewGroup parent) {
underlineAnim.changeOffset(getTabIndicatorOffset(selected));
tabLayout.invalidate();
}
@Override
public void onUnselected(int position, View unselected, ViewGroup parent) {
}
@Override
public void onReselected(int position, View unselected, ViewGroup parent) {
}
@Override
public int defaultPosition() {
return 1;
}
private int getTabIndicatorOffset(View view) {
return view.getLeft() + (view.getWidth() - this.underlineAnim.getLineWidth() >> 1);
}
public class UnderlineAnim {
private Paint mPaint;
private int lineWidth;
private int lineHeight;
private long duration;
private int offset = 0;
private int paddingBottom;
private int corner;
private ValueAnimator animator;
private ValueAnimator.AnimatorUpdateListener updateListener;
public UnderlineAnim(int color, int lineWidth, int lineHeight, long duration, final AnimListener animListener) {
this.lineWidth = lineWidth;
this.lineHeight = lineHeight;
this.duration = duration;
this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.mPaint.setColor(color);
this.mPaint.setStyle(Paint.Style.FILL);
this.updateListener = new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
UnderlineAnim.this.offset = (Integer) animation.getAnimatedValue();
if (animListener != null) {
animListener.notifyInvalidate();
}
}
};
}
public void setCorner(int corner) {
this.corner = corner;
}
public int getLineWidth() {
return this.lineWidth;
}
public void setStartOffset(int offset) {
this.offset = offset;
}
public void setPaddingBottom(int paddingBottom) {
this.paddingBottom = paddingBottom;
}
public void setDuration(long duration) {
this.duration = duration;
}
public void setLineWidth(int lineWidth) {
this.lineWidth = lineWidth;
}
public void setLineHeight(int lineHeight) {
this.lineHeight = lineHeight;
}
public void animChangeOffset(int targetPosition) {
if (this.offset != targetPosition) {
if (this.animator == null) {
this.animator = ValueAnimator.ofInt(new int[]{this.offset, targetPosition});
this.animator.setDuration(this.duration);
this.animator.setInterpolator(new LinearInterpolator());
this.animator.addUpdateListener(this.updateListener);
} else {
this.animator.end();
this.animator.setIntValues(new int[]{this.offset, targetPosition});
}
this.animator.start();
}
}
public void changeOffset(int targetPosition) {
this.offset = targetPosition;
}
public void draw(View view, Canvas canvas) {
if (this.corner > 0 && Build.VERSION.SDK_INT >= 21) {
canvas.drawRoundRect((float) this.offset, (float) (view.getHeight() - this.paddingBottom - this.lineHeight), (float) (this.offset + this.lineWidth), (float) (view.getHeight() - this.paddingBottom), (float) this.corner, (float) this.corner, this.mPaint);
} else {
canvas.drawRect((float) this.offset, (float) (view.getHeight() - this.paddingBottom - this.lineHeight), (float) (this.offset + this.lineWidth), (float) (view.getHeight() - this.paddingBottom), this.mPaint);
}
}
}
public interface AnimListener {
void notifyInvalidate();
}
}
3.粘性滑动效果StickyIndicator
public class StickyIndicator implements CustomIndicatorTabLayout.CustomIndicator {
private StickyIndicator.UnderlineAnim underlineAnim;
private CustomIndicatorTabLayout tabLayout;
public StickyIndicator(final CustomIndicatorTabLayout tabLayout, int color, int lineWidth, int lineHeight, long duration) {
this.tabLayout = tabLayout;
underlineAnim = new StickyIndicator.UnderlineAnim(color, lineWidth, lineHeight, duration, new StickyIndicator.AnimListener() {
@Override
public void notifyInvalidate() {
tabLayout.invalidate();
}
});
}
public StickyIndicator(final CustomIndicatorTabLayout tabLayout, int[] gradientColor, int lineWidth, int lineHeight, long duration) {
this.tabLayout = tabLayout;
underlineAnim = new StickyIndicator.UnderlineAnim(gradientColor, lineWidth, lineHeight, duration, new StickyIndicator.AnimListener() {
@Override
public void notifyInvalidate() {
tabLayout.invalidate();
}
});
}
public UnderlineAnim getUnderlineAnim() {
return underlineAnim;
}
@Override
public void draw(Canvas canvas) {
underlineAnim.draw(tabLayout, canvas);
}
@Override
public void onSelected(int position, View selected, ViewGroup parent) {
underlineAnim.animChangeOffset(getTabIndicatorOffset(selected));
}
@Override
public void onDefaultSelected(int position, View selected, ViewGroup parent) {
underlineAnim.changeOffset(getTabIndicatorOffset(selected));
tabLayout.invalidate();
}
@Override
public void onUnselected(int position, View unselected, ViewGroup parent) {
}
@Override
public void onReselected(int position, View unselected, ViewGroup parent) {
}
@Override
public int defaultPosition() {
return 1;
}
private int getTabIndicatorOffset(View view) {
return view.getLeft() + (view.getWidth() - this.underlineAnim.getLineWidth() >> 1);
}
public class UnderlineAnim {
private final int LEFT = 0;
private final int RIGHT = 1;
private int fixDirection = -1;
private int maxStickyLength = 0;
private Paint mPaint;
private int lineWidth;
private int lineHeight;
private long duration;
private int curPosition = 0;
private int targetPosition;
private int paddingBottom;
private int corner;
private int[] gradientColor;
private ValueAnimator animator;
private ValueAnimator.AnimatorUpdateListener updateListener;
public UnderlineAnim(int color, int lineWidth, int lineHeight, long duration, final StickyIndicator.AnimListener animListener) {
this.lineWidth = lineWidth;
this.lineHeight = lineHeight;
this.duration = duration;
this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.mPaint.setColor(color);
this.mPaint.setStyle(Paint.Style.FILL);
this.updateListener = new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
UnderlineAnim.this.curPosition = (Integer) animation.getAnimatedValue();
if (animListener != null) {
animListener.notifyInvalidate();
}
}
};
}
public UnderlineAnim(int[] gradientColor, int lineWidth, int lineHeight, long duration, final StickyIndicator.AnimListener animListener) {
this.lineWidth = lineWidth;
this.lineHeight = lineHeight;
this.duration = duration;
this.gradientColor = gradientColor;
this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.mPaint.setStyle(Paint.Style.FILL);
this.updateListener = new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
UnderlineAnim.this.curPosition = (Integer) animation.getAnimatedValue();
if (animListener != null) {
animListener.notifyInvalidate();
}
}
};
}
public void setMaxStickyLength(int maxStickyLength) {
this.maxStickyLength = maxStickyLength;
}
public void setCorner(int corner) {
this.corner = corner;
}
public int getLineWidth() {
return this.lineWidth;
}
public void setPaddingBottom(int paddingBottom) {
this.paddingBottom = paddingBottom;
}
public void setDuration(long duration) {
this.duration = duration;
}
public void setLineWidth(int lineWidth) {
this.lineWidth = lineWidth;
}
public void setLineHeight(int lineHeight) {
this.lineHeight = lineHeight;
}
public void animChangeOffset(int targetPosition) {
this.targetPosition = targetPosition;
if (this.curPosition != targetPosition) {
if (targetPosition > curPosition)
fixDirection = RIGHT;
else fixDirection = LEFT;
if (this.animator == null) {
this.animator = ValueAnimator.ofInt(this.curPosition, targetPosition);
this.animator.setDuration(this.duration);
this.animator.setInterpolator(new LinearInterpolator());
this.animator.addUpdateListener(this.updateListener);
} else {
this.animator.end();
this.animator.setIntValues(this.curPosition, targetPosition);
}
this.animator.start();
} else fixDirection = -1;
}
public void changeOffset(int targetPosition) {
this.curPosition = targetPosition;
this.targetPosition = targetPosition;
}
public void draw(View view, Canvas canvas) {
float y1 = (float) (view.getHeight() - this.paddingBottom - this.lineHeight);
float y2 = (float) (view.getHeight() - this.paddingBottom);
float x1 = 0;
float x2 = 0;
if (fixDirection == LEFT) {
x1 = targetPosition;
x2 = curPosition + lineWidth;
if (maxStickyLength > lineWidth) {
float d = x2 - x1;
if (d > maxStickyLength) {
x1 = x2 - maxStickyLength;
}
}
} else if (fixDirection == RIGHT) {
x2 = targetPosition + lineWidth;
x1 = curPosition;
if (maxStickyLength > lineWidth) {
float d = x2 - x1;
if (d > maxStickyLength) {
x2 = x1 + maxStickyLength;
}
}
} else {
x1 = curPosition;
x2 = curPosition + lineWidth;
}
if (gradientColor != null) {
@SuppressLint("DrawAllocation")
Shader mShaderRight = new LinearGradient(x1, y1, x2, y2, gradientColor, null, Shader.TileMode.CLAMP);
mPaint.setShader(mShaderRight);
}
if (this.corner > 0 && Build.VERSION.SDK_INT >= 21) {
canvas.drawRoundRect(x1, y1, x2, y2, (float) this.corner, (float) this.corner, this.mPaint);
} else {
canvas.drawRect(x1, y1, x2, y2, this.mPaint);
}
}
}
public interface AnimListener {
void notifyInvalidate();
}
}
4.使用方式：
public class CustomIndicatorTabLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_indicator_tab_layout);
CustomIndicatorTabLayout tab_layout = findViewById(R.id.tab_layout);
tab_layout.setCustomIndicator(new CommonIndicator(tab_layout, Color.RED, 80, 8, 300));
setup(tab_layout);
CustomIndicatorTabLayout tab_layout2 = findViewById(R.id.tab_layout2);
StickyIndicator stickyIndicator = new StickyIndicator(tab_layout2, new int[]{Color.parseColor("#2674FF"), Color.parseColor("#26E1FF")}, 80, 8, 300);
stickyIndicator.getUnderlineAnim().setCorner(10);
stickyIndicator.getUnderlineAnim().setMaxStickyLength(200);
tab_layout2.setCustomIndicator(stickyIndicator);
setup(tab_layout2);
}
private void setup(CustomIndicatorTabLayout tab_layout) {
tab_layout.addTab(tab_layout.newTab().setText("测试1"));
tab_layout.addTab(tab_layout.newTab().setText("测--试2"));
tab_layout.addTab(tab_layout.newTab().setText("测试------3"));
tab_layout.addTab(tab_layout.newTab().setText("测试4"));
tab_layout.addTab(tab_layout.newTab().setText("测-----------------试5"));
tab_layout.addTab(tab_layout.newTab().setText("测试6"));
tab_layout.addTab(tab_layout.newTab().setText("测试7"));
tab_layout.addTab(tab_layout.newTab().setText("-----测试8"));
tab_layout.addTab(tab_layout.newTab().setText("测试9"));
tab_layout.addTab(tab_layout.newTab().setText("测--试--10"));
tab_layout.getTabAt(1).select();
}
}
我就不上传动图了（上传动图贼麻烦o(╥﹏╥)o），新建项目拷贝代码运行就能看到效果。可扩展性强，只需要实现CustomIndicator就能实现你自己的自定义效果啦！ヾ(￣▽￣)ByeBye