CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

上面這個特效就是Toolbar與CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout配合後的效果；這幾個View單獨使用沒什麼效果，一般都是要互相配合才行。

簡介

CoordinatorLayout: Coordinator的翻譯後意思是【協調者】，它主要用于協調處理子View如何響應滾動事件，一般與NestedScrollView配合，協調子View滾動事件的處理
AppbarLayout:是一種支援響應滾動手勢的App Bar布局,繼承自LinearLayout，子View通過app:layout_scrollFlags控制行為；它的第一個子View必須設定【app:layout_scrollFlags=“scroll”】，不然其他子View也無法關聯滾動
- app:layout_scrollFlags=“scroll”：跟手勢随滾動，直到消失不可見
- app:layout_scrollFlags=“scroll|snap”：帶有吸附效果，滑動距離超過view的一半則自動隐藏或者顯示
- app:layout_scrollFlags=“scroll|enterAlways”：跟随手勢滾動，直到消失不可見，并且任何時候手勢下拉時顯示
- app:layout_scrollFlags=“scroll|enterAlways|enterAlwaysCollapsed”：跟随手勢滾動，直到消失不可見，并且任何時候手勢下拉時顯示Toolbar折疊時的狀态，需要與【CollapsingToolbarLayout】配合使用
- app:layout_scrollFlags=“scroll|exitUntilCollapsed”: 跟随手勢滾動，一直到CollapsingToolbarLayout折疊起來為止，也就是Toolbar一直頂部可見，需要與【CollapsingToolbarLayout】配合使用
CollapsingToolbarLayout：與Toolbar配合，支援折疊/展開Toolbar
- app:layout_collapseMode=“parallax”：Toolbar上的Menu在折疊後不顯示，僅顯示Title
- app:layout_collapseMode=“pin”: Toolbar上的Menu在折疊後依然顯示
- app:contentScrim="?attr/colorPrimary"：Toolbar折疊時，顯示的Toolbar背景色
Toolbar:
- android:background="?attr/colorPrimary"
- android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
- app:layout_scrollFlags=“scroll”
- app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
- app:title=“我的應用”
NestedScrollView：Nested翻譯後的意思是【嵌套的】，它是支援嵌套滑動的ScrollView，這意味這它會自動處理滑動沖突問題
- app:layout_behavior="@string/appbar_scrolling_view_behavior"：當滾動時通過CoordinatorLayout協調，關聯AppbarLayout的子View

關聯效果

下面将由淺入深看看不同關聯效果如何實作的

效果1:

随着主界面的往上滾動，Toolbar會慢慢的隐藏起來；當主界面往下滾動到最頂部時，Toolbar又逐漸顯示出來

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

<?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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll"
            app:menu="@menu/main_menu"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:title="我的應用" />


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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/mClickButton"
                android:layout_width="wrap_content"
                android:layout_height="1000dp"
                android:text="Hello World!"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

簡單了解上面布局：當觸摸産生滾動事件時，NestedScrollView由于配置了【app:layout_behavior="@string/appbar_scrolling_view_behavior"】，CoordinatorLayout 會協調NestedScrollView，在适當時機将滾動事件傳遞給AppBarLayout，而AppBarLayout則根據子View（Toolbar）的【app:layout_scrollFlags=“scroll”】屬性來決定如何響應滾動事件，【scroll】表示當滾動事件産生時，子View（Toolbar）也跟随滾動

效果2

在【效果1】Toolbar跟随手勢滾動的基礎上，Toolbar帶有吸附效果，也就是Toolbar的高度隐藏或者顯示超過一半并停止滾動時，會自動完全顯示/隐藏

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_scrollFlags="scroll|snap"
    app:menu="@menu/main_menu"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="我的應用" />

關鍵代碼：【app:layout_scrollFlags=“scroll|snap”】，表示跟随滾動并且帶有吸附效果

效果3

在【效果2】的基礎上，不管【NestedScrollView】滾動到任何位置，當手勢往下拉的時候，Toolbar總是顯示出來；而【效果2】隻有當【NestedScrollView】滾動到頂部繼續下拉時才會顯示Toolbar

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

關鍵代碼：【app:layout_scrollFlags=“scroll|snap|enterAlways”】，表示【跟随滾動】【帶吸附效果】【不管滾動到任何位置都下拉顯示】

效果4：與CollapsingToolbarLayout一起使用

【Collapsing】是折疊的意思，與Toolbar配套使用可以使得Toolbar具有折疊/展開的效果，需要注意以下幾點：

CollapsingToolbarLayout必須要指定具體的高度，不能是【wrap_content】,否則會出現【app:title】無法顯示的問題

【app:layout_scrollFlags】屬性要加在【CollapsingToolbarLayout】上而不是【Toolbar】上了

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

<com.google.android.material.appbar.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	
	<com.google.android.material.appbar.CollapsingToolbarLayout
		android:layout_width="match_parent"
		android:layout_height="150dp"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
		app:layout_scrollFlags="scroll|snap|enterAlways">

		<androidx.appcompat.widget.Toolbar
			android:layout_width="match_parent"
			android:layout_height="?attr/actionBarSize"
			android:background="?attr/colorPrimary"
			android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
			app:menu="@menu/main_menu"
			app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
			app:title="我的應用" />
	</com.google.android.material.appbar.CollapsingToolbarLayout>

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

效果5

在【效果4】的基礎上，任意位置下拉時，Toolbar隻顯示折疊後的高度，隻有滾動到最頂端繼續下拉時才會完全顯示出來

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

關鍵代碼【app:layout_scrollFlags=“scroll|snap|enterAlways|enterAlwaysCollapsed”】；【enterAlwaysCollapsed】表示總是以折疊狀态進入，需要與【CollapsingToolbarLayout】一起使用才有意義；

效果6

【效果5】可以看到折疊後的Toolbar不顯示【Menu】了，解決這個問題需要在Toolbar上加上另一個屬性【app:layout_collapseMode=“pin”】

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

<androidx.appcompat.widget.Toolbar
    app:layout_collapseMode="pin"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:menu="@menu/main_menu"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="我的應用" />

效果7

如果在【效果6】的基礎上，往上拖動時不想Toolbar完全隐藏，而是始終顯示折疊狀态下的Toolbar怎麼做呢？

修改【CollapsingToolbarLayout】的屬性為【app:layout_scrollFlags=“scroll|exitUntilCollapsed”】就可以了

【exitUntilCollapsed】的意思是滾動到Toolbar折疊起來就結束

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

<com.google.android.material.appbar.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">

	<com.google.android.material.appbar.CollapsingToolbarLayout
		android:layout_width="match_parent"
		android:layout_height="150dp"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
		app:layout_scrollFlags="scroll|exitUntilCollapsed">

		<androidx.appcompat.widget.Toolbar
			app:layout_collapseMode="pin"
			android:layout_width="match_parent"
			android:layout_height="?attr/actionBarSize"
			android:background="?attr/colorPrimary"
			android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
			app:menu="@menu/main_menu"
			app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
			app:title="我的應用" />
	</com.google.android.material.appbar.CollapsingToolbarLayout>

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

效果8：給Toolbar加個漂亮的背景

由于【CollapsingToolbarLayout】是繼承自【FrameLayout】，是以除了Toolbar，還可以添加其他View的，給Toolbar加背景，其實也就是在Toolbar上面加多一個【ImageView】就可以了

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

<com.google.android.material.appbar.CollapsingToolbarLayout
	android:layout_width="match_parent"
	android:layout_height="150dp"
	android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
	app:layout_scrollFlags="scroll|exitUntilCollapsed">

	<ImageView
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:scaleType="centerCrop"
		android:src="@drawable/ic_snow_mountain"/>

	<androidx.appcompat.widget.Toolbar
		app:layout_collapseMode="pin"
		android:layout_width="match_parent"
		android:layout_height="?attr/actionBarSize"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
		app:menu="@menu/main_menu"
		app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
		app:title="我的應用" />
</com.google.android.material.appbar.CollapsingToolbarLayout>

效果9：折疊後Toolbar顯示純色背景

可以看到【效果8】加個背景色雖然漂亮，但是有時候我們希望Toolba折疊後顯示純色背景，展開後才顯示圖檔背景

隻要在【CollapsingToolbarLayout】上加多一個屬性【app:contentScrim】指定Toolbar折疊後的背景色就可以了

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

完整布局檔案代碼：

<?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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_snow_mountain" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"
                app:menu="@menu/main_menu"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:title="我的應用" />
        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/mMainContentView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/mClickButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello World!" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效簡介關聯效果

簡介

關聯效果

效果1:

效果2

效果3

效果4：與CollapsingToolbarLayout一起使用

效果5

效果6

效果7

效果8：給Toolbar加個漂亮的背景

效果9：折疊後Toolbar顯示純色背景

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯