我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,应该知道,这里面代码可用作 app 通用的底部栏导航,通过它能快速的实现类似微信6.0版本以底部导航的 app 整体架构,并且在 MainActivity 中需要编写的代码非常简洁。如果有兴趣的朋友可以去看看。
效果:
今天这篇 blog的内容同样可以拿来做 app 的整体架构,但与前面那篇 blog 不同,不同之处是前面那篇文章所讲的内容可用作底部导航,而这篇 blog 的内容,是用作顶部导航,老版本的微信就是此效果,ok,来看看效果图
实现原理
根据效果图,不难分析,可以通过自定义 ViewGroup 来实现,但这样代码量偏多,看了我的前面 blog 的朋友应该清楚,这里最好的实现方式是通过重写 LinearLayout,相比通过 ViewGroup 来实现,省略了测量onMeasure()和布局onLayout()方法的实现,因为这些LinearLayout已经帮我们实现好了,而我们真正要做的就是为 LinearLayout 填充内容,填充内容可大致可分为以下四个步骤:
1、填充每个 item 的内容
2、绘制每个 item 之间的分割线
3、绘制底部线条
4、绘制指示器的内容
代码实现
1、先把需要用的属性定义出来
需要的属性
1、页卡指示器的颜色
2、分割线的颜色
3、底部线条的颜色
4、页卡指示器的高度
5、分割线距离上下边距的距离
6、分割线的宽度
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="indicatorColor" format="color"/>
<attr name="dividerColor" format="color"/>
<attr name="bottomLineColor" format="color"/>
<attr name="dividerMargin" format="dimension"/>
<attr name="indicatorHeight" format="dimension"/>
<attr name="bottomLineHeight" format="dimension"/>
<attr name="dividerWidth" format="dimension"/>
<declare-styleable name="SlidingTabLayout">
<attr name="indicatorColor"/>
<attr name="dividerColor"/>
<attr name="bottomLineColor"/>
<attr name="dividerMargin"/>
<attr name="indicatorHeight"/>
<attr name="bottomLineHeight"/>
<attr