Android 二次优化个人封装仿网易新闻可滑动标题栏

      小菜前段时间根据超多 star 的 FlycoTabLayout 自己修改封装了仿网易顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标，并整理了两篇小博客：

1. Android 优化个人封装仿网易新闻可滑动标题栏 TabLayout (文字或图标)
2. 仿网易新闻可滑动标题栏TabLayout(文字或图标)

      因小菜自己封装的 TabSlideLayout 在滑动过程中没有回弹的动画效果，而 FlycoTabLayout 默认的滑动过程中也没有动画效果，而小菜技术太渣，所以只能照葫芦画瓢，按照 FlycoTabLayout 中的 CommonTabLayout 样式，二次优化一下自己的 TabSlideLayout。

      小菜修改封装的 TabSlideLayout 是一个不限制栏目个数，超过屏幕范围可滑动切换的顶部 Tab 布局，item 的内容可以是文字也可以是图片，并且支持对文字和图片对绘色。

---

小菜测试步骤如下：

1. 在 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; } 

1. 照葫芦画瓢，继承属性动画的 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(); } 

1. 核心重要的第一步，调整 onDraw() 方法中绘制底部选中状态的判断处理，只需在第一次绘制即可，以后的滑动和选中状态无需绘制，这样可以防止在选择顶部滑动过程中跳动；

private boolean mIsFirstDraw = true; //draw indicator line if (mIndicatorAnimEnable) { if (mIsFirstDraw) { mIsFirstDraw = false; calcIndicatorRect(); } } else { calcIndicatorRect(); } 

1. 核心重要第二步，重写 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(); } } 

1. 核心重要第三步，设置 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 点击时可去掉步骤四方法的调用，否则点击时，会回弹两次，效果不佳。

1. 以上基本可以实现滑动过程和点击过程中的回弹动画效果，但是有个效果不佳的地方是：中间内容滚动过程中，文字切换居中渲染颜色时很生硬，效果不佳。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 地址

---

      下面是小菜的公众号，欢迎闲来吐槽哦~