本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
Tab栏是APP中最常用的组件,如果我们没有太多个性化需求,直接用TabLayout就可以轻松实现。
但是如果我们的产品大大说不想用一条线作指示器了,想用个图片。或者像我们产品一样,想在主页展示4个半Tab(一共5个)时,原生TabLayout就不能满足了。
而前面我发过一篇,自定义三角下标的tablayout,来实现类似于今日头条tab效果,同时还有三角下标。
那时候我是继承HorizontalScrollView,但是滑动过程中有一些bug,因为要自己处理“什么时候该滑动”和“滑动多少”,后来在项目中逻辑太复杂,就想重新推翻重写一个。
当时也想过用TabLayout,但是TabLayout的滑动指示器是矩形,项目中要使用自定义图片,所以最开始就没继续思考,直接用了HorizontalScrollView。
现在回头想想,我真是傻,我直接继承TabLayout,把图片指示器画上去不就OK了,而且绘制图片指示器的逻辑跟自定义三角下标的tablayout一文里的逻辑一样!文末会贴上工程源码。
先看看这次的整体效果:
这里再简单说一下绘制三角下标的原理。
自定义图片指示器
- 初始化指示器坐标:
private void initTranslationParams(LinearLayout llTab, int screenWidth) {
//mSlideIcon 是图片指示器
if (mSlideIcon == null) {
return;
}
tabWidth = (int) (screenWidth / (mTabVisibleCount + mLastTabVisibleRatio));
View firstView = llTab.getChildAt(0);
if (firstView != null) {
//初始位置:第一个tab正下方
this.mInitTranslationX = (firstView.getLeft() + tabWidth / 2 - this.mSlideIcon.getWidth() / 2);
this.mInitTranslationY = (getBottom() - getTop() -