Material Design之AppBarLayout總結

CoordinatorLayout

1. 官方文檔

2. CoordinatorLayout 是一個增強型的FrameLayout.

3. CoordinatorLayout 主要用於兩種場景:

做爲activity最外層佈局

做爲協調一個或多個具備特定交互的子view的父佈局

子view之間的特定協調動做，經過app:layout_behavior指定，如，Google內部實現的@string/appbar_scrolling_view_behavior； 亦能夠經過自定義實現特定的behavior效果（TODO： 單獨做爲另一篇文章）。

<android.support.v4.widget.NestedScrollView
    android:id="@+id/nest_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
複製代碼

AppBarLayout

符合material design的增強版的垂直方向的LinearLayout，嚴重依賴於CoordinatorLayout；內部內置了響應動做，用於定義當某個可滑動的View（如：ScrollView ,ListView ,RecyclerView 等）發生滑動時，其餘子view應該如何響應。（app:layout_scrollFlags）

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="behaviour"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap">
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>
複製代碼

1.appbarLayout幾個方法

1. addOnOffsetChangedListener 當AppbarLayout 的偏移發生改變的時候回調，也就是子View滑動。

2. getTotalScrollRange 返回AppbarLayout 全部子View的滑動範圍

3. removeOnOffsetChangedListener 移除監聽器

4. setExpanded (boolean expanded, boolean animate)設置AppbarLayout 是展開狀態仍是摺疊狀態，animate 參數控制切換到新的狀態時是否須要動畫

5. setExpanded (boolean expanded) 設置AppbarLayout 是展開狀態仍是摺疊狀態,默認有動畫

AppBarLayout的ScrollFlg

注:滑動的NestedScrollView，簡稱 "滑動view"，設置了scorllFlag的子view，簡稱 "響應view"

1.scorll

app:layout_scrollFlags="scroll"

響應view至關於滑動view 的一部分，一塊兒滑動。

2.enterAlways

app:layout_scrollFlags="scroll|enterAlways"

結合scroll一塊兒使用。當滑動view 向下滑動時，響應view截斷滑動view的滑動事件，待響應view自身所有顯示完後，再把滑動事件還給滑動view； 當用戶向下滑動是scrollView時，關注點不在滑動view自己，此時出現響應view的內容，符合material design設計理念

3.enterAlwaysCollapsed

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...
複製代碼

結合scroll和enterAlways一塊兒使用。可理解爲enterAlways的更靈活的版本；可經過android:minHeight="?attr/actionBarSize"設置最小高度，當滑動view 向下滑動時，響應view截斷滑動view的滑動事件，待響應view自身最小高度顯示完後，再把滑動事件還給滑動view

4.snap

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
...
複製代碼

結合scroll一塊兒使用。可理解爲"四捨五入"的效果；當中止滑動時，響應view若是已顯示了一大部分，則自動彈性滑動顯示剩餘的部分；若顯示的部分不多，則自動收起隱藏

5.exitUntilCollapsed

...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...
複製代碼

結合scroll一塊兒使用。可理解爲enterAlways的相反的效果；可經過android:minHeight="?attr/actionBarSize"設置最小高度，當滑動view 向上滑動時，響應view截斷滑動view的滑動事件，待響應view縮到自身最小高度顯示完後，再把滑動事件還給滑動view

CollapsingToolbarLayout

摺疊式標題欄，豐富toolbar的效果，必須做爲appbarLayout的直接子佈局

1.parallax

有視覺效果的滾動：app:layout_collapseMode="parallax"

2.pin

子view固定：app:layout_collapseMode="pin"

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <!--豐富效果的toolbar-->
        <!--app:contentScrim 摺疊後的背景色，即toolbar顏色-->
        <!--app:statusBarScrim 摺疊後的statusBar背景色，-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="center|bottom"
            app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"
            app:collapsedTitleGravity="start"
            app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!--app:layout_collapseMode="parallax" 摺疊過程產生一點偏移-->
            <!--android:fitsSystemWindows="true",伸到statusBar，但須要新建style將statusBar顏色改成透明-->
            <!--一直到最外層都須要調用android:fitsSystemWindows="true"-->
            <ImageView
                android:id="@+id/person_portrait"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="app"
                app:layout_collapseMode="pin">


            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
複製代碼

3.設置標題

1. Java 中設置

// 設置標題
    CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);
    collapsingToolbarLayout.setTitle("This is Tom");
    
複製代碼

2. xml設置 app:title="John"

4.contentScrim

app:contentScrim：當CollapsingToolbarLayout滑動到一個肯定的閥值時將顯示或者隱藏內容紗布，能夠通過setContentScrim(Drawable)來設置紗布的圖片。（能夠時圖片也能夠是顏色）

5.statusScrim

當CollapsingToolbarLayout滑動到一個肯定的閥值時，狀態欄顯示或隱藏紗布，你能夠經過 app:statusBarScrim或者setStatusBarScrim(Drawable)來設置紗布圖片。（能夠時圖片也能夠是 顏色）

6. app:expandedTitleXXX和app:collapsedTitleXXX

expandedTitleXXX：設置展開時的文字風格佈局； app:collapsedTitleXXX：設置收縮時的文字風格佈局

...
app:expandedTitleGravity="center|bottom"
app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"
app:collapsedTitleGravity="start"
app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"
...
複製代碼

<!--摺疊時爲黑色，靠右-->
<style name="PersonDetail.TitleCollapsedTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textColor">#000</item>
</style>

<!--展開時爲白色，居中向下-->
<style name="PersonDetail.TitleExpandTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textColor">#eee</item>
</style>
複製代碼

參考連接

1. Material.io
2. Material Design之 AppbarLayout
3. CoordinatorLayout的使用如此簡單