一、CoordinatorLayout知識梳理

一、CoordinatorLayout類的繼承關(guān)系
CoordinatorLayout.png

系統(tǒng)對CoordinatorLayout的注釋如下：


系統(tǒng)注釋.png

具體說：

  • 1.CoordinatorLayout是一個超級的FrameLayout；
  • 2.CoordinatorLayout兩個主要的用法意圖如下：
    a.作為一個頂級布局；
    b.作為一個容器，用于一個或多個子View的特殊交互；
  • 3.在同一個父容器內(nèi)，通過給一個CoordinatorLayout的子views指定CoordinatorLayout.Behavior的behaviors，能夠?qū)崿F(xiàn)出不同的交互效果，那些子Views能夠與另一個view相互作用；當(dāng)使用{@link CoordinatorLayout.DefaultBehavior DefaultBehavior} 注釋作為CoordinatorLayout孩子時，view類能夠指定一個默認(rèn)的行為；
  • 4.Behaviors通常被用來實現(xiàn)各種各樣的交互和來自滑動抽屜、滑動刪除元素和按鈕關(guān)聯(lián)其他元素產(chǎn)生的額外的布局修改；
  • 5.CoordinatorLayout的子view也許會有個anchor（錨點(diǎn)，即view顯示在哪塊區(qū)域）；該視圖id必須于CoordinatorLayout的任意后代的id保持一致，但它可能不是固定的孩子本身或固定孩子的后代。 這可以用于相對于其他任意內(nèi)容長方格放置浮動視圖；
  • 6.孩子們可以指定{@link CoordinatorLayout.LayoutParams＃insetEdge}來描述視圖怎樣插入了CoordinatorLayout。 任意的設(shè)置躲避相同插入邊的子View可通過{@link CoordinatorLayout.LayoutParams＃dodgeInsetEdges}將被適當(dāng)?shù)匾苿?，以使視圖不重疊。
二 來看下Behavior
   /**
     * Interaction behavior plugin for child views of {@link CoordinatorLayout}.
     *
     * <p>A Behavior implements one or more interactions that a user can take on a child view.
     * These interactions may include drags, swipes, flings, or any other gestures.</p>
     *
     * @param <V> The View type that this Behavior operates on
     */
    public static abstract class Behavior<V extends View> {}
  • 1.CoordinatorLayout子view的交互行為插件；
  • 2.行為實現(xiàn)用戶可以對子視圖執(zhí)行一個或多個交互。這些交互可以包括拖動，滑動，輪流或任何其他手勢;
    它有四個具體的默認(rèn)實現(xiàn)：
四個默認(rèn)的實現(xiàn).png
1. BottomSheetBehavior

一般用于底部彈出框，類似支付寶支付彈出界面；

2.FloatingActionButton.Behavior

FloatingActionButton默認(rèn)使用FloatingActionButton.Behavior，同Snackbar一樣，唯一需要注意的是根布局必須為CoordinatorLayout。

3.SwipeDismissBehavior

官方實現(xiàn)為Snackbar，已經(jīng)封裝好，唯一的條件是根布局必須為CoordinatorLayout，否則沒有效果;

4.ViewOffsetBehavior

官方實現(xiàn)為AppBarLayout中的Beihavior;

三 AppBarLayout詳解
**
 * AppBarLayout is a vertical {@link LinearLayout} which implements many of the features of
 * material designs app bar concept, namely scrolling gestures.
 * <p>
 * Children should provide their desired scrolling behavior through
 * {@link LayoutParams#setScrollFlags(int)} and the associated layout xml attribute:
 * {@code app:layout_scrollFlags}.
 *
 * <p>
 * This view depends heavily on being used as a direct child within a {@link CoordinatorLayout}.
 * If you use AppBarLayout within a different {@link ViewGroup}, most of it's functionality will
 * not work.
 * <p>
 * AppBarLayout also requires a separate scrolling sibling in order to know when to scroll.
 * The binding is done through the {@link ScrollingViewBehavior} behavior class, meaning that you
 * should set your scrolling view's behavior to be an instance of {@link ScrollingViewBehavior}.
 * A string resource containing the full class name is available.
 * @see <a >
 *     http://www.google.com/design/spec/layout/structure.html#structure-app-bar</a>
 */
@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {
    1. AppBarLayout是一個垂直的LinearLayout，這個垂直的線性布局實現(xiàn)了許多MaterialDesigns的設(shè)計風(fēng)格概念，也就是說主要應(yīng)用在滾動的手勢操作上；
  • 2.子View通過設(shè)置LayoutParams#setScrollFlags(int)來表達(dá)他們期望的滾動行為方式，在xml中設(shè)置方式為：app:layout_scrollFlags；
  • 3.AppBarLayout只有用作CoordinatorLayout的直接子類才有效果；如果使用的AppBarLayout在一個不同的ViewGroup中，它的功能很可能不能使用；
  • 4.AppBarLayout還需要一個單獨(dú)的滾動成員，才能知道自己何時滾動；也就是說：你需要設(shè)置你的Scrolling view的behavior（app:layout_behavior）為AppBarLayout.ScrollingViewBehavior來通知AppBarLayout什么時候滾動。
a.下面看下layout_scrollFlags的屬性說明：
  • 1.SCROLL_FLAG_SCROLL：對應(yīng)xml布局中的scroll，如果要設(shè)置其他的滾動flag，這個flag必須要設(shè)置，否則無效;collapse時設(shè)置該flag的view先全部折疊，expand的時等NestedScrollView滑動到頂部設(shè)置該flag的view才會出現(xiàn)。
  • 2.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED：對應(yīng)xml布局中的exitUntilCollapsed，設(shè)置該flag的view在向上滑動退出屏幕時，不會完全退出，會保留collapsed height（minHeight）高度,測試時是Toolbar的高度；expand時先讓NestedScrollView滑動到頂端，才會使剩余的進(jìn)入屏幕；
  • 3.SCROLL_FLAG_ENTER_ALWAYS：對應(yīng)xml布局中的enterAlways，只要手指向下滑，設(shè)置該flag的view就會直接進(jìn)入屏幕，不管NestedScrollView是否在滾動。collpase的時候，設(shè)置該flag的view先折疊完畢后，NestedScrollView才開始滑動；
  • 4.SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED ：對應(yīng)xml布局中的enterAlwaysCollapsed，是enterAlways的附加flag，使設(shè)置該flag的view在進(jìn)入屏幕時最初只滑動顯示到它的collapsed height（minHeight），一旦NestedScrollView滑到頂部，該view再滑動顯示剩余的部分。collapsing時先折疊完畢才能使NestedScrollView滾動；單獨(dú)使用時與只設(shè)置scroll flag一樣，一般與enter_always一起使用
  • 5.SCROLL_FLAG_SNAP：對應(yīng)xml布局中的snap，設(shè)置該flag的view在滾動停止時，如果沒有完全顯示，會自動滾到到最近的一個邊界（頂端、中線和下線）;一般與上面的幾種情況一起使用，有阻尼的效果；
四 CollpasingToolbarLayout詳解
/**
 * CollapsingToolbarLayout is a wrapper for {@link Toolbar} which implements a collapsing app bar.
 * It is designed to be used as a direct child of a {@link AppBarLayout}.
 * CollapsingToolbarLayout contains the following features:
 *
 * <h4>Collapsing title</h4>
 * A title which is larger when the layout is fully visible but collapses and becomes smaller as
 * the layout is scrolled off screen. You can set the title to display via
 * {@link #setTitle(CharSequence)}. The title appearance can be tweaked via the
 * {@code collapsedTextAppearance} and {@code expandedTextAppearance} attributes.
 *
 * <h4>Content scrim</h4>
 * A full-bleed scrim which is show or hidden when the scroll position has hit a certain threshold.
 * You can change this via {@link #setContentScrim(Drawable)}.
 *
 * <h4>Status bar scrim</h4>
 * A scrim which is show or hidden behind the status bar when the scroll position has hit a certain
 * threshold. You can change this via {@link #setStatusBarScrim(Drawable)}. This only works
 * on {@link android.os.Build.VERSION_CODES#LOLLIPOP LOLLIPOP} devices when we set to fit system
 * windows.
 *
 * <h4>Parallax scrolling children</h4>
 * Child views can opt to be scrolled within this layout in a parallax fashion.
 * See {@link LayoutParams#COLLAPSE_MODE_PARALLAX} and
 * {@link LayoutParams#setParallaxMultiplier(float)}.
 *
 * <h4>Pinned position children</h4>
 * Child views can opt to be pinned in space globally. This is useful when implementing a
 * collapsing as it allows the {@link Toolbar} to be fixed in place even though this layout is
 * moving. See {@link LayoutParams#COLLAPSE_MODE_PIN}.
 *
 * <p><strong>Do not manually add views to the Toolbar at run time</strong>.
 * We will add a 'dummy view' to the Toolbar which allows us to work out the available space
 * for the title. This can interfere with any views which you add.</p>
 *
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_collapsedTitleTextAppearance
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleTextAppearance
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_contentScrim
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMargin
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMarginStart
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMarginEnd
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_expandedTitleMarginBottom
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_statusBarScrim
 * @attr ref android.support.design.R.styleable#CollapsingToolbarLayout_toolbarId
 */
public class CollapsingToolbarLayout extends FrameLayout {

  • 1.CollapsingToolbarLayout是一個實現(xiàn)了折疊效果的Toolbar的包裝；它被設(shè)計用來作為AppBarLayout的直接子類來使用；

  • 2.CollpasingToolbarLayout包含一下特點(diǎn)：

    1. CollapsingTitle-折疊的title：在CollapsingToolbarLayout全部展開時，title的顯示的大小會比折疊在一起大些，title會隨著屏幕的滾動變?。豢梢酝ㄟ^CollapsingToolbarLayout中的setTitle（）方法改變title的顯示內(nèi)容；title的外觀（顏色，大小）可以通過此類對象的collapsedTextAppearance屬性改變折疊時的外觀，通過expandedTextAppearance屬性改變展開時的外觀；

  • 2.Content scrim-折疊后的背景：CollapsingToolbarLayout完全折疊后的背景；當(dāng)滾動位置到達(dá)一定的閾值，就會隱藏或者顯示Toolbar的背景色；

  • 3.Status bar scrim-狀態(tài)欄背景：當(dāng)滾動到達(dá)一定閾值，狀態(tài)欄背景會隱藏或顯示在狀態(tài)欄后面；可以通過setStatusBarScrim(Drawable)方法改變這個狀態(tài)欄背景，這個設(shè)置僅僅只能在5.0以上的設(shè)備并且設(shè)置了fitSystemWindows才能有效果；

  • 4.Parallax scrolling children-CollapsingToolbarLayout的子view滾動時的視覺效果：CollapsingToolbarLayout子視圖可以選擇以視差的方式在布局中滾動；通過在xml中設(shè)置CollapsingToolbarLayout子View屬性的app:layout_collapseMode = "parallax"和app:layout_collapseParallaxMultiplier = "float"來實現(xiàn)；

  • 5.Pinned position children-固定CollapsingToolbarLayout子View的位置（一般固定的是Toolbar的位置）：子view能被固定在任何位置；通過在xml中設(shè)置：app:layout_collapseMode="pin"來實現(xiàn)；在實際的測試中發(fā)現(xiàn)這個設(shè)置無效果，只要在CollapsingToolbarLayout中設(shè)置app:layout_scrollFlags="scroll|exitUntilCollapsed”才可以使Toolbar固定在最上面的位置；
    ** 注意：不要在運(yùn)行時動態(tài)人為的給Toolbar添加子View**

  • 3.CollapsingToolbarLayout中常用來設(shè)置的屬性

  • 1.app:collapsedTitleGravity="left|center_vertical"-折疊時Toolbar的標(biāo)題顯示的位置；

  • 2.app:expandedTitleGravity="left|bottom"-展開時Toolbar的標(biāo)題顯示的位置；

  • 3.app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTextTheme"-折疊時Toolbar的字體顏色大小設(shè)置；與其對應(yīng)的還有個app:expandedTitleTextAppearance展開屬性；具體的style下面的代碼展示；

  • 4.app:contentScrim="@color/colorPrimary"-Toolbar完全折疊時的背景色；

  • 5.app:expandedTitleMarginStart="10dp"-展開時Toolbar距離左邊的間距；

  • 6.app:scrimAnimationDuration="1000"-設(shè)置Toolbar折疊時，顏色變?yōu)閏ontentScrim設(shè)置的顏色時漸變的時間；

  • 7.app:expandedTitleGravity-設(shè)置toolbar展開時，title所在的位置；相對的還有collpasedTitleGravity等屬性；

    1. app:titleEnabled="true"--這個屬性默認(rèn)是true，也就是你不設(shè)置就是true；如果設(shè)置為false，則在展開和折疊時都只有最上方的toolbar顯示toolbar中設(shè)置的title，不會顯示CollapsingToolbarLayout中設(shè)置的title；

  • 4.在CollapsingToolbarLayout中子View的ImageView中常設(shè)置app:layout_collapseParallaxMultiplier="0.8"和app:layout_collapseMode="parallax"兩個屬性，可以在折疊時給用戶一個視差效果；

  • 5.layout_collapseMode(折疊模式）-有三個值，如下：

  • 1.設(shè)置為這個模式時，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。實際測試中并不好使，只有在CollapsingToolbarLayout中設(shè)置了app:layout_scrollFlags="scroll|exitUntilCollapsed"時Toolbar才會固定到最上面；

  • 2.parallax - 設(shè)置為這個模式時，在內(nèi)容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(xiàn)視差滾動效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。

  • 3.ayout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動因子，值為：0~1。

  • 4.none:不使用任何模式；

  • 6.在CollapsingToolbarLayout中的Toolbar布局的高度（android:layout_height）必須給固定值或者“?attr/actionBarSize”，否則設(shè)置的title不會顯示；

五 具體布局
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.CollapsingToolbarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="200dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleGravity="left|center_vertical"
            app:expandedTitleGravity="left|bottom"
            app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTextTheme"
            app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutTextTheme"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginStart="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:scrimAnimationDuration="1000"
            app:titleEnabled="false"
            app:title="列表展示">

            <ImageView
                app:layout_collapseParallaxMultiplier="0.8"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bg01_02" />
          <--必須給toolbar的高度設(shè)置具體的值或者?attr/actionBarSize，否則title字體不會顯示-->
            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                app:title="@string/app_name"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/collapsingToolbarLayoutRecycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

github倉庫

相關(guān)內(nèi)容：

一、CoordinatorLayout的梳理與使用

二、Toolbar的梳理與使用

三、TextInputLayout的梳理與使用

四、FloatingActionButton的梳理與使用

五、Snackbar的梳理與使用

六、CardView的梳理與使用

七、BottomSheetDialog的梳理與使用

八、TabLayout的梳理與使用

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容