小菜前段时间根据超多 star 的 FlycoTabLayout 自己修改封装了仿网易顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标，并整理了两篇小博客：
因小菜自己封装的 TabSlideLayout 在滑动过程中没有回弹的动画效果，而 FlycoTabLayout 默认的滑动过程中也没有动画效果，而小菜技术太渣，所以只能照葫芦画瓢，按照 FlycoTabLayout 中的 CommonTabLayout 样式，二次优化一下自己的 TabSlideLayout。
小菜修改封装的 TabSlideLayout 是一个不限制栏目个数，超过屏幕范围可滑动切换的顶部 Tab 布局，item 的内容可以是文字也可以是图片，并且支持对文字和图片对绘色。
小菜测试步骤如下：
- 在 attrs 中添加如下属性，分别时是否回弹效果/是否回弹/回弹效果时长；并在 TabSlideLayout 中添加相应的 get/set 方法，从而方便在 Java 代码中动态设置；
<attr name="tl_indicator_anim_enable"/>
<attr name="tl_indicator_anim_duration"/>
<attr name="tl_indicator_bounce_enable"/>
mIndicatorAnimEnable = ta.getBoolean(R.styleable.SlidingTabLayout_tl_indicator_anim_enable, true);
mIndicatorBounceEnable = ta.getBoolean(R.styleable.SlidingTabLayout_tl_indicator_bounce_enable, true);
mIndicatorAnimDuration = ta.getInt(R.styleable.SlidingTabLayout_tl_indicator_anim_duration, -1);
public void setIndicatorAnimDuration(long indicatorAnimDuration) {
this.mIndicatorAnimDuration = indicatorAnimDuration;
}
public void setIndicatorAnimEnable(boolean indicatorAnimEnable) {
this.mIndicatorAnimEnable = indicatorAnimEnable;
}
public void setIndicatorBounceEnable(boolean indicatorBounceEnable) {
this.mIndicatorBounceEnable = indicatorBounceEnable;
}
public long getIndicatorAnimDuration() {
return mIndicatorAnimDuration;
}
public boolean isIndicatorAnimEnable() {
return mIndicatorAnimEnable;
}
public boolean isIndicatorBounceEnable() {
return mIndicatorBounceEnable;
}
- 照葫芦画瓢，继承属性动画的 ValueAnimator，并实现基本动画效果；
@Override
public void onAnimationUpdate(ValueAnimator animation) {
View currentTabView = mTabsContainer.getChildAt(this.mCurrentTab);
IndicatorPoint p = (IndicatorPoint) animation.getAnimatedValue();
mIndicatorRect.left = (int) p.left;
mIndicatorRect.right = (int) p.right;
if (mIndicatorWidth < 0) { //indicatorWidth小于0时,原jpardogo's PagerSlidingTabStrip
} else {//indicatorWidth大于0时,圆角矩形以及三角形
float indicatorLeft = p.left + (currentTabView.getWidth() - mIndicatorWidth) / 2;
mIndicatorRect.left = (int) indicatorLeft;
mIndicatorRect.right = (int) (mIndicatorRect.left + mIndicatorWidth);
}
invalidate();
}
- 核心重要的第一步，调整 onDraw() 方法中绘制底部选中状态的判断处理，只需在第一次绘制即可，以后的滑动和选中状态无需绘制，这样可以防止在选择顶部滑动过程中跳动；
private boolean mIsFirstDraw = true;
//draw indicator line
if (mIndicatorAnimEnable) {
if (mIsFirstDraw) {
mIsFirstDraw = false;
calcIndicatorRect();
}
} else {
calcIndicatorRect();
}
- 核心重要第二步，重写 setCurrentTab 方法，分别获取当前选中位置的坐标和 item 数组位置以及下一次选中位置的坐标和 item 数组位置；
public void setCurrentTab(int currentTab, boolean smoothScroll) {
mLastTab = this.mCurrentTab;
this.mCurrentTab = currentTab;
updateTabSelection(currentTab);
if (mFragmentChangeManager != null) {
mFragmentChangeManager.setFragments(currentTab);
}
if (mIndicatorAnimEnable) {
calcOffset();
} else {
invalidate();
}
}
- 核心重要第三步，设置 TabSlideLayout item 的点击事件或 ViewPager 滑动时的效果，若只需要 item 点击时回弹效果，则直接设置 item 布局的点击事件既可以，调用步骤四的方法；若设置 ViewPager 滑动时回弹效果，在 onPageSelected 方法中调用步骤四方法，并重写 onPageScrolled 方法；
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
/**
* position:当前View的位置
* mCurrentPositionOffset:当前View的偏移量比例.[0,1)
*/
scrollToCurrentTab();
invalidate();
}
Tips: 若 ViewPager 的 onPageSelected 调用步骤四方法后，在 item 点击时可去掉步骤四方法的调用，否则点击时，会回弹两次，效果不佳。
- 以上基本可以实现滑动过程和点击过程中的回弹动画效果，但是有个效果不佳的地方是：中间内容滚动过程中，文字切换居中渲染颜色时很生硬，效果不佳。TabSlideLayout 方式 item 个数没有限制，整个内容超过屏幕宽度，滑动过程中内容位置会变化，这可能也是 FlycoTabLayout 中没有添加动画效果的原因之一。小菜尝试的解决办法有两个，第一个是在调用 scrollTo 方法时添加延迟；第二个是在渲染文字颜色过程中添加延迟；小菜个人更倾向于后者，给人感觉会顺畅一些，但依旧并非是最佳的解决方法，仍有待研究。默认不支持回弹效果
// 方案一：
new Handler().postDelayed(new Runnable(){
public void run() {
scrollTo(tempX, 0);
}
}, mIndicatorBounceEnable ? 600 : 250);
// 方案二：
if (tab_title != null) {
new Handler().postDelayed(new Runnable(){
public void run() {
tab_title.setTextColor(isSelect ? mTextSelectColor : mTextUnselectColor);
if (mTextBold == TEXT_BOLD_WHEN_SELECT) {
tab_title.getPaint().setFakeBoldText(isSelect);
}
}
}, mIndicatorBounceEnable ? 400 : 250);
}
小菜再一次体会到，优化与封装是一个耗时、用心的漫长过程，需要不断的测试和尝试。小菜现在的解决方案也并非最佳效果，不合理的地方还请各位多多指教。
GitHub 地址
ACE01_4.jpg
下面是小菜的公众号，欢迎闲来吐槽哦~
公众号