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

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

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

小菜测试步骤如下：

1. 在 attrs 中添加如下属性，分别时是否回弹效果/是否回弹/回弹效果时长；并在 TabSlideLayout 中添加相应的 get/set 方法，从而方便在 Java 代码中动态设置；

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，并实现基本动画效果；

@Overridepublic 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 lineif (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 个数没有限制，整个内容超过屏幕宽度，滑动过程中内容位置会变化，这可能也是 中没有添加动画效果的原因之一。小菜尝试的解决办法有两个，第一个是在调用 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);}

      小菜再一次体会到，优化与封装是一个耗时、用心的漫长过程，需要不断的测试和尝试。小菜现在的解决方案也并非最佳效果，不合理的地方还请各位多多指教。

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