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的位置。
效果如下:
結合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等
：https://blog.csdn.net/jxf_access/article/details/79564669