android组合控件（九）
App开发常用的一些组合控件，主要包括底部标签栏的实现和用法、顶部导航栏的用法、横幅轮播条的实现和用法、循环视图 3种布局的用法、材质设计库3种布局的用法等。
一、 标 签 栏
1. 标签按钮
Android自带的按钮控件允许下列3种展现形式：文本、图像、文本+图标。
标签按钮拥有特殊的展现样式，比如微信底部标签栏，一排有4个标签按钮，每个按钮的图标和文字都会随着选中操作而高 亮显示。
利用TextView和状态图形实现标签按钮
通过styles文件定义标签按钮风格
2. 实现底部标签栏
需要一个底部标签栏存放各频道的标签按钮，点击某个标签按钮时，就切换到对应的频道页面。
标签栏的页面切换主要有3种方式：
（1）基于TabActivity的标签栏
（2）基于ActivityGroup的标签栏
（3）基于FragmentActivity的标签栏
基于TabActivity的标签栏
利用TabHost和TabWidget两个控件
下面是TabActivity方式的底部标签栏效果。
基于ActivityGroup的标签栏
ActivityGroup就是Activity的组合，允许在内部开启活动页面。
ActivityGroup与Activity的关系相当于Activity与Fragment的关系。
下面是ActivityGroup方式的底部标签栏效果。
基于FragmentActivity的标签栏
也可以采取一个Activity对应多个Fragment的做法，此时用到了控件FragmentTabHost。
下面是FragmentActivity方式的底部标签栏效果。
二、 导 航 栏
导航栏的组成控件，包括工具栏Toolbar、溢出菜单OverflowMenu、搜索框SearchView、标签布局TabLayout的相关用 法，以及如何定制Toolbar的视图与TabLayout的标签页。
1. 工具栏Toolbar
Toolbar是ActionBar的升级版，要想引入Toolbar就得先关闭ActionBar。二者之间的区别如下：
（1）使用Toolbar需要引入appcompat-v7支持库。
（2）使用Toolbar需要采取NoActionBar之类的风格。
（3）布局文件需要声明Toolbar节点，而ActionBar不需要。
（4） Toolbar允许设置更详细的导航栏信息。
（5） Toolbar允许自定义导航栏的布局内容。
Toolbar的常用属性及设置方法
工具栏的展示效果
2. 溢出菜单OverflowMenu
点击导航栏右边的三点图标，会弹出溢出菜单OverflowMenu，意指导航栏不够放了、溢出来了。
溢出菜单就是把选项菜单OptionsMenu搬到了页面右上方，用法基本同选项菜单，不同之处是多了个showAsAction 属性。该属性用来控制菜单项在导航栏上的展示位置，具体的取值说明见下表。
溢出菜单的展示效果
下面的效果图中，刷新图标的showAsAction属性设置为ifRoom，其余图标的showAsAction属性设置为never。
3. 搜索框SearchView
电商App的导航栏中间都有个搜索框，使用搜索框的步骤如下：
（1）在菜单布局文件中定义搜索项。
（2）在res\xml目录新建searchable.xml，设置搜索框的样式代码。
（3）在AndroidManifest.xml中加入一个搜索结果页面的activity节点定义，需要指定action和meta-data。
（4）在Activity代码中初始化搜索框，并关联搜索动作对应的结果Activity。
（5）编写搜索结果页面的Activity代码。
搜索框的展示效果
4. 标签布局TabLayout
下面是京东App的页面截图，可以通过左右滑动切换商品页面和详情页面。也可点击导航栏上的文字标签切换页面。
如何使用标签布局
TabLayout用于将ViewPager关联到Toolbar，它的展现形式类似于PagerTabStrip。
标签布局TabLayout通过以下4种方法操作标签。
newTab：创建新标签。
addTab：添加一个标签。
getTabAt：获取指定位置的标签。
setOnTabSelectedListener：设置标签的选中监听器。该监听器需实现OnTabSelectedListener接口的3个方法。
onTabSelected：标签被选中时触发。
onTabUnselected：标签被取消选中时触发。
onTabReselected：标签被重新选中时触发。
如何将TabLayout绑定ViewPager
ViewPager关联TabLayout的办法：
在监听器的onPageSelected函数中，调用TabLayout对象的getTabAt方法并选中Tab页。
TabLayout关联ViewPager的办法：
（1）在监听器OnTabSelectedListener的onTabSelected函数中，调用ViewPager对象的setCurrentItem方法选 中某页面。
（2）利用封装好的监听器ViewPagerOnTabSelectedListener，直接绑定ViewPager对象。
标签布局的展示效果
自定义标签的展示效果
三、 横 幅 条
介绍横幅条Banner的两种展现形式与具体实现，包括如何在Banner底部自定义可以滚动的指示器、如何实现会自动轮播的横幅条、如何让Banner顶到上面的状态栏。同时还会复习自定义视图和自定义动画的知识。
1. 自定义指示器
指示器就是引导页下方的一排圆点，通过高亮圆点指示当前的页面位置。
指示器有两种展现形式：
（1）附着在每个Fragment页面下方，而不是固定在手机屏幕下方。
（2）整体固定在手机屏幕下方，不随着Fragment滚动。只有高亮圆点才会随着页面滑动而缓慢挪动，页面滑到下一 页，高亮圆点刚好挪到下一个圆点处。
其中第二种展现形式用到了ViewPager的页面变化监听器OnPageChangeListener的onPageScrollStateChanged方法。
第二种指示器的展示效果
2. 实现横幅轮播Banner
Banner指的是网站页面和App首屏的横幅广告条。不但可以由用户控制左右滑动，还能自动轮流播放。
这种自动轮播的功能，用到了自定义动画的技术，即通过Handler与Runnable的组合来实现间隔一段时间就自动翻 页的效果。
下面是一个滚动任务的定义代码例子：
private Runnable mScroll = new Runnable() {
public void run() { scrollToNext(); // 滚动广告图片
// 延迟若干秒后继续启动滚动任务
mHandler.postDelayed(this, mInterval); } };
Banner轮播的展示效果
3. 仿京东顶到状态栏的Banner
手机的状态栏指的是屏幕顶部的黑底白字长条。状态栏左边是信号强度、网络类型等图标，右边是当前时间、剩余电 量等数值。 下面是京东的首页截图，可见它的Banner占据了状态栏的背景。
悬浮状态栏的实现
App页面顶到状态栏的情况，叫做悬浮状态栏，也叫沉浸式状态栏。
状态栏以何种方式呈现，取决于setSystemUiVisibility方法设置的标志位，标志位的取值说明见下表。
悬浮状态栏的效果
四、 增强型列表
介绍通过循环视图RecyclerView实现各种增强型列表，包括线性列表布局、普通网格布局、瀑布流网格布局等，并对循环视图进行动态更新操作。
1. 循环视图RecyclerView
循环视图实现了一组视图的3种排列形式：
（1）在垂直或水平方向上的列表视图。展现形式类似ListView。
（2）多行多列均匀分布的网格视图。展现形式类似GridView。
（3）列数固定，但每个单元格的高度不尽相同，犹如瀑布那样倾泻而下的垂直布局。也可以是行数固定，但每个单 元格的宽度不尽相同，此时布局在水平方向排列。
如何使用循环视图
循环视图提供的常用方法
注：RecyclerView有专门的适配器类——RecyclerView.Adapter。
如何使用循环视图的适配器
下面是与RecyclerView.Adapter相关的常用方法。
1. 自定义适配器必须要重写的方法。
getItemCount：获得列表项的数目。
onCreateViewHolder：创建整个布局的视图持有者。
onBindViewHolder：绑定每项的视图持有者。
2. 可以重写也可以不重写的方法。
getItemViewType：返回每项的视图类型。
getItemId：获得每项的编号。
3. 可以直接调用的方法。主要是通知发生数据改变的notify**方法。
循环视图的展示效果
下面是利用循环视图仿照微信公众号的消息列表，看起来像是用ListView实现的
2. 布局管理器LayoutManager
RecyclerView的布局样式依赖于布局管理器LayoutManager，布局管理器LayoutManager提供了下面3类布局管理 器。
1. 线性布局管理器LinearLayoutManager
该管理器类似于线性布局LinearLayout，在垂直方向布局时，展示效果类似于垂直的列表视图ListView；在水平方向布 局时，展示效果类似于水平的列表视图。
下面是LinearLayoutManager的常用方法。
构造函数：可指定列表的方向和是否为相反方向开始布局。
setOrientation :设置列表的方向，可取值LinearLayout.HORIZONTAL或LinearLayout. VERTICAL。 setReverseLayout :设置是否为相反方向开始布局，默认false。
网格布局管理器
2. 网格布局管理器GridLayoutManager
该管理器类似于网格布局GridLayout，其展示效果类似于网格视图GridView。
下面是GridLayoutManager的常用方法。
构造函数：可指定网格的列数。
setSpanCount：设置网格的列数。
setSpanSizeLookup：设置列表项的占位规则。该方法允许一个网格占据多列空间，更加灵活易用。
网格布局管理器的展示效果
瀑布流网格布局管理器
3. 瀑布流网格布局管理器StaggeredGridLayoutManager
该管理器允许使用灵活高度的格子展示每个视图，例如根据不同的商品形状展示不同高度的图片。
下面是StaggeredGridLayoutManager的常用方法。
构造函数：可指定网格的列数和方向。
setSpanCount：设置网格的列数。
setOrientation :设置列表的方向，可取值LinearLayout.HORIZONTAL或LinearLayout. VERTICAL。 setReverseLayout :设置是否为相反方向开始布局，默认false。
瀑布流网格布局管理器的展示效果
3. 动态更新循环视图
循环视图不但具备列表视图、网格视图、瀑布流网格三种布局，还允许动态更新内部数据，并且支持显示数据增删动画。
更新列表项数据的适配器方法
循环视图动态更新的效果（上）
循环视图动态更新的效果（下）
五、 材质设计库
MaterialDesign材质设计库是Android在界面设计方面做出重大提升的增强库，该库提供了协调布局CoordinatorLayout、应用栏布局AppBarLayout、可折叠工具栏布局CollapsingToolbarLayout等等新颖控件。
1. 协调布局CoordinatorLayout
MaterialDesign库的基础是协调布局CoordinatorLayout，几乎所有的design控件都依赖于该布局。
所谓协调布局，指的是内部控件之间存在着动作关联，比如在A视图的位置发生变化之时，B视图的位置也按照某 种规则来变化。
以悬浮按钮为例，它提供了以下的额外功能：
（1）悬浮按钮会悬浮在其它视图之上，即使布局文件中别的视图在它后面，悬浮按钮也仍然显示在最前面；
（2）在隐藏和显示悬浮按钮之时会播放切换动画，其中隐藏按钮操作调用了hide方法，显示按钮操作调用了show方法； （3）悬浮按钮默认会随着便签条Snackbar的出现或消失而动态调整位置；
悬浮按钮自动调整位置的效果
2. 应用栏布局AppBarLayout
通过AppBarLayout对工具栏Toolbar做进一步的包装，从而实现顶部导航栏的动态变化效果。
AppBarLayout继承自线性布局LinearLayout，增加的额外功能主要有以下两点：
（1）支持响应页面主体的滑动行为，即在页面主体进行上移或者下拉时，AppBarLayout能够捕捉到页面主体 的滚动操作。
（2）捕捉到滚动操作之后，还要通知Toolbar，告诉它要怎么滚动。
如何使用AppBarLayout
（1）在build.gradle中添加几个库的编译支持，包括appcompat-v7库、design库、recyclerview库等。
（2）布局文件的根布局采用CoordinatorLayout。
（3）使用AppBarLayout节点包裹Toobar节点。
（4）给Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways"。
（5）页面主体使用RecyclerView控件，并给该节点添加行为属性即 app:layout_behavior="@string/appbar_scrolling_view_behavior"，表示通知AppBarLayout捕捉 RecyclerView的滚动操作。
AppBarLayout的展示效果
3. 可折叠工具栏布局CollapsingToolbarLayout
导航栏能够向上滚动，也能向下拉动。但它的上部边缘是不可以往下拉的，只有下部边缘才能往下拉。
Android不是直接让Toolbar展开或收缩，而是另外提供了可折叠工具栏布局CollapsingToolbarLayout，通过该布 局节点包裹Toolbar节点，从而控制导航栏的展开和收缩行为。
在布局文件中，各控件节点的层次关系为：CoordinatorLayout → AppBarLayout → CollapsingToolbarLayout → Toobar。
CollapsingToolbarLayout的折叠属性
1. 折叠模式属性 该属性的名称为app:layout_collapseMode，它指定了子视图（通常是Toolbar）的折叠模式，折叠模式 的取值说明见下表。
2. 折叠距离系数属性 该属性名称为app:layout_collapseParallaxMultiplier，它指定了视差模式时的折叠距离系数，取值 在0.0到1.0之间。该属性值默认为0.5。
CollapsingToolbarLayout的固定模式效果
CollapsingToolbarLayout的视差模式效果