前言
TabLayout 我相信大家都有使用过，但是官方并没有对Indicator可以设置为图片的支持，只能是简单的水平线，也就是滑动杆那个玩意，那么如何做到可以用图片来做指示器呢？作为一个喜欢探索新颖解决方案的我,现在给大家带来了大家都很期待的问题的解决方案，下面我来讲讲我的思路和解决方案
先上效果
这是我将要做到的事情，实现TabLayout的Indicator可自定义image
效果图
分析源码
既然TabLayout 能够和ViewPager手势联动那就说明Tablayout和ViewPager有关联,先来看一下他们是如何关联的
tab_layout.setupWithViewPager(viewpager)
通过这个方法Tablayout和ViewPager相遇了，继续跟进这个方法执行最终会执行到这里
private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
boolean implicitSetup) {
...
if (viewPager != null) {
//保存一个成员变量引用
mViewPager = viewPager;
// Add our custom OnPageChangeListener to the ViewPager
if (mPageChangeListener == null) {
mPageChangeListener = new TabLayoutOnPageChangeListener(this);
}
mPageChangeListener.reset();
//关注点1
viewPager.addOnPageChangeListener(mPageChangeListener);
//关注点2
// Now we'll add a tab selected listener to set ViewPager's current item
//注释很明显翻译过来就是添加一个选项选择监听器来设置ViewPager的当前项
mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
addOnTabSelectedListener(mCurrentVpSelectedListener);
}
...
}
关注点1添加监听ViewPager的滑动事件，关注点2添加Tablayout选择事件来设置ViewPager的当前项，关注点2注释已经解释得很清楚，重点分析关注点1ViewPager滑动事件，我们lou一眼
public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
//Viewpager滑动偏移量回调
@Override
public void onPageScrolled(final int position, final float positionOffset,
final int positionOffsetPixels) {
final TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null) {
// Only update the text selection if we're not settling, or we are settling after
// being dragged
final boolean updateText = mScrollState != SCROLL_STATE_SETTLING ||
mPreviousScrollState == SCROLL_STATE_DRAGGING;
// Update the indicator if we're not settling after being idle. This is caused
// from a setCurrentItem() call and will be handled by an animation from
// onPageSelected() instead.
final boolean updateIndicator = !(mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
//将ViewPager的滑动信息设置给tablayout，这是一个关键的信息！!!
tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
}
}
}
...
//在这个方法里面调用了SlidingTabStrip的setIndicatorPositionFromTabPosition方法获取滑动数据
void setScrollPosition(int position, float positionOffset, boolean updateSelectedText,
boolean updateIndicatorPosition) {
···
// Set the indicator position, if enabled
if (updateIndicatorPosition) {
//设置Indicator的位置
mTabStrip.setIndicatorPositionFromTabPosition(position, positionOffset);
}
···
}
//用变量保存参数并执行 updateIndicatorPosition方法
void setIndicatorPositionFromTabPosition(int position, float positionOffset) {
if (mIndicatorAnimator != null && mIndicatorAnimator.isRunning()) {
mIndicatorAnimator.cancel();
}
mSelectedPosition = position;
mSelectionOffset = positionOffset;
//更新Indicator位置
updateIndicatorPosition();
}
//通过viewpager的滑动偏移量计算选项卡左边和右边的位置
private void updateIndicatorPosition() {
final View selectedTitle = getChildAt(mSelectedPosition);
int left, right;
if (selectedTitle != null && selectedTitle.getWidth() > 0) {
left = selectedTitle.getLeft();
right = selectedTitle.getRight();
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;
//执行这个方法最终会执行view.postInvalidate()触发view的重绘
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
// 根据前面计算过后的位置信息绘制indicator滑动杆
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}
看到这里那么恭喜你Tablayout的Indicator和ViewPager联动的流程你已经掌握了。我来总结一下流程
1.通过调用setupWithViewPager为ViewPager添加滑动监听
2.并在监听回调里面把数据传递给Tablayout的内部类SlidingTabStrip就是指示器
3.SlidingTabStrip接收到数据之后调用 ViewCompat.postInvalidateOnAnimation(this);这个方法将会执行view.postInvalidate()触发view的重绘
实现想法
自己造个轮子实现将Tablayout的Indecator换成图片，说干就干
遇到问题
问题来了，Tablayout的的滑动杆是在SlidingTabStrip这个类中的draw方法里面进行的绘制的，在外部不能对其进行修改，于是我就想既然不能动你，那我就干掉你，另辟蹊径找其他方法代替你，所以我决定自己写个Indecator类去监听viewpager的滑动事件，并更新显示位置
解决思路
从源码分析中我们已经知道要更新Indecator的位置就是要拿到viewPager的滑动偏移量，计算出他的左右位置然后通知view重绘，那我也自己写个Indecator来做同样的事代码如下
/**
* Created by xwc on 2018/6/6
*
*/
public class ImageIndicator extends View {
public ImageIndicator(Context context) {
super(context);
}
public ImageIndicator(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public ImageIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private float mIndicatorLeft = -1;
private int mIndicatorRight = -1;
//滑动的图片
private Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.progressbar);
private Paint mSelectedIndicatorPaint = new Paint();
int mSelectedPosition = -1;
float mSelectionOffset;
LinearLayout tab;
TabLayout tabs;
public void setIndicatorPositionFromTabPosition(int position, float positionOffset) {
mSelectedPosition = position;
mSelectionOffset = positionOffset;
updateIndicatorPosition();
}
public void setupWithTabLayout(TabLayout tabs) {
this.tabs = tabs;
if (tab == null) {
tab = getTabStrip();
}
}
//计算滑动杆位置
private void updateIndicatorPosition() {
if (tab == null) {
return;
}
final View selectedTitle = tab.getChildAt(mSelectedPosition);
int left, right;
if (selectedTitle != null && selectedTitle.getWidth() > 0) {
left = selectedTitle.getLeft();
right = selectedTitle.getRight();
if (mSelectionOffset > 0f && mSelectedPosition < tab.getChildCount() - 1) {
View nextTitle = tab.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) {
mIndicatorLeft = left;
mIndicatorRight = right;
//通知view重绘
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制图片
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawBitmap(mBitmap, mIndicatorLeft, getHeight() - mBitmap.getHeight(), mSelectedIndicatorPaint);
}
}
/**
* tabs : TabLayout
* 通过反射TabLayout拿到SlidingTabStrip这个内部类
*/
public LinearLayout getTabStrip() {
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
try {
tab = (LinearLayout) tabStrip.get(tabs);
return tab;
} catch (Exception e) {
e.printStackTrace();
}
return tab;
}
}
使用：
viewPager.setAdapter(new MyViewPagerAdapter());
tabLayout.setupWithViewPager(viewPager);
imageIndicator.setupWithTabLayout(tabLayout);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 将滑动偏移量传给Indicator
imageIndicator.setIndicatorPositionFromTabPosition(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
番外
如果你反射了Tablayout，想要改变他属性或者他的内部类属性，请在项目发布时加上混淆，避免出现反射无效！
-keep public class android.support.design.widget.TabLayout{
*;
}
-keep class android.support.design.widget.TabLayout$* {
*;
}
总结
借鉴老罗的一句话我们在项目中碰到问题的时候，通常第一反应都是到网上去搜索答案。但是有时候有些问题，网络并不能给出满意的答案。这时候就千万不要忘了你所拥有的一个大招——从代码中找答案！以上就是我的解决方案，查看源码从中获得灵感，解决实际问题！坚决不做码农，我是工程师
具体使用请查看 Demo
欢迎评论点赞交流
