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

阿策小和尚

发布于 2019-08-12 14:35:04

87400

代码可运行

文章被收录于专栏：阿策小和尚阿策小和尚

运行总次数：0

代码可运行

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

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

因和尚自己封装的 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 地址

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除

android

本文分享自阿策小和尚微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

android

登录后参与评论

0 条评论

热度

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐