Android Material Design新UI控件使用大全 三

原文地址：http://blog.csdn.net/smallcheric/article/details/51247414

序言

在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及CoordinatorLayout有了一定的了解后,我们最后将对AppBarLayout,CollapsingToolbarLayout进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图)

 

AppBarLayout

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的内容都作为AppBar, 支持手势滑动操作,可以管理其中的控件在内容滚动时的行为,如图所示:

---

实现这样效果的代码布局如下:

[java]  view plain  copy

1. <android.support.design.widget.AppBarLayout  
2.      android:id="@+id/appbar"  
3.      android:layout_width="match_parent"  
4.      android:layout_height="wrap_content"  
5.      android:fitsSystemWindows="true">  
6.   
7.      <android.support.v7.widget.Toolbar  
8.           android:id="@+id/toolbar"  
9.           android:layout_width="match_parent"  
10.           android:layout_height="?attr/actionBarSize"  
11.           android:background="?attr/colorPrimary"  
12.           app:layout_scrollFlags="scroll|enterAlways" />  
13.   
14.       <android.support.design.widget.TabLayout  
15.           android:id="@+id/appbar_tab_layout"  
16.           android:layout_width="match_parent"  
17.           android:layout_height="wrap_content"  
18.           app:tabTextColor="@android:color/white"             app:tabSelectedTextColor="@android:color/holo_red_light"  
19.           app:tabGravity="fill" />  
20.   
21.   </android.support.design.widget.AppBarLayout>  

注意:这里我们将Toolbar和TabLayout共同组成AppbarLayout的内容,并且AppbarLayout必须作为ToolBar的父布局

CoordinatorLayout与AppbarLayout的结合使用

我们知道,AppBarLayout是支持我们的手势滑动操作的,不过需要跟CoordinatorLayout一起搭配使用,我们先看两张效果图,然后再进行分析:

 

左侧是我们初始化的代码,从上至下分别为Toolbar,TabLayout,ViewPager,底部为一个FloatingActionBar,我们现在来看一下xml文件布局的代码:

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     android:id="@+id/main_content"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     >  
8.   
9.     <android.support.design.widget.AppBarLayout  
10.         android:id="@+id/appbar"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:fitsSystemWindows="true">  
14.   
15.         <android.support.v7.widget.Toolbar  
16.             android:id="@+id/toolbar"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="?attr/actionBarSize"  
19.             android:background="?attr/colorPrimary"  
20.             app:layout_scrollFlags="scroll|enterAlways" />  
21.   
22.         <android.support.design.widget.TabLayout  
23.             android:id="@+id/appbar_tab_layout"  
24.             android:layout_width="match_parent"  
25.             android:layout_height="wrap_content"  
26.             app:tabTextColor="@android:color/white"  
27.             app:tabSelectedTextColor="@android:color/holo_red_light"  
28.             app:tabGravity="fill" />  
29.   
30.     </android.support.design.widget.AppBarLayout>  
31.   
32.     <!--可滑动的布局内容,内部必须包含一个RecyclerView-->  
33.     <android.support.v4.view.ViewPager  
34.         android:id="@+id/appbar_viewpager"  
35.         android:layout_width="match_parent"  
36.         android:layout_height="match_parent"  
37.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />  
38.   
39.     <android.support.design.widget.FloatingActionButton  
40.         android:id="@+id/fab"  
41.         android:layout_width="wrap_content"  
42.         android:layout_height="wrap_content"  
43.         android:layout_gravity="bottom|end"  
44.         app:borderWidth="0dp"  
45.         android:layout_margin="20dp"  
46.         android:src="@drawable/floating_icon" />  
47.   
48. </android.support.design.widget.CoordinatorLayout>  

我们现在来分析一下整个布局中CoordinatorLayout的作用:

1. 因为CoordinatorLayout是一个超级的FrameLayout,所以我们只要设置android:layout_gravity="bottom|end"这个属性即可将FloatingActionBar放置在底部靠右的位置;

2. 如果我们想要在手指向上滑动的时候Toolbar隐藏,就需要给Toolbar设置一个属性,app:layout_scrollFlags="scroll|enterAlways",来确定滚动出屏幕时候的动作,我们现在来解释一些这些参数:

   • scroll: 所有想滚动出屏幕的view**都需要**设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
   • enterAlways: 配合scroll使用,设置这个flag时，任意向下的滚动都会导致该view变为可见，当向上滑的时候Toolbar就隐藏，下滑的时候显示，启用快速“返回模式”。
   • enterAlwaysCollapsed: 这个flag定义的是何时进入（已经消失之后何时再次显示）,配合scroll使用,当你的视图已经设置minHeight属性又使用此标志时，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候完全展开。
   • exitUntilCollapsed: 这个flag是定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
   • 注意:这些flag的模式一般是前两个一起使用或者 scroll与enterAlwaysCollapsed 一起使用,而最后一个flag只有在CollapsingToolbarLayout中才有用,所以这些flag的使用场景,一般都是固定的;

3. 当然,为了使Toolbar可以滚动,还需要一个条件,就是CoordinatorLayout布局下需要包裹一个可以滑动的布局，比如 RecyclerView或者NestedScrollView(ListView及ScrollView不支持),CoordinatorLayout包含的子布局中带有滚动属性的View需要设置app:layout_behavior属性。示例中Viewpager设置了此属性:app:layout_behavior="@string/appbar_scrolling_view_behavior",这样一来AppBarLayout就能响应RecyclerView中的滚动事件,CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了;

总结:如果想让Toolbar划出屏幕,需要做到以下4点

1. CoordinatorLayout作为顶层的父布局
2. 需要给Toolbar也就是想要划出屏幕的view设置flag值,app:layout_scrollFlags=”scroll|enterAlways”
3. 需要给可滑动的组件设置一个layout_behavior的属性,示例中为viewpager,app:layout_behavior="@string/appbar_scrolling_view_behavior"
4. 可滑动的组件目前经测试支持RecyclerView,NestedScrollView,示例中viewpager中包含的就是一个RecyclerView

CollapsingToolbarLayout–可折叠的Toolbar

我们知道如果在某些详情页面,我们只是在AppbarLayout中使用了可隐藏/展示的Toolbar的话, 只能固定到屏幕顶端并且不能做出好的动画效果,而且无法控制不同元素如何响应collapsing(折叠)的细节，所以为了达到此目的，CollapsingToolbarLayout就应运而生.

CollapsingToolbarLayout一般都是需要包括一个Toolbar,这样就可以实现一个可折叠的Toolbar,一般都是作为AppbarLayout的子view使用,CollapsingToolbarLayout的子视图类似于LinearLayout垂直方向排放。

CollapsingToobarLayout的属性及用法:

1. Collapsing title：ToolBar的标题，CollapsingToolbarLayout和Toolbar在一起使用的时候，title会在展开的时候自动变得比较大，而在折叠的时候让字体变小过渡到默认值。注意，你必须在CollapsingToolbarLayout上调用setTitle()，而不是在Toolbar上进行设置。
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉因子，可以通过属性app:layout_collapseParallaxMultiplier=”0.7”来改变。值的范围[0.0,1.0]，值越大视差越大。
5. CollapseMode ：子视图的折叠模式，需要在子视图设置; 
   
   • “pin”：固定模式，在折叠的时候最后固定在顶端；
   • “parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
6. layout_anchor : 这个是CoordinatorLayout提供的属性,与layout_anchorGravity 一起使用,可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）或者头像

我们先来看看实现的效果图:

 

 

我们现在看看布局文件的写法:

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.design.widget.CoordinatorLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     xmlns:app="http://schemas.android.com/apk/res-auto"  
8.     tools:context="suericze.coordinatoreps.CollapsingToobar.CollapsingToobarActivity">  
9.   
10.     <android.support.design.widget.AppBarLayout  
11.         android:id="@+id/appbar"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="200dp">  
14.   
15.         <android.support.design.widget.CollapsingToolbarLayout  
16.             android:id="@+id/collapsing_collaps_toolbar"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="match_parent"  
19.             app:contentScrim="?attr/colorPrimary"  
20.             app:expandedTitleMarginEnd="64dp"  
21.             app:expandedTitleMarginStart="48dp"  
22.             app:layout_scrollFlags="scroll|exitUntilCollapsed"  
23.             app:statusBarScrim="?attr/colorPrimary"  
24.   
25.             >  
26.   
27.             <ImageView  
28.                 android:id="@+id/image"  
29.                 android:layout_width="match_parent"  
30.                 android:layout_height="match_parent"  
31.                 android:scaleType="fitXY"  
32.                 android:src="@mipmap/example"  
33.                 app:layout_collapseMode="parallax"  
34.                 app:layout_collapseParallaxMultiplier="0.6" />  
35.   
36.             <android.support.v7.widget.Toolbar  
37.                 android:id="@+id/toolbar"  
38.                 android:layout_width="match_parent"  
39.                 android:layout_height="?attr/actionBarSize"  
40.                 app:layout_collapseMode="pin"  
41.                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>  
42.         </android.support.design.widget.CollapsingToolbarLayout>  
43.   
44.   
45.     </android.support.design.widget.AppBarLayout>  
46.   
47.   
48.     <android.support.v4.widget.NestedScrollView  
49.         android:layout_width="match_parent"  
50.         android:layout_height="match_parent"  
51.         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
52.   
53.         <LinearLayout  
54.             android:layout_width="match_parent"  
55.             android:layout_height="match_parent"  
56.             android:orientation="vertical"  
57.             android:paddingTop="24dp">  
58.              <include layout="@layout/card_view" />  
59.         </LinearLayout>  
60.   
61.     </android.support.v4.widget.NestedScrollView>  
62.   
63.     <android.support.design.widget.FloatingActionButton  
64.         android:layout_width="wrap_content"  
65.         android:layout_height="wrap_content"  
66.         android:src="@drawable/floating_icon"  
67.         app:backgroundTintMode="multiply"  
68.         app:layout_anchor="@id/appbar"  
69.         android:layout_margin="20dp"  
70.         app:layout_anchorGravity="bottom|end|right"/>  
71.   
72.   
73. </android.support.design.widget.CoordinatorLayout>  

注意:

1. 我们使用了下面的参数设置了FloatingActionButton的位置，两个属性共同作用使得浮动按钮可以随着手势能折叠消失和展现。

   app:layout_anchor=”@id/appbar” 
   app:layout_anchorGravity=”bottom|right|end”

2. AppBarLayout 的高度layout_height固定，不能 “wrap_content”，如果不固定的话动画效果不友好

3. CollapsingToolbarLayout的子视图设置layout_collapseMode属性
4. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

源码地址: GitHub 
OK,到这里我们已经将Materil Design的常用控件介绍完毕,下次我们将对自定义的Behavior进行解析,我们将会实现更加酷炫好看的效果,愿大家都有美好的一天…