coordinatorLayout使用詳解及注意事項,看完這篇完全可以開發5.0的進階特效了

标簽（空格分隔）： 未分類

一言不合就上個圖,還是動态的

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

代碼示例(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之内會怎麼樣?這樣折疊布局就不起作用了.不會折疊了.

寫的真累啊,這都是一個一個總結出來,試出來的.希望大家少走彎路吧.其實寫文章挺好的,因為你寫的時候也是為自己總結,以後自己用的時候友善找,如果不寫可能下次用的時候需要重新學一遍了,是以不管文章有沒有人看,自己一定要多寫,跟寫筆記還不一樣,因為文章你是讓别人看的,你會盡量寫的好一點,以後自己也會省事,寫筆記是給自己看的,不怕丢人.