Android Material Design学习-TabLayout

概要

本篇文章只是简要介绍一下Material Design中TabLayout的简单使用。

Material Design有的翻译成拟物设计,在一个比较正式的非官方文档中被翻译为原脂化设计,它是Google在2014年的I/O大会上推出的全新设计语言,为了兼容低版本的系统,可以下载Android官方的support包,虽然在低版本中没有全部兼容Material Design,像一些比较常见的抽屉式菜单、左右滑动的Tab页在低版本上都得到了很好的兼容,随着Google的官方对于Android系统的优化越来越深入,使得软件开发人员得以将更多的精力越来越多的放在软件的业务逻辑上,这样使得开发App越来越便捷。

components-tabs-01

在Google发布Material Design设计之前,想要设计一个比较高大上的可以滑动的Tab布局,多数开发人员使用第三方的控件,如ViewPagerIndicator或者PagerSlidingTabStrip
如果不支持滑动,当然了也可以借助v4包的FragmentTabHost,但是现在我们可以更简单快捷的设计这种Tab布局了,只需要导入Google官方的兼容包,从官方下载 support_r22.2.1以上的版本,经过测试support_r22.2在TabLayout的使用上是有问题的,所以建议下载较高的版本。

TabLayout使用

页面布局

TabLayout属性介绍

上面是一个最基本的TabLayout布局,先简单看一下TabLayout的相关属性设计吧

这里就是TabLayout的全部属性了,当中包含了对齐方式、背景色、下划线高度和色彩、左右内边距、字体属性、选中后字体的色彩,基本涵盖了我们所需要的所有的属性。

上面的标签使用TabLayout实现,下面的内容使用ViewPager+Fragment实现。

Fragment

Fragment布局很简单只有一个文本标签。

FragmentPagerAdapter

MainActivity代码

TabLayout TabMode介绍

根据平台和使用环境,tab 的内容可以表现为固定的 tabs 或者是滚动(滑动)的 tabs。

固定的 tabs 同时显示所有 tabs,最适合用于快速相互切换的 tabs

视图的宽度限制了 tabs 的最大数量。在固定的 tabs 中每个 tab 宽度相等,都是最宽的 tab 标签的宽度。可以通过点击 tab 或者是在内容区域中左右滑动来在固定的 tabs 间进行导航,tabs的固定与否有TabMode来管理。

TabMode有两种值:MODE_FIXED 和 MODE_SCROLLABLE。默认值是MODE_FIXED,配置文件中app:tabMode=”fixed”

tab01

滚动的 tabs 用于显示 tabs 的子集,可以在任何时候使用,并且可以包含更长的 tab 标签和更多的 tabs 数量,最适合用于触摸操作的浏览环境并且用户不需要直接比较 tab 标签。滚动的 tabs 用于显示 tabs 的子集,可以在任何时候使用,并且可以包含更长的 tab 标签和更多的 tabs 数量,最适合用于触摸操作的浏览环境并且用户不需要直接比较 tab 标签。

滚动时TabMode为MODE_SCROLLABLE,配置文件中app:tabMode=”scrollable”,则会左右滚动

components-tabs02

注:实际开发中TabLayout并不会出现左右箭头,网易新闻的主页布局就是这种可以左右滑动的Tab布局,当栏目较多时可以采用这种布局。

其它

本文主要介绍了TabLayout+ViewPager这这种处理方式,采用Android的Api可以很方面的搭建该种布局,当然了系统仍然提供了另外的处理方式,跟以前的TabHost或者FragmentTabHost相同的处理方式。

在Android中,Tab可以说一直在进化,从最初的TabHost到3.2版本以后的FragmentTabHost,然后到4.0之后ActionBar提供了另外一种简洁的方式ActionBar中的addTab,直到最新的Google官方建议我们使用Toolbar,然后在Material Design为我们提供了更简洁优雅的TabLayout。在Tab的使用过程中,我记得还写过一个用RadioButton+Fragment的实现方式或者说是RadioButton+ViewPager+Fragment。以前没有梳理过这些东西,这次才发现原来Tab的实现方式有如此之多,最后了加上一句我在一篇博文中看到的一句话:I hear and I forget.I see and I remeber.I do and I …

本文地址www.sunnyang.com/309.html

参考资料Material Design 中文版

发表评论