Android M 控件：AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout

AppBarLayout

AppBarLayout跟它的名字一樣，把容器類的組件全部作為AppBar。是繼承LinerLayout實現的一個ViewGroup容器組件，它是為了Material Design設計的App Bar，支持手勢滑動操作。

默認的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的內容都作為AppBar。

 

上圖就是把Toolbar和TabLayout放到了AppBarLayout中，讓他們當做一個整體作為AppBar。

常用代碼布局:

<android.support.design.widget.AppBarLayout

        android:id="@+id/appbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout

            android:id="@+id/tabs"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            app:layout_scrollFlags="scroll"

            app:tabIndicatorColor="@android:color/holo_red_dark"

            app:tabSelectedTextColor="@android:color/holo_red_dark"

            app:tabTextColor="@android:color/black" />

    </android.support.design.widget.AppBarLayout>

 

注意： AppBarLayout必須作為Toolbar的父布局容器

AppBarLayout是支持手勢滑動效果的，不過的跟CoordinatorLayout配合使用。

 

AppBarLayout這個控件也是讓子view共同協作的，它和CoordinatorLayout的區別在於：

 

AppBarLayout是在效果上的協作，用AppBarLayout包裹的子view會以一個整體的形式作為AppBar。

 

CoordinatorLayout是在行為上的一種協作，尤其是在滾動的協作上，可以說比較完美(有很多改進)。

 

CoordinatorLayout

CoordinatorLayout是這次新添加的一個增強型的FrameLayout。從音譯來看叫協調布局，它的作用有兩個：

1、作為頂層布局 
2、調度協調子布局

通過對子View的Behaviors的指定，可以實現子View之間的通信，從而確定它們具體的交互行為。

提供了幾種不用寫動畫代碼就能工作的方法，這些效果包括：
1）讓浮動操作按鈕上下滑動，為Snackbar留出空間。如下圖：

 

2）擴展或者縮小Toolbar或者頭部，讓主內容區域有更多的空間。

控制哪個view應該擴展還是收縮，以及其顯示大小比例，包括視差滾動效果動畫。

 

 

2）參考文章：

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

http://blog.csdn.net/xyz_lmn/article/details/48055919

 

Behavior
1.官方的Behavior

Behaivor是 CoordinatorLayout子View之間進行交互的插件，包括了一種或多種交互行為，如拖拉、滑動、下拉等各種手勢。已知的子類有 AppBarLayout.Behavior， AppBarLayout.ScrollingViewBehavior， FloatingActionButton.Behavior和 SwipeDismissBehavior<V extends View>,這些可以直接使用 @string/**的形式在 layout_behavior屬性中使用。

2.自定義的Behavior

• 自定義的Behavior需要重新實現的回調方法有：

1. public boolean layoutDependsOn (CoordinatorLayout parent, View child, View dependency)
   該方法確定是否有另一個指定的兄弟View作為依賴布局，並且作為對布局請求的響應，至少會調用一次。如果指定的child和dependency返回為true,父ViewCoordinatorLayout可能會做以下兩件事：
   • 不管子View的命令，始終在dependencyView后展示child；
   • 當dependency視圖布局或位置發生變化時，調用onDepentViewChanged方法；
2. public boolean onDependentViewChanged (CoordinatorLayout parent, View child, View dependency)
   無論dependency尺寸或者布局改變，該方法都會被調用。Behavor可能會合適地使用該方法來更新視圖以此作為回應。當layoutDependsOn被調用時或者child設置了以一個錨視圖，dependency也會改變。如果Behavor改變了child的位置或者大小，則返回true。
   
    

CollapsingToolbarLayout
CollapsingToolbarLayout 作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設置layout_scrollFlags，它可以控制包含在 CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相 應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。

代碼如下：
<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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary"
            >
            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img3"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6" />
            <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.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

在CollapsingToolbarLayout中設置了一個ImageView和一個Toolbar。並把這個CollapsingToolbarLayout放到AppBarLayout中作為一個整體。

1、在CollapsingToolbarLayout中：
我們設置了layout_scrollFlags:關於它的值我這里再說一下：

scroll - 想滾動就必須設置這個。

EnterAlways - 實現quick return效果, 當向下移動時，立即顯示View（比如Toolbar)。

ExitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。

EnterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。

其中還設置了一些屬性，簡要說明一下：
contentScrim - 設置當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。

expandedTitleMarginStart - 設置擴張時候(還沒有收縮時)title向左填充的距離。

2、在ImageView控件中：

我們設置了：
layout_collapseMode (折疊模式) - 有兩個值:

pin -  設置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。

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

layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子，值為：0~1。 

3、在Toolbar控件中：
我們設置了layout_collapseMode(折疊模式)：為pin。
總結：當設置了layout_behavior的控件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時，ImageView會有視差效果的向上滾動移除屏幕，當開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變為我們設置好的背景色，Toolbar也一直會固定在最頂端。

【注】：使用CollapsingToolbarLayout時必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上不會顯示。即：
mCollapsingToolbarLayout.setTitle(" ");

title的字體顏色：
擴張時候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();

收縮后在Toolbar上顯示時的title的顏色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();

代碼設置如下：
@Override
protected void initView() {
    Toolbar mToolbar=findView(R.id.toolbar);
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onBackPressed();
        }
    });
    //使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上則不會顯示
    CollapsingToolbarLayout mCollapsingToolbarLayout = findView(R.id.collapsing_toolbar);
    mCollapsingToolbarLayout.setTitle("CollapsingToolbar");
    //通過CollapsingToolbarLayout修改字體顏色
    mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設置還沒收縮時狀態下字體顏色
    mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設置收縮后Toolbar上字體的顏色
}

 

來自為知筆記(Wiz)