iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0


圖片來源: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被往上折疊時,要產生何種效果。可做的設定如下:

  1. scroll | enterAlways
    當任何時候ScrollView往下滾動時,該View會直接往下滾動。而不用考慮ScrollView是否在滾動到最頂部還是哪裡.
  2. scroll | enterAlways | enterAlwaysCollapsed
    是enterAlways的附加選項,它是指View在往下“出現”的時候,首先是enterAlways效果,當View的高度達到最小高度時,View就暫時不去往下滾動,直到ScrollView滑動到頂部不再滑動時,View再繼續往下滑動,直到滑到View的頂部結束
  3. 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>




上一篇
Android x Kotlin : 圖片輪播-BannerViewpager
下一篇
Kotlin function : 可變參數與泛型參數
系列文
Android Kotlin開發 -小嫩雞的30篇精選筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言