本文參考文章
CoordinatorLayout 學(xué)習(xí)(一) - CoordinatorLayout的基本使用
和
AppBarLayout中的五種ScrollFlags使用方式匯總
1. 概述
本文主要介紹CoordinatorLayout的基本使用，主要是介紹CoordinatorLayout與AppBarLayout的搭配使用。 和CollapsingToolbarLayout 的屬性
2. AppBarLayout
AppBarLayout繼承自LinearLayout
默認(rèn)有CoordinatorLayout的layout_behavior屬性,所以能實(shí)現(xiàn)各種效果
其直接子控件可以設(shè)置layout_scrollFlags屬性揽涮，不同的效果就自己去試吧，實(shí)踐才是王道
在正式介紹AppBarLayout的使用時(shí)，我們先來(lái)看看幾個(gè)Flag坯认，這幾個(gè)Flag在AppBarLayout里面非常的重要翻擒。
| 屬性值 | 效果（app:layout_scrollFlags=""） |
|---|---|
| scroll | 設(shè)置這個(gè)Flag，表示該View參與聯(lián)動(dòng)牛哺。 |
| snap | 必須scroll組合使用陋气，該Flag表示View擁有吸附功能。當(dāng)我們松開(kāi)手指時(shí)引润，Child View要么向上全部滾出屏幕巩趁，要么向下全部滾進(jìn)屏幕 |
| enterAlways | 必須scroll組合使用，滑出屏幕還是滑進(jìn)屏幕淳附，該View都能立即響應(yīng)滑動(dòng)事件议慰，跟隨滑動(dòng)。比如說(shuō)奴曙，如果該View是折疊的别凹，當(dāng)RecyclerView向下滑動(dòng)時(shí)，該View隨時(shí)都能跟隨展開(kāi)洽糟； |
| enterAlwaysCollapsed | 必須scroll組合使用炉菲，向下滾動(dòng)的時(shí)候堕战，優(yōu)先將AppBarLayout中的childView滾動(dòng)到它的最小高度，滾動(dòng)完成之后scrollview才開(kāi)始自身的滾動(dòng)拍霜，當(dāng)scrollview滾動(dòng)完成時(shí)嘱丢，這個(gè)時(shí)候childView才會(huì)將自己高度完全滾動(dòng)進(jìn)入屏幕； |
| exitUntilCollapsed | 必須scroll組合使用祠饺，這里也涉及到最小高度越驻。發(fā)生向上滾動(dòng)事件時(shí)，Child View向上滾動(dòng)退出直至最小高度吠裆， |
| snapMargins | 必須scroll組合使用伐谈，這個(gè) View 將會(huì)被 snap 到它的頂部外邊距和它的底部外邊距的位置，而不是這個(gè) View 自身的上下邊緣试疙。 |
如果使用了其他值诵棵，必定要使用scroll值才能起作用 ,否則這個(gè)直接子view將失去作用；
使用方式
-
scroll正匙？酰滑動(dòng) -
scroll|snap(snap 使用) snap 可以和上面任意一個(gè)組合使用履澳，使用它可以確保childView不會(huì)滑動(dòng)停止在中間的狀態(tài); -
scroll|enterAlways(enterAlways 使用) 往上滾動(dòng)時(shí)，Toolbar逐漸顯示怀跛，但是會(huì)跟隨視圖滾出屏幕距贷；往下滾動(dòng)時(shí)，列表滾到頂部吻谋，Toolbar才會(huì)顯示忠蝗。 -
scroll|enterAlways|enterAlwaysCollapsed(enterAlwaysCollapsed 使用) 它是enterAlways的附加值。往上滾動(dòng)時(shí)漓拾，Toolbar逐漸顯示阁最，但是會(huì)跟隨視圖滾出屏幕；往下滾動(dòng)時(shí)骇两，Toolbar立刻顯示速种，不用等列表滾到頂部。 -
scroll|exitUntilCollapsed(exitUntilCollapsed 使用) 在enterAlways使用的基礎(chǔ)上低千，Toolbar會(huì)停留在屏幕頂部配阵。 -
scroll|snap|snapMargins(snapMargins使用) 這個(gè) View 將會(huì)被 snap 到它的頂部外邊距和它的底部外邊距的位置，而不是這個(gè) View 自身的上下邊緣示血，layout_marginTop,和 layout_marginBottom 的邊距位置棋傍。
3.CollapsingToolbarLayout
app:contentScrim Toolbar顯示時(shí)的背景色
app:scrimVisibleHeightTrigger 滾動(dòng)到多高開(kāi)始變色
app:collapsedTitleTextAppearance 折疊式顯示的文本樣式
app:expandedTitleTextAppearance 展開(kāi)時(shí)顯示的文本樣式
app:toolbarId 關(guān)聯(lián)的Toolbar的ID
android.support.v7.widget.Toolbar
layout_collapseMode 折疊模式，pin是隨著往上滾動(dòng)难审，parallax時(shí)要結(jié)合layout_collapseParallaxMultiplier=“0.5”舍沙，上下都往中間收縮。
app:title Toolbar顯示文本
app:navigationIcon 導(dǎo)航圖標(biāo)
————————————————
接下來(lái)剔宪，我們?cè)賮?lái)看一下CollapsingToolbarLayout拂铡。CollapsingToolbarLayout主要是實(shí)現(xiàn)折疊布局的,配合Toolbar使用壹无。
首先，我們來(lái)看看CollapsingToolbarLayout的幾個(gè)Flag：
| 名稱 | 作用 (app:layout_collapseMode="") |
|---|---|
| parallax | 設(shè)置該Flag的View會(huì)跟內(nèi)容滾動(dòng)感帅，可以通過(guò)setParallaxMultiplier方法來(lái)設(shè)置視圖差比率斗锭，其中0表示毫無(wú)視圖差，完全跟內(nèi)容滾動(dòng)同步失球；1表示View完全不動(dòng)岖是。默認(rèn)的視圖差為0.5。 |
| pin | 當(dāng)CollapsingToolbarLayout完全收縮之后实苞，設(shè)置該Flag的View會(huì)保留在屏幕當(dāng)中豺撑。 |
| none | 默認(rèn)值，表示View不會(huì)有任何屬性 |
CollapsingToolbarLayout折疊到最頂端時(shí),會(huì)處于最上層,包括toolbar在內(nèi),所有的布局都會(huì)被他蓋住,顯示不出來(lái)黔牵，或者可以設(shè)置一個(gè)透明的背景顯示下面的內(nèi)容
AppBarLayout中的ScrollFlags使用方式匯總
scroll
scroll
scroll|snap
scroll|snap
scroll|enterAlways
scroll|enterAlways
scroll | enterAlways | enterAlwaysCollapsed
scroll | enterAlways | enterAlwaysCollapsed
scroll | exitUntilCollapsed
scroll | exitUntilCollapsed
<?xml version="1.0" encoding="utf-8"?>
<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=".tanDian.merchant.tmine.MerchantMineFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior=".view.AppBarLayoutBehavior"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:fitsSystemWindows="false"
android:minHeight="@dimen/toolBarSize"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="@style/TitleTheme"
app:titleEnabled="true">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/toolBarSize"
app:titleTextAppearance="@style/TitleTheme"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:layout_collapseMode="parallax"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="fitXY"
android:src="@mipmap/mine_head"
app:layout_scrollFlags="scroll" />
<ImageView
android:id="@+id/user_avatar"
android:layout_width="70dp"
android:layout_height="70dp"
tools:src="@mipmap/logo"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"/>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="82dp"
android:layout_marginStart="10dp"
android:layout_marginTop="150dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="5dp"
app:cardCornerRadius="7dp"
app:cardElevation="3dp"
app:layout_scrollFlags="scroll">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<LinearLayout
android:id="@+id/tab_dingdan_view"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@mipmap/mine_page_content_dingdan" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:text="訂單"
android:textColor="@color/merchantBlack"
android:textSize="11sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_collect_view"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@mipmap/mine_page_content_shoucang" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:text="收藏"
android:textColor="@color/merchantBlack"
android:textSize="11sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_wallet_view"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@mipmap/mine_page_content_qianbao" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:text="錢包"
android:textColor="@color/merchantBlack"
android:textSize="11sp" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/item_1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="28dp"
android:src="@mipmap/mine_comment" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="28dp"
android:drawableEnd="@mipmap/item_next"
android:text="我的評(píng)論"
android:textColor="@color/merchantBlack"
android:textSize="@dimen/sp12" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="28dp"
android:src="@mipmap/mine_info" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="28dp"
android:drawableEnd="@mipmap/item_next"
android:text="個(gè)人中心"
android:textColor="@color/merchantBlack"
android:textSize="@dimen/sp12" />
</LinearLayout>
<LinearLayout
android:id="@+id/item_3"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="28dp"
android:src="@mipmap/mine_service" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginEnd="28dp"
android:drawableEnd="@mipmap/item_next"
android:text="客服中心"
android:textColor="@color/merchantBlack"
android:textSize="@dimen/sp12" />
</LinearLayout>
<TextView
android:id="@+id/merchant_mobile_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="@dimen/sp10"
android:textColor="@color/merchantGray"
tools:text="客服電話：18205999999"
android:layout_marginTop="28dp"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
