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

2019-12-12 03:23:40

字體：大中小

來源：轉載

供稿：網友

在Material Design里，CoordinatorLayout通常用來作為頂層視圖，來協調處理各個子View之間的動作，從而實現各種動畫效果，如Snackbar與FloatingActionButton的配合顯示效果，就是以CoordinatorLayout作為根布局來實現的

CoordinatorLayout提供Behaviors接口，子View通過實現Behaviors接口來協調和其它View之間的顯示效果，可以這么理解：

CoordinatorLayout讓其子View之間互相知道彼此的存在，任意一個子View的狀態變化會通過Behaviors通知其它子View，CoordinatorLayout就像一個橋梁，連接不同的View，并使用Behavior處理各個子View之間的通信

效果一：

想實現這樣的效果挺簡單的，主要是在xml布局文件中進行設置

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  xmlns:app="http://schemas.android.com/apk/res-auto">  <!--包裹頭部View實現滑動效果-->  <android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:theme="@style/ThemeOverlay.AppCompat">    <!--標題欄-->    <android.support.v7.widget.Toolbar      android:id="@+id/tb_toolbar"      android:layout_width="match_parent"      android:layout_height="wrap_content"      app:navigationIcon="@android:drawable/ic_dialog_email"      app:title="Title"      app:layout_scrollFlags="scroll" />    <!--Tab導航欄-->    <android.support.design.widget.TabLayout      android:id="@+id/tab_layout"      android:layout_width="match_parent"      android:layout_height="wrap_content"      app:tabMode="fixed"      app:layout_scrollFlags="scroll|enterAlways"/>  </android.support.design.widget.AppBarLayout>  <android.support.v4.view.ViewPager    android:id="@+id/vp_tab_pager"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.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（不支持ListView），這里使用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屬性

效果二：

想實現這個效果，需要使用到CollapsingToolbarLayout布局，我們在效果一的基礎上更改布局代碼

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  android:layout_width="match_parent"  android:layout_height="match_parent">  <android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:layout_height="300dp"    android:fitsSystemWindows="true"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">    <android.support.design.widget.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="@drawable/bg_image"        app:layout_collapseMode="pin"/>      <!--標題欄-->      <android.support.v7.widget.Toolbar        android:id="@+id/tb_toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        app:layout_collapseMode="pin"        app:navigationIcon="@android:drawable/ic_dialog_email"        app:title="Title"/>    </android.support.design.widget.CollapsingToolbarLayout>  </android.support.design.widget.AppBarLayout>  <android.support.v7.widget.RecyclerView    android:id="@+id/rv_data"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>

一些屬性的作用

• title：設置Toolbar的標題，注意：如果在CollapsingToolbarLayout中指定了title屬性，那么Toolbar中的title屬性將會變得無效

• expandedTitleMarginStart：設置下拉伸縮完成后，ToolBar標題文字左邊的margin距離

• expandedTitleMarginEnd：設置下拉伸縮完成后，Toolbar標題文字右邊的margin距離

• contentScrim：設置Toolbar折疊到頂部后的背景

• layout_collapseMode：折疊效果，有兩個值，pin代表從底部拉出，parallax代表從中間展開

看文字可能不太理解collapseMode的顯示效果，兩個值的具體顯示效果如下：

pin：