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的位置。

效果以下:



結合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