圖片來源:CCC創作集
Android Design Support Library有很多好用的Material Design元件,CoordinatorLayout。,
這個強大的Layout擁有"依據Layout底下一個View的位置變化,
進而讓其它子View也跟著位移"的能力。
我們來簡單看看xml的架構。
app:layout_behavior = “@string/appbar_scrolling_view_behavior”
可折疊的toolbar
裡面的子view看你想放什麼,可能一個toolbar+一個ImageView之類的。
CollapsingToolbarLayout裡面可設定:
app:contentScrim="#色碼"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
contentScrim設定的顏色是,當CollapsingToolbarLayout被往上折疊時會漸變的顏色。
而scrllFlags是控制當CollapsingToolbarLayout被往上折疊時,要產生何種效果。可做的設定如下:
最後,CollapsingToolbarLayout內的子布局再去設一個ImageView跟ToolBar,來設定一些華麗的滾動效果
身為CollapsingToolbarLayout的子布局,可設定
app:layout_collapseMode=""
選項有parallax與pin。
<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>
<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>