Android x Kotlin : 華麗的AppBar滾動佈局

12th鐵人賽

Ketawan

團隊好想工作室 v4.0

2020-09-26 19:27:58

4743 瀏覽

分享至

圖片來源:CCC創作集

簡介

Android Design Support Library有很多好用的Material Design元件，CoordinatorLayout。，
這個強大的Layout擁有"依據Layout底下一個View的位置變化，
進而讓其它子View也跟著位移"的能力。
我們來簡單看看xml的架構。

1. CoordinatorLayout

父層需使用CoordinatorLayout，裡面包一個AppbarLayout以及一個recyclerView或NestedScrollView來實現響應滾動手勢的效果。
CoordinatorLayout能夠依據其底下一個View的位置變化，讓其它子View也跟著位移
例如它底下的子view(RecyclerView)滾動時，讓另一個子view(Appbar)也跟著動作。
此時RecyclerView需要設定

2. RecyclerView

RecyclerView或NestedScrollView需要設定

app:layout_behavior = “@string/appbar_scrolling_view_behavior”

沒有設定的話, AppbarLayout將不會響應滾動佈局的滾動事件

3. AppbarLayout

AppbarLayout是一種支援響應滾動手勢的app bar佈局, 簡單說可以搭配CoordinatorLayout，隨著其他View的變化而跟著變化。
裡面再包一個CollapsingToolbarLayout，用來實現子佈局內不同元素響應滾動細節的佈局.

4. CollapsingToolbarLayout

可折疊的toolbar
裡面的子view看你想放什麼，可能一個toolbar+一個ImageView之類的。
CollapsingToolbarLayout裡面可設定:

 app:contentScrim="#色碼"
 app:layout_scrollFlags="scroll|exitUntilCollapsed"

contentScrim設定的顏色是，當CollapsingToolbarLayout被往上折疊時會漸變的顏色。
而scrllFlags是控制當CollapsingToolbarLayout被往上折疊時，要產生何種效果。可做的設定如下:

scroll | enterAlways
當任何時候ScrollView往下滾動時，該View會直接往下滾動。而不用考慮ScrollView是否在滾動到最頂部還是哪裡.
scroll | enterAlways | enterAlwaysCollapsed
是enterAlways的附加選項，它是指View在往下“出現”的時候，首先是enterAlways效果，當View的高度達到最小高度時，View就暫時不去往下滾動，直到ScrollView滑動到頂部不再滑動時，View再繼續往下滑動，直到滑到View的頂部結束
scroll | exitUntilCollapsed
當這個View要往上逐漸“消逝”時，會一直往上滑動，直到剩下的的高度達到它的最小高度後，再響應ScrollView的內部滑動事件。

最後，CollapsingToolbarLayout內的子布局再去設一個ImageView跟ToolBar，來設定一些華麗的滾動效果

5. ImageViewm與ToolBar

身為CollapsingToolbarLayout的子布局，可設定

app:layout_collapseMode=""

選項有parallax與pin。

parallax:子View可以選擇在當前的佈局當時是否以“視差”的方式來跟隨滾動。（PS:其實就是讓這個View的滾動的速度比其他正常滾動的View速度稍微慢一點）
pin:將子View位置固定(Pinned position children)：子View可以選擇是否在全域性空間上固定位置，這對於Toolbar來說非常有用，因為當佈局在移動時，可以將Toolbar固定位置而不受移動的影響。

架構長相:

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:fitsSystemWindows="false">


        <com.google.android.material.appbar.AppBarLayout
        
        >

            <com.google.android.material.appbar.CollapsingToolbarLayout
                app:contentScrim="#ffffff"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:title="CCC 創作集">

                <ImageView
                    app:layout_collapseMode="parallax" />


                <androidx.appcompat.widget.Toolbar
                
                    app:layout_collapseMode="pin"
                    app:menu="@menu/menu_toolbar"
                    >

                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>


        <androidx.recyclerview.widget.RecyclerView
            app:layout_behavior="@string/appbar_scrolling_view_behavior">


        </androidx.recyclerview.widget.RecyclerView>
    
</androidx.coordinatorlayout.widget.CoordinatorLayout>

架構的詳code如下:

<androidx.coordinatorlayout.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:fitsSystemWindows="false"
    tools:context=".MainActivity">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="#ffffff"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:title="CCC 創作集">

                <ImageView
                    android:id="@+id/v_pager_logo"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    app:layout_collapseMode="parallax" />


                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar_search_bar"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    
                    app:layout_collapseMode="pin"
                    app:title="CCC 創作集"
                    app:titleTextColor="@color/white"
                    app:menu="@menu/menu_toolbar"
                    >

                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/r_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
          
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:listitem="@layout/item_bannercard">

        </androidx.recyclerview.widget.RecyclerView>
    
</androidx.coordinatorlayout.widget.CoordinatorLayout>