前言
TabLayout 我相信大家都有使用過，但是官方并沒有對Indicator可以設(shè)置為圖片的支持，只能是簡單的水平線，也就是滑動桿那個玩意，那么如何做到可以用圖片來做指示器呢？作為一個喜歡探索新穎解決方案的我,現(xiàn)在給大家?guī)砹舜蠹叶己芷诖膯栴}的解決方案，下面我來講講我的思路和解決方案
先上效果
這是我將要做到的事情，實(shí)現(xiàn)TabLayout的Indicator可自定義image
效果圖
分析源碼
既然TabLayout 能夠和ViewPager手勢聯(lián)動那就說明Tablayout和ViewPager有關(guān)聯(lián),先來看一下他們是如何關(guān)聯(lián)的
tab_layout.setupWithViewPager(viewpager)
通過這個方法Tablayout和ViewPager相遇了，繼續(xù)跟進(jìn)這個方法執(zhí)行最終會執(zhí)行到這里
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();
//關(guān)注點(diǎn)1
viewPager.addOnPageChangeListener(mPageChangeListener);
//關(guān)注點(diǎn)2
// Now we'll add a tab selected listener to set ViewPager's current item
//注釋很明顯翻譯過來就是添加一個選項(xiàng)選擇監(jiān)聽器來設(shè)置ViewPager的當(dāng)前項(xiàng)
mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
addOnTabSelectedListener(mCurrentVpSelectedListener);
}
...
}
關(guān)注點(diǎn)1添加監(jiān)聽ViewPager的滑動事件，關(guān)注點(diǎn)2添加Tablayout選擇事件來設(shè)置ViewPager的當(dāng)前項(xiàng)，關(guān)注點(diǎn)2注釋已經(jīng)解釋得很清楚，重點(diǎn)分析關(guān)注點(diǎn)1ViewPager滑動事件，我們lou一眼
public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
//Viewpager滑動偏移量回調(diào)
@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的滑動信息設(shè)置給tablayout，這是一個關(guān)鍵的信息！!!
tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
}
}
}
...
//在這個方法里面調(diào)用了SlidingTabStrip的setIndicatorPositionFromTabPosition方法獲取滑動數(shù)據(jù)
void setScrollPosition(int position, float positionOffset, boolean updateSelectedText,
boolean updateIndicatorPosition) {
···
// Set the indicator position, if enabled
if (updateIndicatorPosition) {
//設(shè)置Indicator的位置
mTabStrip.setIndicatorPositionFromTabPosition(position, positionOffset);
}
···
}
//用變量保存參數(shù)并執(zhí)行 updateIndicatorPosition方法
void setIndicatorPositionFromTabPosition(int position, float positionOffset) {
if (mIndicatorAnimator != null && mIndicatorAnimator.isRunning()) {
mIndicatorAnimator.cancel();
}
mSelectedPosition = position;
mSelectionOffset = positionOffset;
//更新Indicator位置
updateIndicatorPosition();
}
//通過viewpager的滑動偏移量計(jì)算選項(xiàng)卡左邊和右邊的位置
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;
//執(zhí)行這個方法最終會執(zhí)行view.postInvalidate()觸發(fā)view的重繪
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
// 根據(jù)前面計(jì)算過后的位置信息繪制indicator滑動桿
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}
看到這里那么恭喜你Tablayout的Indicator和ViewPager聯(lián)動的流程你已經(jīng)掌握了。我來總結(jié)一下流程
1.通過調(diào)用setupWithViewPager為ViewPager添加滑動監(jiān)聽
2.并在監(jiān)聽回調(diào)里面把數(shù)據(jù)傳遞給Tablayout的內(nèi)部類SlidingTabStrip就是指示器
3.SlidingTabStrip接收到數(shù)據(jù)之后調(diào)用 ViewCompat.postInvalidateOnAnimation(this);這個方法將會執(zhí)行view.postInvalidate()觸發(fā)view的重繪
實(shí)現(xiàn)想法
自己造個輪子實(shí)現(xiàn)將Tablayout的Indecator換成圖片，說干就干
遇到問題
問題來了，Tablayout的的滑動桿是在SlidingTabStrip這個類中的draw方法里面進(jìn)行的繪制的，在外部不能對其進(jìn)行修改，于是我就想既然不能動你，那我就干掉你，另辟蹊徑找其他方法代替你，所以我決定自己寫個Indecator類去監(jiān)聽viewpager的滑動事件，并更新顯示位置
解決思路
從源碼分析中我們已經(jīng)知道要更新Indecator的位置就是要拿到viewPager的滑動偏移量，計(jì)算出他的左右位置然后通知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();
}
}
//計(jì)算滑動桿位置
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這個內(nèi)部類
*/
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，想要改變他屬性或者他的內(nèi)部類屬性，請?jiān)陧?xiàng)目發(fā)布時(shí)加上混淆，避免出現(xiàn)反射無效！
-keep public class android.support.design.widget.TabLayout{
*;
}
-keep class android.support.design.widget.TabLayout$* {
*;
}
總結(jié)
借鑒老羅的一句話我們在項(xiàng)目中碰到問題的時(shí)候，通常第一反應(yīng)都是到網(wǎng)上去搜索答案。但是有時(shí)候有些問題，網(wǎng)絡(luò)并不能給出滿意的答案。這時(shí)候就千萬不要忘了你所擁有的一個大招——從代碼中找答案！以上就是我的解決方案，查看源碼從中獲得靈感，解決實(shí)際問題！堅(jiān)決不做碼農(nóng)，我是工程師
具體使用請查看 Demo
歡迎評論點(diǎn)贊交流
