Android中MaterialDesign的使用，以及实现仿网易新闻客户端的UI效果（四）

前面我们TabLayout和ViewPager等View实现了，标签式布局，以及使用DrawerLayout和NavigationView实现了侧滑菜单，这次我们又返回来，说一下ToolBar，通过CoordinatorLayout（协调员布局）以及CollapsingToolBarLayout（折叠式Toolbar）来实现折叠式ToolBar的布局。

实现折叠式ToolBar需要注意的是，CoordinatorLayout，它的默认布局方式是一层一层叠加上去的。其作用是用来协调其子View与父View的关系的。CollapsingToolBarLayout是FrameLayout的子类，同样它的默认布局方式也是一层一层叠加的，其作用是为ToolBar添加折叠效果的。CollapsingToolBarLayout必须作为AppBarLayout的直接子布局，而AppBarLayout也必须是CoordinatorLayout的子布局。接着，我们再activity_main的基础上继续写布局，为ToolBar添加折叠效果：

.support.v4.widget.DrawerLayout
    >
    .support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
            .support.design.widget.AppBarLayout

                >

                .support.design.widget.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
                    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
                    >
                    .support.v7.widget.Toolbar
                        app:layout_collapseMode="pin"/>

                .support.design.widget.CollapsingToolbarLayout>

                        .support.design.widget.TabLayout
                            app:layout_scrollFlags="scroll|enterAlways"/>
            .support.design.widget.AppBarLayout>

            .support.v4.view.ViewPager
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>




    .support.design.widget.CoordinatorLayout>

        .support.design.widget.NavigationView

            />



.support.v4.widget.DrawerLayout>

简单起见，我把前面定义过的控件都只留下标签。注意这里是DrawerLayout作为最外层的布局，CoordinatorLayout和NavigationView做为DrawerLayout的两个直接子控件，CoordinatorLayout包裹的部分作为Activity显示的部分，NavigationVIew作为菜单的显示部分，我们不看DrawerLayout和NavigationView，直接看CoordinatorLayout所包裹的部分：

首先先看CoordinatorLayout的直接子控件，有两个，一个是AppBarLayout，另外一个就是ViewPager，ViewPager中添加了一个新的属性：app:layout_behavior，那么这个属性的作用是什么呢，我们来看看它的值”@string/appbar_scrolling_view_behavior”其实它指的就是一个字符串值，这个字符串值表示的是，声明这个值的View在AppBarLayout的下方。简单点来说，就是声明ViewPager在AppBarLayout的下方。为什么要这么声明呢，因为ViewPager和AppBarLayout同级都是CoordinatorLayout的子控件，由于CoordinatorLayout的默认布局模式是一层一层叠加的，如果不添加这个值（app:layout_behavior = “@string/appbar_scrolling_view_behavior”）那么，ViewPager就是把AppBarLayout覆盖掉，从而导致AppBarLayout不可见，添加这个属性，声明ViewPager在AppBarLayout下方，这样就能正确显示你想要的UI。

接着，我们看看AppBarLayout，它有两个子控件（前面说了CollapsingToolBarLayout必须作为AppBarLayout的直接子控件）。那么CollapsingToolBarLayout中其他属性都很好理解，只有一个属性没见过就是app:layout_scrollFlags=”scroll|enterAlwaysCollapsed”这个属性是CoordinatorLayout带来的，其作用是指该控件应该怎么响应滚动事件。那么里面的值具体有什么作用呢，scroll 这是必须指定的，如果不指定这个，那么CollapsingToolBarLayout将不会响应滚动事件，就一直固定在屏幕顶端。指定了的话，随着用户向下滚动，那么指定该值的控件也会随之滚动并且收缩起来。 enterAlwaysCollapsed表示该View在用户向上滚动时，并不会出现，只有在到达边界时才会View才会向下滚动，直至完全显示。接着我们看看第二个子控件TabLayout ，里面也有这个属性，但是有一个值不同，这个值是enterAlways，它的作用是当用户向上滚动时，该View也会随着向下滚动，并重新显示出来。

再看CollapsingToolBarLayout的子控件，它的子控件就比较多了，原先AppBarLayout的直接子控件现在都成了CollapsingToolBarLayout的直接子控件。我们来看看：第一个是ToolBar，它增添了一个属性app:layout_collapseMode=”pin”，这个属性是指定折叠模式的，它的值pin表示在折叠过程中位置不会变化，对应的还有一个parallax，这个值表示在折叠过程中，会设当的产生错位便宜的效果（朋友们可以自己在CollapsingToolBarLayout中添加一个子View并指定它的app:layout_collapseMode 的属性值为parallax来看看效果）。

ok，我们来看看效果：

这是我们打开的初始状态，可以看到，多了一大块蓝色的地方，这就是CollapsingToolBarLayout，并且标题也没有显示在顶端，而是显示在CollapsingToolBarLayout的左下角。

这是向上滑动了一段距离以后，CollapsingToolBarLayout被折叠起来，显示出来的效果和ToolBar没什么两样。

再继续往上滑，可以看到CollapsingToolBarLayout，ToolBar和TabLayout都不见了，这样能最大限度的显示内容。

这里，我们变成向下滚动了，可以看到TabLayout又显示了出来，这样方便用户换频道。

关于ToolBar的折叠和CoordinatorLayout，CollapsingToolBarLayout的应用就说到这。前面ViewPager中提到的Behavior属性。我们会在下次说，因为这个是可以自定义的。

本人菜鸟，不对之处，请各路大神指教。