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 地址

ACE01_4.jpg


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


公众号
上一篇:【如何有效做Code Review】8行代码提出的21个问题


下一篇:关于快速排序的二三事