coordinatorLayout使用總結篇，看完這篇徹底能夠開發5.0的高級特效了

瞭解相關更多技術，可參考《沉浸式狀態欄+ScrollView頂部伸縮+ActionBar漸變》，最近在用coordinatorLayout作一些特效，發現網上有好多人已經走完了坑，藉此咱們來總結一把。

一言不合就上個圖,仍是動態的 

主要是找了半天,好多人說的都不夠詳細,並且有好多注意事項沒有說明,因此走了好多彎路,這個地方就是解決那些關鍵疑問的,這些疑問清楚了才能真正掌握它的用法

代碼示例(activity的xml代碼,只須要xml配置就可實現上面這麼炫酷的效果了,是否是超讚呢,後面有分析哦):

<?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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="170dp"
            app:contentScrim="@color/colorAccent"
            app:expandedTitleMarginBottom="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="我是collapsebar的標題">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="第一個固定(pin)"
                android:textSize="40sp"
                app:layout_collapseMode="pin" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="不設置,跟隨滑動"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="視察效果(parallax)"
                android:textSize="40sp"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_gravity="top"
                android:background="#600f"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="我是toolbar" />
            </android.support.v7.widget.Toolbar>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="appbar以內,collap以外"
            android:textColor="#0f0" />

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

代碼分析:

使用注意事項:

1. CoordinatorLayout繼承自viewgroup,可是使用相似於framLayout,有層次結構,後面的佈局會覆蓋在前面的佈局之上,但跟behavior屬性也有很大關係,的app:layout_behavior屬性,只有CoordinatorLayout的直接子佈局才能響應,因此不要作徒勞無功的事

2. CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout結合起來才能產生這麼神奇的效果,不要想固然的光拿着CoordinatorLayout就要玩出來(剛接觸的時候我也有這種想法),累死你

3. AppBarLayout:繼承自lineLayout,使用時其餘屬性隨lineLayou,已經響應了CoordinatorLayout的layout_behavior屬性,因此他能搞出那麼多特效來

4. AppBarLayout的直接子控件能夠設置的屬性:layout_scrollFlags

• 1.scroll|exitUntilCollapsed若是AppBarLayout的直接子控件設置該屬性,該子控件能夠滾動,向上滾動NestedScrollView出父佈局(通常爲CoordinatorLayout)時,會摺疊到頂端,向下滾動時NestedScrollView必須滾動到最上面的時候才能拉出該佈局 
• 2.scroll|enterAlways:只要向下滾動該佈局就會顯示出來,只要向上滑動該佈局就會向上收縮 
• 3.scroll|enterAlwaysCollapsed:向下滾動NestedScrollView到最底端時該佈局纔會顯示出來 
• 4.若是不設置改屬性,則改佈局不能滑動

5. CollapsingToolbarLayout,字面意思是摺疊的toolbar,它確實是起到摺疊做用的,能夠把本身的自佈局摺疊 繼承自framLayout,因此它的直接子類能夠設置layout_gravity來控制顯示的位置,它的直接子佈局可使用的屬性:app:layout_collapseMode(摺疊模式):可取的值以下:

• 1.pin:在滑動過程當中,此自佈局會固定在它所在的位置不動,直到CollapsingToolbarLayout所有摺疊或者所有展開 
• 2.parallax:視察效果,在滑動過程當中,無論上滑仍是下滑都會有視察效果,不知道什麼事視察效果本身看gif圖(layout_collapseParallaxMultiplier視差因子 0~1之間取值,當設置了parallax時能夠配合這個屬性使用,調節本身想要的視差效果) 
• 3.不設置:跟隨NestedScrollView的滑動一塊兒滑動,NestedScrollView滑動多少距離他就會跟着走多少距離

6. toobar最好是放在CollapsingToolbarLayout,也不是沒有其餘用法,可是在這套系統中通常只能放在CollapsingToolbarLayout裏面,才能達到好的效果,這裏toolbar同時設置layout_gravity和app:layout_collapseMode時有一些比較複雜的狀況.不一一做介紹,由於通常咱們只會把toolbar放在最上面(不用設置layout_gravity屬性,默認的),而且設置app:layout_collapseMode爲pin,讓他固定在最頂端,有興趣的本身試試其餘狀況,

7. 告你一個驚天大冪冪:只要CollapsingToolbarLayout裏面包含有toolbar那麼CollapsingToolbarLayout的摺疊後高度就是toolbar的高度,至關於CollapsingToolbarLayout設置了minHeight屬性

8. 再告訴你一個驚天大咪咪:CollapsingToolbarLayout摺疊到最頂端時,它就是老大,會處於最上層,包括toolbar在內,全部的佈局都會被他蓋住,顯示不出來.

**9. CollapsingToolbarLayout 本身的屬性 說明,不是直接子佈局可用的,是本身能夠用的屬性 

contentScrim摺疊後的顏色也是展開時的漸變顏色,效果超讚.**
title標題,若是設置在摺疊時會動畫的顯示到摺疊後的部分上面,拉開時會展開,很好玩的 
expandedTitleMargin當title文字展開時文字的margin,固然還有marginTop等屬性,腦補吧 
app:collapsedTitleTextAppearance=」@style/Text」摺疊時title的樣式裏面能夠定義字體大小顏色等 
app:collapsedTitleTextAppearance=」@style/Text1」摺疊時title的樣式裏面能夠定義字體大小顏色等 
固然還有一些,本身試試吧,如今的這些已經徹底夠用了**

10. 還有最後一個問題:怎麼實現固定表頭,這個也簡單,寫一個佈局放在CollapsingToolbarLayout以後,AppBarLayout以內便可,xml文件中本身找找看吧.你要是問若是放在CollapsingToolbarLayout以前,AppBarLayout以內會怎麼樣?這樣摺疊佈局就不起做用了.不會摺疊了.

總結

CoordinatorLayout是一個「增強版」的 FrameLayout,咱們只須要知道他兩個做用

• （1） 用做應用的頂層佈局管理器
• （2） 經過爲子View指定 behavior 實現自定義的交互行爲。

在咱們作 Material Design 風格的app時一般都使用 CoordinatorLayout 做爲佈局的根節點，以便實現特定的UI交互行爲。

咱們能夠用它來作各類經常使用的特效，如：
Toolbar + TabLayout 實現 TabLayout 置頂效果
浸入式 + CollapsingToolbarLayout
Fragment + 不一樣風格佈局

更多能夠參考： https://www.jianshu.com/p/e9d...

但願你們少走彎路吧.其實寫帖子挺好的,由於你寫的時候也是爲本身總結,之後本身用的時候方便找,若是不寫可能下次用的時候須要從新學一遍了,因此無論帖子有沒有人看,本身必定要多寫,跟寫筆記還不同,由於帖子你是讓別人看的,你會盡可能寫的好一點,之後本身也會省事,寫筆記是給本身看的,不怕丟人.

沉浸式狀態欄+ScrollView頂部伸縮+ActionBar漸變

個人Android重構之旅：框架篇

面試必備之UI刷新大解密