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 會呈現 出 視覺特差效果 ）
nt COLLAPSE_MODE_PINi	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等
--------------------- 
作者：只是一條程序狗 
來源：CSDN 
原文：https://blog.csdn.net/jxf_access/article/details/79564669?utm_source=copy 
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！