什么是 CoordinatorLayout
CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views
根據(jù)官方的介紹式矫，CoordinatorLayout 繼承自 ViewGroup历极，主要有以下兩個(gè)用途
- 作為一個(gè)應(yīng)用頂層的裝飾布局，也就是一個(gè)Activity Layout 的最外一層布局
- 作為一個(gè)或多個(gè)有特定響應(yīng)動(dòng)作的容器衷佃，協(xié)調(diào)(Coordinate)其他組件, 實(shí)現(xiàn)聯(lián)動(dòng)
什么是 AppBarLayout
AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.
Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.
This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.
根據(jù)官方的介紹
- AppBarLayout 繼承自 LinearLayout，子控件默認(rèn)為豎直方向蹄葱，可以用它實(shí)現(xiàn) Material Design 的 Toolbar氏义，支持滑動(dòng)手勢(shì)
- 它的子控件可以通過(guò)在代碼里調(diào)用 setScrollFlags(int) 或者在XML里 app:layout_scrollFlags 來(lái)設(shè)置它的滑動(dòng)手勢(shì)
- 根布局必須使用 CoordinatorLayout，否則很多功能無(wú)法正常使用
什么是 CollapsingToolbarLayout
CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.
根據(jù)官方的介紹 CollapsingToolbarLayout 是一個(gè)折疊的 Toolbar 布局图云，作為 AppBarLayout 的直接子項(xiàng)
下面結(jié)合 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout 的例子來(lái)學(xué)習(xí)
簡(jiǎn)單使用
按照慣例惯悠，我們先看一下效果圖：
從效果圖來(lái)看，就是一個(gè)可根據(jù)手勢(shì)滑動(dòng)進(jìn)行折疊的 Toolbar竣况，很普通但很實(shí)用克婶，下面看看具體實(shí)現(xiàn)。對(duì) Toolbar 還不熟悉的可以參考這篇介紹 MaterialDesign（一）丹泉，ToolBar使用
- 引入 com.android.support:design
由于我們這個(gè)例子使用到 CoordinatorLayout情萤、AppBarLayout、CollapsingToolbarLayout摹恨，所以需要引入 com.android.support:design
compile 'com.android.support:design:26.1.0'
- xml 文件創(chuàng)建
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<!--添加 android:minHeight="?actionBarSize" 解決 RecyclerView 最后一項(xiàng)顯示不全-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:collapsedTitleTextAppearance="@style/CollapsedTitleTextStyle"
app:expandedTitleTextAppearance="@style/ExpandedTitleTextStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/android_bg"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="標(biāo)題"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--以下這部分我們下篇文章再介紹筋岛，不是本篇的重點(diǎn)，暫時(shí)知道是一個(gè)列表就可以了-->
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
==================================================================
<!--CollapsingToolbarLayout展開(kāi)時(shí)標(biāo)題文字樣式-->
<style name="ExpandedTitleTextStyle" parent="TextAppearance.AppCompat.Title">
<item name="android:textSize">30sp</item>
<item name="android:textColor">#333333</item>
</style>
<!--CollapsingToolbarLayout折疊時(shí)標(biāo)題文字樣式-->
<style name="CollapsedTitleTextStyle" parent="TextAppearance.AppCompat.Title">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#ffffff</item>
</style>
從 xml 布局文件看晒哄，根布局是 CoordinatorLayout睁宰，里面包含了 AppBarLayout 和 SwipeRefreshLayout（下篇介紹）肪获，AppBarLayout 包含了 CollapsingToolbarLayout 作為可折疊的 Toolbar 的父布局。 AppBarLayout 的子項(xiàng)并沒(méi)有硬性規(guī)定柒傻，可以包含任意視圖孝赫。
這里我們重點(diǎn)關(guān)注 CollapsingToolbarLayout 的幾個(gè)屬性：
- app:layout_scrollFlags
| Scroll Flag | 作用 |
|---|---|
| scroll | 子 View 伴隨著滾動(dòng)事件而滾出或滾進(jìn)屏幕。如果要使用以下其他值红符，必須設(shè)置該值青柄；如果在設(shè)置該值的子 View 之前的View 沒(méi)有設(shè)置這個(gè)值，那么該 View 的設(shè)置將無(wú)效 |
| enterAlways | 快速返回模式违孝。當(dāng) Scrolling View 向下滑動(dòng)時(shí)刹前，子 View 將直接向下滑動(dòng)，而不管 Scrolling View 是否在滑動(dòng)雌桑。使用該值必須與 scroll 一起使用才有效果 |
| enterAlwaysCollapsed | 該值是對(duì) enterAlways 的補(bǔ)充喇喉，涉及到子 View 的高度和最小高度，向下滾動(dòng)時(shí)校坑，子 View 先向下滾動(dòng)最小高度值拣技，然后 Scrolling View 開(kāi)始滾動(dòng)，到達(dá)邊界時(shí)耍目，子 View 再向下滾動(dòng)膏斤，至顯示完全 |
| exitUntilCollapsed | 發(fā)生向上滾動(dòng)事件時(shí)，子 View 向上滾動(dòng)退出直至設(shè)置的最小高度邪驮，然后 Scrolling View 才開(kāi)始滾動(dòng) |
| snap | 在滾動(dòng)結(jié)束后莫辨，如果設(shè)置該屬性的 view 只是部分可見(jiàn)，它將滑動(dòng)到最近的邊界毅访，不會(huì)存在部分顯示的情況 |
在本篇的例子中我們?cè)O(shè)置的是 app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"沮榜，呈現(xiàn)的效果是往上滑時(shí)，直至 Toolbar 設(shè)置的高度時(shí)喻粹，才輪到下面列表的滑動(dòng)蟆融；往下滑時(shí)，直至滑動(dòng)到列表頂部時(shí)守呜，才輪到 CollapsingToolbarLayout 的滑動(dòng)型酥，由于設(shè)置了 snap，所以不會(huì)存在 CollapsingToolbarLayout 顯示部分的時(shí)候查乒，要么顯示最小高度弥喉，要么完全顯示。其他效果這里就不一一展示了玛迄，感興趣的可以自己實(shí)現(xiàn)档桃，跑一下效果
app:collapsedTitleTextAppearance 用于設(shè)置折疊時(shí)標(biāo)題文字樣式，這里只是簡(jiǎn)單的設(shè)置了大小和顏色
app:expandedTitleTextAppearance 用于設(shè)置展開(kāi)時(shí)標(biāo)題文字樣式憔晒，這里也只是簡(jiǎn)單的設(shè)置了大小和顏色
到此就完成了一開(kāi)始展示的效果藻肄，是不是很簡(jiǎn)單蔑舞，甚至不用在 Activity 中編寫(xiě)任何代碼。
結(jié)語(yǔ)
本文主要介紹了 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout 的使用嘹屯，這種折疊式的布局在實(shí)際開(kāi)發(fā)中還是用到的比較多攻询。本文 demo 已上傳到 github。下面是幾個(gè)控件的官方API地址（自備梯子）
