使用CoordinatorLayout實現滾動標題欄效果

CoordinatorLayout提供Behaviors接口，子View通過實現Behaviors接口來協調和其它View之間的顯示效果，可以這麼理解：
CoordinatorLayout讓其子View之間互相知道彼此的存在，任意一個子View的狀態變化會通過Behaviors通知其它子View，CoordinatorLayout就像一個橋樑，連接不同的View，並使用Behavior處理各個子View之間的通信

效果一：

xml：

<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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll"
            app:navigationIcon="@android:drawable/ic_dialog_email"
            app:title="Title" />

        <!--Tab導航欄-->
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabMode="fixed" />
    </com.google.android.material.appbar.AppBarLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

AppBarLayout下view 添加 app:layout_scrollFlags屬性

• scroll：讓該View可以滾動出屏幕
• enterAlways：不需要滾動到頂部，只要有向上滾動的事件就顯示該View
• enterAlwaysCollapsed：定義該View何時進入，如果你定義了一個最小高度minHeight，同時enterAlways也定義了，那麼該View將會在到達這個最小高度的時候開始慢慢顯示，直到滾動組件滾動到頂部時再完全展開
• exitUntilCollapsed：定義該View何時退出，如果你定義了一個最小高度minHeight，那麼這個View將在滾動到達這個最小高度時消失

如果不設置layout_scrollFlags屬性，那麼該View就會固定在屏幕上，enterAlwaysCollapsed和exitUntilCollapsed屬性主要是在搭配CollapsingToolbarLayout時使用的
注意：佈局的時候，AppBarLayout裏面滾動的View要放在固定的View上面

然後在CoordinatorLayout佈局裏放一個可以滾動的View，這裏使用ViewPager裏放置一個RecylerView，爲該ViewPager設置app:layout_behavior屬性，這裏可直接使用Android自帶的值

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

設置該值的作用相當於告訴CoordinatorLayout，此View是一個滾動控件，如果該View滾動了，那麼設置了layout_scrollFlags屬性的控件就可以響應滾動事件了

想實現效果一，總結

使用CoordinatorLayout作爲根佈局
使用AppBarLayout包裹頭部View，並給需要滾動的View設置app:layout_scrollFlags屬性
給滑動組件設置app:layout_behavior屬性

效果二：

layout_collapseMode="pin"

                        

layout_collapseMode="parallax"

 

<?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=".view.ScrollActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="88dp"
            app:expandedTitleMarginStart="66dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!--拉開後顯示的背景圖片-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/wallet_bg"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tb_toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll"
                app:navigationIcon="@android:drawable/ic_dialog_email"
                app:title="Title" />


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

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

• title：設置Toolbar的標題，注意：如果在CollapsingToolbarLayout中指定了title屬性，那麼Toolbar中的title屬性將會變得無效
• expandedTitleMarginStart：設置下拉伸縮完成後，ToolBar標題文字左邊的margin距離
• expandedTitleMarginEnd：設置下拉伸縮完成後，Toolbar標題文字右邊的margin距離
• contentScrim：設置Toolbar摺疊到頂部後的背景
• layout_collapseMode：摺疊效果，有兩個值，pin代表從底部拉出，parallax代表從中間展開

 

想實現效果二，總結

首先我們設置一個固定的高度給AppBarLayout
然後給AppBarLayout的子View包裹了一層CollapsingToolbarLayout，並設置CollapsingToolbarLayout的滾動屬性爲scroll|exitUntilCollapsed
最後再爲CollapsingToolbarLayout裏的子View設置layout_collapseMode屬性，指定其展示效果