资讯专栏INFORMATION COLUMN

Android 自定义 TabLayout

iKcamp / 2878人阅读

摘要:滑动时,的渐变过程应该是由用户控制的,用户滑动的快慢对应渐变的快慢。需要提供的接口包括设置的接口设置选中的接口增删后更新自定义视图的接口。

TabLayout 的两种交互方式

TabLayout 有两种交互方式,第一种是通过滑动来选择 Tab,第二种是通过点击来选择 Tab。因此,当你在实现自定义 TabLayout 时,首先要保证自己对原组件的扩展能够同时支持这两种交互方式,其次要注意自己的扩展能够复合这两种交互方式的特点。

需求

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

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

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

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

分析

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/13185.html

相关文章

  • Android 实现锚点定位

    摘要:相信做前端的都做过页面锚点定位的功能,通过去设置页面内锚点定位跳转。本篇文章就使用来实现锚点定位的功能。写到这里,的锚点定位成型了,在实际项目中,我们还可以使用来完成同样的效果,后续的话会带来这样的文章。相信做前端的都做过页面锚点定位的功能,通过 去设置页面内锚点定位跳转。 本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。 效果图: 实现思路 1、...

    xuweijian 评论0 收藏0
  • Android 实现锚点定位

    摘要:原文链接相信做前端的都做过页面锚点定位的功能,通过去设置页面内锚点定位跳转。本篇文章就使用来实现锚点定位的功能。写到这里,的锚点定位成型了,在实际项目中,我们还可以使用来完成同样的效果,后续的话会带来这样的文章。 原文链接:https://mp.weixin.qq.com/s/EYyTBtM9qCdmB9nlDEF-3w 相信做前端的都做过页面锚点定位的功能,通过 去设置页面内锚点定...

    Wuv1Up 评论0 收藏0
  • Android 实现锚点定位

    摘要:原文链接相信做前端的都做过页面锚点定位的功能,通过去设置页面内锚点定位跳转。本篇文章就使用来实现锚点定位的功能。写到这里,的锚点定位成型了,在实际项目中,我们还可以使用来完成同样的效果,后续的话会带来这样的文章。 原文链接:https://mp.weixin.qq.com/s/EYyTBtM9qCdmB9nlDEF-3w 相信做前端的都做过页面锚点定位的功能,通过 去设置页面内锚点定...

    dendoink 评论0 收藏0
  • TabLayout的简单运用和若干问题的解决

    摘要:初步实现之前在知乎上看到有人对微信的设计改动将使用频率高的朋友圈消息提醒和公众号这三个功能独立出来放在首页。 1、介绍和准备 我们在使用手机App时不难会看到这样的页面上面是一组起导航作用的标签,点击标签就会切换到相应的页面;在不同的页面中滑动时,标签的样式(文字大小或者颜色)也会发生变化。这样你任何时候都能一眼看出自己停留在哪个页面。这个布局出镜率实在太高了,我甚至敢说每个学Andr...

    PiscesYE 评论0 收藏0
  • TabLayout的简单运用和若干问题的解决

    摘要:初步实现之前在知乎上看到有人对微信的设计改动将使用频率高的朋友圈消息提醒和公众号这三个功能独立出来放在首页。 1、介绍和准备 我们在使用手机App时不难会看到这样的页面上面是一组起导航作用的标签,点击标签就会切换到相应的页面;在不同的页面中滑动时,标签的样式(文字大小或者颜色)也会发生变化。这样你任何时候都能一眼看出自己停留在哪个页面。这个布局出镜率实在太高了,我甚至敢说每个学Andr...

    Raaabbit 评论0 收藏0

发表评论

0条评论

iKcamp

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<