CoordinatorLayout使用詳解: 打造折疊懸浮效果

1.簡介

CoordinatorLayout遵循Material 風格，包含在 support Library中，結合AppbarLayout, CollapsingToolbarLayout等 可 產生各種炫酷的折疊懸浮效果。

• 作為最上層的View
• 作為一個 容器與一個或者多個子View進行交互

2.AppBarLayout

它是繼承與LinearLayout的，默認 的 方向 是Vertical

 

appbarLayout的滑動flag

類型	說明
int SCROLL_FLAG_ENTER_ALWAYS	W((entering) / (scrolling on screen))下拉的時候，這個View也會跟着滑出。
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED	另一種enterAlways，但是只顯示折疊后的高度。
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED	((exiting) / (scrolling off screen))上拉的時候，這個View會跟着滑動直到折疊。
int SCROLL_FLAG_SCROLL	這個View將會響應Scroll事件
int SCROLL_FLAG_SNAP	在Scroll滑動事件結束以前 ，如果這個View部分可見，那么這個View會停在最接近當前View的位置

我們可以通過兩種 方法設置這個Flag

方法一

setScrollFlags(int) 

方法二

app:layout_scrollFlags="scroll|enterAlways"

AppBarLayout必須作為CoordinatorLayout的直接子View，否則它的大部分功能將不會生效，如layout_scrollFlags等。

效果圖一:

 

布局:

<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" 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:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> . </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="15dp" android:src="@drawable/add_2"/> </android.support.design.widget.CoordinatorLayout> 

思路分析:

 

那如果當我們的toolBar 等於 app:layout_scrollFlags=”scroll|snap”的時候 ，
layout_scrollFlags=scroll的時候，這個View會 跟着 滾動 事件響應，
layout_scrollFlags=“snap”的時候 在Scroll滑動事件結束以前 ，如果這個View部分可見，那么這個View會停在最接近當前View的位置。

效果如下:

 

image

結合ViewPage,布局代碼如下:

<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" 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="250dp"> <ImageView android:layout_width="match_parent" android:layout_height="200dp" android:background="?attr/colorPrimary" android:scaleType="fitXY" android:src="@drawable/tangyan" app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="?attr/colorPrimary" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="4dp" app:tabSelectedTextColor="#000" app:tabTextColor="#fff"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="15dp" android:src="@drawable/add_2"/> </android.support.design.widget.CoordinatorLayout> 

思路分析:

 

其實相對於前 一個例子，只是把 擺放RecyclerView 的位置替換成ViewPager而已，為了有頁面導航器的效果，再使用 TabLayout而已，而TabLayout 在我們滑動的時候最終會停靠在 最頂部，是因為我們沒有設置其layout_scrollFlags，即TabLayout是靜態的

運行以后，即可看到以下的結果

 

3.CollapsingToolbarLayout

 

簡單來說 ,CollapsingToolbarLayout是工具欄的包裝器,它通常作為AppBarLayout的孩子。主要實現以下功能

• Collapsing title（可以折疊 的 標題 ）
• Content scrim（內容裝飾），當我們滑動的位置 到達一定閥值的時候，內容 裝飾將會被顯示或者隱藏
• Status bar scrim（狀態欄布）
• Parallax scrolling children，滑動的時候孩子呈現視覺特差效果
• Pinned position children，固定位置的 孩子

常量	解釋說明
int COLLAPSE_MODE_OFF	The view will act as normal with no collapsing behavior.(這個 View將會 呈現正常的結果，不會表現出折疊效果）
int COLLAPSE_MODE_PARALLAX	The view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.（在滑動的時候這個View 會呈現 出 視覺特差效果 ）
int COLLAPSE_MODE_PIN	The view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.（當這個View到達 CollapsingToolbarLayout的底部的時候，這個View 將會被放置，即代替整個CollapsingToolbarLayout）

我們有兩種方法可以設置這個常量,

方法一：在代碼中使用這個方法

setCollapseMode(int collapseMode) 

方法 二：在布局文件中使用自定義屬性

app:layout_collapseMode="pin"

結合ViewPager的視覺特差

布局代碼:

<?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:background="@android:color/background_light" android:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:id="@+id/main.appbar" 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/main.collapsing" android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <ImageView android:id="@+id/main.backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/tangyan" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="?attr/colorPrimary" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="4dp" app:tabSelectedTextColor="#000" app:tabTextColor="#fff"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v4.view.ViewPager> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="15dp" android:src="@drawable/add_2"/> </android.support.design.widget.CoordinatorLayout> 

效果圖如下:

 

思路解析:

 

• 結構圖如圖片所示，先說明CollapsingToolbarLayout的變化

CollapsingToolbarLayout里面 包含ImageView 和ToolBar，ImageView的app:layout_collapseMode=”parallax”，表示視差效果，ToolBar的 app:layout_collapseMode=”pin”，當這個TooBar到達 CollapsingToolbarLayout的底部的時候，會代替整個CollapsingToolbarLayout顯示

• 接着說明TabLayout的變化

從前面的描述我們已經知道當 沒有指定app:layout_scrollFlags的時候，最終TabLayout會靜止，不會隨着滑動的 時候消失不見

這篇博客主要講解了CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout的一些相關屬性。

• 對於AppBarLayout，我們主要 講解了這個屬性app:layout_scrollFlags，設置不同 的屬性我們可以在滾動的時候顯示不同 的效果
• 對於CollapsingToolbarLayout，我們主要講解了app:layout_collapseMode這個屬性，設置不同的值，我們可以讓其子View呈現不同的 炫酷效果，如parallax和pin等
  推薦閱讀：2017-2020歷年字節跳動Android面試真題解析（累計下載1082萬次，持續更新中）
  2019年鴻洋大神最新整理一線互聯網公司Android中高級面試題總結（附答案解析）
  

原文作者：只是一條程序狗
原文鏈接：https://blog.csdn.net/jxf_access/article/details/79564669