Material Design 控件知識梳理(2) AppBarLayout & CollapsingToolbarLayout

時間  2019-11-16
標籤 material design 控件 知識 梳理 appbarlayout collapsingtoolbarlayout 简体版
原文   原文鏈接

1、概述

在某些App當中，咱們常常會見到相似於下面的這種設計： android

這種設計的目的是爲了在初始時刻展現重要的信息，可是當用戶須要查看列表的時候，不至於被封面佔據過多的可視的區域， Google爲這種設計提供了幾個類，讓咱們只用實現不多的代碼就可以實現這種效果，避免了咱們經過去監聽列表的滾動狀態來去改變頭部區域的顯示，這篇文章，咱們就一步步來學習如何實現這種效果。 要實現上面這種效果，須要對下面幾方面的知識有所瞭解：

  • CoordinatorLayout
  • AppBarLayout
  • CollapsingToolbarLayout
  • 實現了NestedScrollingChild接口的滾動佈局，例如RecyclerView、NestedScrollView等

這四者的關係能夠用下面這張圖來表示： bash

其中CollapsingToolbarLayout須要依賴於AppBarLayout，所以我打算把文章的討論分爲兩部分：app

  • 只採用AppBarLayout實現
  • 採用AppBarLayout + CollapsingToolbarLayout實現

2、只採用AppBarLayout實現

當只採用AppBarLayout時，咱們的佈局層次通常是下面這樣： ide

2.1 CoordinatorLayout

CoordinatorLayout是一個重寫的ViewGroup，它負責AppBarLayout以及可滾動佈局之間的關係，所以，它是做爲這二者的直接父控件。佈局

2.2 AppBarLayout下的列表

通常是RecyclerView或者ViewPager，爲了能讓它和AppBarLayout協同工做，須要給列表控件添加下面這個屬性，這樣列表就會顯示在AppBarLayout的下方：學習

app:layout_behavior="@string/appbar_scrolling_view_behavior"
複製代碼

2.3 AppBarLayout的標誌位

須要將AppBarLayout做爲CoordinatorLayout的直接子View，同時它也是一個LinearLayout，所以它的全部子View都是線性排列的，而它對子View的滾動顯示管理是經過子View的app:layout_scrollFlags屬性，注意，這個標誌位是在AppBarLayout的子View中聲明的，而不是AppBarLayout中。ui

app:layout_scrollFlags的值有下面五種可選：spa

  • scroll
  • exitUntilCollapsed
  • enterAlways
  • enterAlwaysCollapsed
  • snap

2.3.1 scroll

使得AppBarLayout的子View伴隨着滾動而收起或者展開，有兩點須要注意：設計

  • 這個標誌位是其它四個標誌位生效的前提
  • 帶有scroll標誌位的子View必須放在AppBarLayout中的最前面

如今咱們給RecyclerView設置了app:layout_behavior，而AppBarLayout中的兩個子View都沒有設置scroll標誌位：3d

<?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:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
        <TextView
            android:gravity="center"
            android:text="沒有設置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
複製代碼

此時AppBarLayout中的子View都一直固定在CoordinatorLayout的頂部：

下面，咱們給 AppBarLayout中的第一個子 View加上 app:layout_scrollFlags="scroll|exitUntilCollapsed"標誌位： 

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_scrollFlags="scroll"/>  //注意看這裏!
        <TextView
            android:gravity="center"
            android:text="沒有設置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>
複製代碼

那麼此時滑動狀況爲：

  • 設置了scroll的子View能夠在滾動後收起，而沒有設置的則不能夠。
  • 在手指向上移動的時候，優先收起AppBarLayout中的可收起View，當它處於收起狀態時，下面的列表內容纔開始向尾部滾動。
  • 在手指往下移動的時候，優先讓下面的列表內容向頂部滾動，當列表滾動到頂端時，AppBarLayout的可收起View才展開。

2.3.2 exitUntilCollapsed

對於可收起的子View來講有兩種狀態：Enter和Collapsed。手指向上移動的時候，會優先收起AppBarLayout中的子View，而收起的最小高度爲0，假如但願它在收起時仍然保留部分可見，那麼就須要使用exitUntilCollapsed + minHeight屬性，minHeight就決定了收起時的最小高度是多少，也就是Collapsed狀態。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
        <TextView
            android:gravity="center"
            android:text="沒有設置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>
複製代碼

2.3.3 enterAlways

exitUntilCollapsed決定了手指向上移動時AppBarLayout怎麼收起它的子View，而enterAlways則決定了手指向下移動時的行爲。默認狀況下，在手指向下移動時，會優先讓列表滾動到頂部，而若是設置了enterAlways，那麼會優先讓AppBarLayout中的子View滾動到展開。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 須要設置屬性 -->
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll|enterAlways"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_scrollFlags="scroll|enterAlways"/>
        <TextView
            android:gravity="center"
            android:text="沒有設置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>
複製代碼

2.3.4 enterAlwaysCollapsed

enterAlwaysCollapsed，enterAlways以及minHeight屬性一塊兒配合使用，採用這個標誌位，主要是爲了使得手指向下移動時出現下面這個效果：

  • 優先滾動AppBarLayout中的子View，可是並非滾動到所有展開，而是隻滾動到minHeight
  • AppBarLayout中的子View滾動到minHeight以後，開始滾動列表，直到列表滾動到頭部
  • 列表滾動到頭部以後，開始滾動AppBarLayout中的子View，直到它徹底展開

注意和exitUntilCollapsed的minHeight區分開來；

  • enterAlways|enterAlwaysCollapsed的minHeight，決定的是手指向下移動且列表沒有滾動到頂端的最大高度
  • exitUntilCollapsed的minHeight，決定的是手指向上移動時的最小高度

這兩個標誌位和minHeight是相互依賴的關係，若是聲明對應的標誌位，那麼minHeight是沒有任何意義的；而若是隻聲明瞭標誌位，沒有聲明minHeight，那麼默認minHeight爲0。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 須要設置屬性 -->
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll|enterAlways|enterAlwaysCollapsed, minHeight=50dp"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
        <TextView
            android:gravity="center"
            android:text="沒有設置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>
複製代碼

2.3.5 snap

默認狀況下，在手指從屏幕上擡起以後，AppBarLayout中子View的狀態就不會變化了，而若是咱們設置了snap標誌位，那麼在手指擡起以後，會根據子View當前的偏移量，決定是讓它變爲收起仍是展開狀態。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 須要設置屬性 -->
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll|snap"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_scrollFlags="scroll|snap"/>
        <TextView
            android:gravity="center"
            android:text="沒有設置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>
複製代碼

2.4 監聽AppBarLayout的滾動狀態

AppBarLayout提供了監聽滾動狀態的接口，咱們能夠根據這個偏移值來改變界面的狀態：

private void setAppBar() {
        final TextView moveView = (TextView) findViewById(R.id.iv_move_title);
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.al_title);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                Log.d("AppBarLayout", "offset=" + verticalOffset);
                int height = moveView.getHeight();
                int minHeight = moveView.getMinHeight();
                float fraction = verticalOffset / (float) (minHeight - height);
                moveView.setAlpha(1 - fraction);
            }

        });
}
複製代碼

這裏，咱們根據offset的值來改變alpha，最終達到下面的效果：

scroll_7.gif
在手指往上移動的過程中， verticalOffset從 0變爲負值：

2.6 AppBarLayout小結

AppBarLayout主要是掌握兩點：

  • app:layout_scrollFlags幾種標誌位以前的區別
  • 如何監聽AppBarLayout的滾動

掌握完這兩點以後，咱們就能夠自由發揮，作出本身想要的效果了。

3、AppBarLayout和CollapsingToolbarLayout結合

CollapsingToolbarLayout用於對Toolbar進行包裝，所以，它是AppBarLayout的直接子View，同時也是Toolbar的直接父View，當使用CollapsingToolbarLayout時咱們的界面佈局通常是這樣的：

CollapsingToolbarLayout的標誌比較多，並且須要和 Toolbar相結合，下面，咱們就以一種比較常見的例子，來說解幾個比較重要的標誌位，先看效果：
AppBarLayout的佈局以下： 

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/iv_title"
                android:src="@drawable/ic_bg"
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                android:layout_height="150dp"
                app:layout_collapseParallaxMultiplier="0.5"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:title="@string/app_name"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:title="Collapse"
                app:navigationIcon="@android:drawable/ic_media_play"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
複製代碼

下面，咱們就來介紹上面這個佈局中比較重要的標誌位：

  • app:contentScrim 設置收起以後CollapsingToolbarLayout的顏色，正如例子中的那樣，在收起以後，ImageView的背景被咱們設置的contentScrim所覆蓋。
  • app:layout_scrollFlags="scroll|exitUntilCollapsed" scroll標誌位是必須設置的，exitUntilCollapsed保證了咱們在手指上移的時候，CollapsingToolbarLayout最多收起到Toolbar的高度，使得它始終保持可見。
  • app:layout_collapseMode="parallax"和app:layout_collapseParallaxMultiplier="0.5" layout_collapseMode有兩種模式，parallax表示視差效果，簡單地說，就是當CollapsingToolbarLayout滑動的距離不等於背景滑動的距離，從而產生一種視差效果，而視差效果的大小由app:layout_collapseParallaxMultiplier決定。
  • app:layout_collapseMode="pin" layout_collapseMode的另外一種模式，它使得Toolbar一直固定在頂端。

除了上面這幾個重要的標誌位以外，相信你們還發現了CollapsingToolbar在所有展開的時候會把標題設置爲比較大，而當上移時，標題慢慢縮小爲Toolbar的標題大小，並移動到Toolbar的標題所在位置。

4、總結

以上就是對於使用CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout實現標題跟隨列表滾動的簡要介紹，最主要的是掌握layout_scrollFlags幾種標誌之間的區別。

5、參考文獻

Material Design之 AppbarLayout 開發實踐總結

更多文章，歡迎訪問個人 Android 知識梳理系列：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程