Android 自定义 TabLayout

TabLayout 的两种交互方式

TabLayout 有两种交互方式,第一种是经过滑动来选择 Tab,第二种是经过点击来选择 Tab。所以,当你在实现自定义 TabLayout 时,首先要保证本身对原组件的扩展可以同时支持这两种交互方式,其次要注意本身的扩展可以复合这两种交互方式的特色。继承

需求

  1. 全部的 Tab 都由标题和色块组成;不管 Tab 是否被选中,标题的位置都位于整个 Tab 的正中;当 Tab 未被选中时,色块的高度较低,在视觉上位于标题的下面;当 Tab 被选中的时候,色块的高度较高,在视觉上包裹了标题;当 Tab 在未选中状态和选中状态之间切换时,色块的高度逐渐变高或逐渐变低,文字的颜色组件变白或变黑。接口

  2. 滑动时,Tab 的渐变过程应该是由用户控制的,用户滑动的快慢对应渐变的快慢。扩展

  3. 点击时,Tab 的渐变过程应该是不受用户控制的,当用户执行完点击操做后,原来的 Tab 进入反向渐变过程,被点击的 Tab 进入正向渐变过程。方法

  4. 须要提供的接口包括:设置 ViewPager 的接口;设置选中 Tab 的接口;增删 Tab 后更新自定义 TabLayout 视图的接口。移动

分析

  1. TabLayout 和 ViewPager 的配合 —— 当滑动时,经过 ViewPager 的原有 API 去更新 TabLayout 的视图:经过重写 onPageScrolled 方法实现 Tab 上的渐变效果;经过重写 onPageSelected 方法实现 Tab 的移动居中。交互

  2. TabLayout 和 ViewPager 的配合 —— 当点击时,经过 TabLayout 的自定义 API 去更新 ViewPager 的视图:经过获取点击的 Tab 的下标来选中 ViewPager 的指定 Page。居中

  3. 色块应该是一个继承自 View 的类,能够设置高度和背景颜色,并提供让高度渐变的接口(原始高度、最终高度、渐变类型);重写 onDraw 方法,根据不断改变的高度绘制不一样高度的色块。
    (待续)颜色

相关文章
相关标签/搜索