MaterialDesign系列文章（六）CoordinatorLayout的一些聯動

時間 2019-11-16

標籤 materialdesign 系列文章 coordinatorlayout 一些聯動简体版

原文原文鏈接

今天在家偷了會懶，看了《鐵甲鋼拳》。強烈的推薦這部電影，誰說咱們程序員不懂得生活的！！！站出來。你說對了。😭 這不禁回來敲代碼了嗎。。。android

今天咱們聊點什麼呢？想了好久，以爲MaterialDesign最酷炫的莫過於頂部滑動的摺疊效果了！(我這麼以爲的)開始的時候我是抵觸的，咱們班主任(UI大大)跑過來講這個好看，你能實現嗎？男人怎麼能說不行呢。。。程序員

而後我果斷的說了一句「不會」。以後就沒有以後了，被老大教訓了一頓(別以爲我老大很兇，我老大隻會靦腆的笑。我最怕的就是這個。。。)，而後我就只好硬着頭皮去弄了，其實我發現仍是挺簡單的！！！因此和你們分享一下。。。

本文知識點：

所須要的屬性分析
app:layout_scrollFlags屬性的分析
CoordinatorLayout、AppBarLayout和TabLayout的聯動
CoordinatorLayout、CollapsingToolbarLayout、AppBarLayout、FloatingActionButton和TabLayout的聯動

1. 所需的屬性分析

首先說一下CoordinatorLayout是什麼？他就是個超級FrameLayout，可是因爲內部維護了Behavior，因此能夠處理內部控件的聯動問題。裏面的屬性我會分控件進行說明的，你放心保證讓你懂！bash

1.1 CoordinatorLayout的屬性

android:layout_gravity 控制子控件位置的
app:layout_behavior 設置行營behavior的(能夠自定義，也能夠用系統的。最經常使用的就是@string/appbar_scrolling_view_behavior)設置滾動的聯動
app:layout_scrollFlags 設置子控件的聯動方式，後面詳細講解

1.2 AppBarLayout的屬性

原本我是想先寫完全部控件在來寫這篇文章的，而後我以爲應該先讓你們知道MaterialDesign能給咱們帶來什麼，以後你纔有學習的動力。因此這裏就先簡單的說一下屬性標籤吧！其實這裏也就是配合顯示一下，後面我會詳細講解的。app

app:expanded AppBarLayout是否在開始的時候顯示出來，true表明直接顯示出來，false爲不顯示，可是你滑動的時候它就出來了！
android:elevation 設置陰影的，若是你以爲沒有背景必定是你沒有給它設置背景色，若是你沒設置背景色是不會由陰影的。相信我。。。

1.3 ToolBar的屬性

關於這個內容，但願你看看我以前寫的MeterialDesign系列文章（一）ToolBar的使用裏面應該很好的介紹了Toolbar的使用！這裏就不囉嗦了！佈局

1.4 TabLayout的屬性

app:tabIndicatorColor 底條的顏色
app:tabSelectedTextColor 選擇後的文字顏色
app:tabTextColor 默認的文字顏色
app:tabGravity 對齊方式
app:tabMode 模式，分爲固定個數(fixed)和滾動模式(scrollable)

1.5 FloatingActionButton的屬性

關於這個內容，但願你看看我以前寫的MaterialDesign系列文章（四）FloatingActionButton的使用裏面應該很好的介紹了Toolbar的使用！這裏就不囉嗦了！post

1.5 CollapsingToolbarLayout的屬性

這個屬性就比較多了。。。學習

app:collapsedTitleGravity 摺疊狀態的時候標題防止的位置，top、center等
app:collapsedTitleTextAppearance 摺疊狀態標題文字的樣式
app:expandedTitleTextAppearance 展開狀態標題文字的樣式
app:contentScrim 摺疊成Toolbaru寬度時候的顏色
app:expandedTitleGravity 展開時候標題如何放置
app:titleEnabled 指定是否顯示標題文本
app:toolbarId 指定與之關聯的ToolBar，若是未指定則默認使用第一個被發現的ToolBar子View
app:expandedTitleMarginXXX 展開狀態改變標題文字的位置，經過margin設置
app:layout_collapseParallaxMultiplier 設置視差的係數，介於0.0-1.0之間
app:layout_collapseMode "parallax":固定模式，在摺疊的時候最後固定在頂端；"pin"：視差模式，在摺疊的時候會有個視差摺疊的效果

基本上以上控件的屬性就這麼多了，其實我建議你們有時間的時候去看看API文檔，別說不懂英語，我英語3+的水平，真的。谷歌翻譯什麼均可以搞定的。其實有的方法我保證你不知道。測試

2. app:layout_scrollFlags的屬性分析

首先個人表達可能不夠貼切，介意你們去試試，在機器上跑一下就能清楚的記得了spa

scroll 滾動必須添加的屬性
enterAlways 快速返回模式，當你每次向下滑的時候，設置該屬性的控件會立刻出來，而後在相應滾動事件。
enterAlwaysCollapsed 非快速返回模式，當你向下滑動的時候，設置該屬性的控件不會先相應滾動事件，當滾動到頭的時候纔會響應滾動事件。可是若是你設置了minHeight的時候會先響應滾動事件，而後滾動到最小高度的位置，而後中止響應滾動事件，由滾動控件開始響應滾動事件，當滾動控件滾動到頭的時候，而後在顯示到最大高度
exitUntilCollapsed 和上面的相似，但不會滾動出屏幕，一直由最高高度那麼高
snap 這個最簡單的理解就是四捨五入。當設置該屬性的控件顯示一半以上的時候中止滾動，會所有顯示出來，若是小於通常就害羞的回去了。

說了這麼多估計你也不怎麼理解，遂我從亦楓大神的博客中偷了幾張圖。若是以爲侵權什麼的，立馬刪除！！！先說句謝謝。。。這裏直接就幫你們科普一下通常狀況下的設置了翻譯

app:layout_scrollFlags="scroll|enterAlways"

app:layout_scrollFlags="scroll|enterAlways

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"和android:minHeight="50dp"

app:layout_scrollFlags="scroll|exitUntilCollapsed"和android:minHeight="50dp"

app:layout_scrollFlags="scroll|snap"

基本上涵蓋了開發中的全部滾動的操做了。

3. CoordinatorLayout、AppBarLayout和TabLayout的聯動

先看一下效果圖

實現這個效果是很簡單的，要是在之前不得累死啊！又得監聽滾動又得監聽距離的，如今好了謝謝佈局就搞定了。。。直接上佈局吧！輕鬆實現。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|snap|enterAlways"
            app:titleTextColor="@android:color/white">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="僞裝是一個標題"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/white">

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="標籤1" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="標籤2" />
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/ll_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:gravity="center"
                android:text="底部還有內容啊！！！" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#009988"
                android:gravity="center"
                android:text="標籤1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#002288"
                android:gravity="center"
                android:text="標籤2" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#009922"
                android:gravity="center"
                android:text="標籤3" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#00aa88"
                android:gravity="center"
                android:text="標籤4" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#999988"
                android:gravity="center"
                android:text="標籤5" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
複製代碼

注意：

app:layout_behavior="@string/appbar_scrolling_view_behavior"這句是響應滾動的behavior，全部響應的滾動都使用這個
全部的內容都要嵌套在AppbarLayout中，若是你單獨對Toolbar設置app:layout_scrollFlags="scroll|snap|enterAlways"是沒有用的！切記。。。
你們仔細看一下，個人Toolbar是設置了app:layout_scrollFlags="scroll|snap|enterAlways"可是TabLayout是沒有設置的，若是TabLayout要是也設置的話，那麼TabLayout會和Toolbar一塊兒滾動沒了的！以前我在這塊一直衝動的都設置了。因此效果你懂的。和你分享一下，怕有的小夥伴像我同樣眼神很差使。。。

4. CoordinatorLayout、CollapsingToolbarLayout、AppBarLayout、FloatingActionnButton和TabLayout的聯動

這個直接上佈局吧！或許我比較懶，可是我以爲仍是爲你好，你想啊，說了一堆都不如你看看，而後我給你講來的實在。我這高度，懶都能說出如此的逼格。。。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:theme="@style/AppBarTextStyle"
        android:layout_height="300dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleGravity="center"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="bottom"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:title="僞裝這個一個標題"
            app:toolbarId="@id/toolbar">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="fitXY"
                android:src="@mipmap/heard_2"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/back_icon" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/ll_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:gravity="center"
                android:text="底部還有內容啊！！！" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#009988"
                android:gravity="center"
                android:text="標籤1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#002288"
                android:gravity="center"
                android:text="標籤2" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#009922"
                android:gravity="center"
                android:text="標籤3" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#00aa88"
                android:gravity="center"
                android:text="標籤4" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#999988"
                android:gravity="center"
                android:text="標籤5" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:src="@mipmap/ic_call_white_24dp"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="end|bottom|right" />
</android.support.design.widget.CoordinatorLayout>
複製代碼

注意：

全部內容都是包含在AppBarLayout中的，可是是對CollapsingToolbarLayout設置的app:layout_scrollFlags
Toolbar中有一個app:layout_collapseMode="pin"必定不要動，不然ToolBar會隨着移動而消失，若是你想設置視差效果的話對ImageView進行設置就行了
android:theme="@style/AppBarTextStyle"設置了文字的顏色，代碼是這樣的

<!--AppBarLayout的文字顏色-->
    <style name="AppBarTextStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColor">@android:color/white</item>
    </style>
複製代碼

剩下的動你能夠設置一下響應的屬性看一下就能夠了。

特別提醒：若是你的滾動內容裏面包含RecyclerView的嵌套，也就是說NestedScrollView中嵌套了RecyclerView的話，你會發現，當你手指按到RecyclerView在滑動的時候，全部的響應都失效了。圖片一直在那裏不動了，這也是咱們測試發現的。起初我以爲把RecyclerView的滾動事件禁了就行了，而後我發現並無。。。後來找到了一個方法,在RecyclerView添加這句setNestedScrollingEnabled(false)就行了。等你用到的時候你會感謝個人。。。

今天分享的內容就這麼多了。喜歡的話動動手指點一下喜歡，也不枉費我半夜寫這篇文章。你的支持是我最大的動力！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。