Android 5.0新控件 CollapsingToolbarLayout | 折疊工具布局 介紹及使用詳情

extends FrameLayout

先讓我們來看下Google對這個元件的定義(英語好的同學請忽略我的翻譯)

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.

CollapsingToolbarLayout contains the following features:

CollapsingToolbarLayout 是一個包裹 Toolbar 來實作折疊的app bar.它直接作為AppBarLayout的子View,包含以下功能:

Collapsing title | 折疊标題

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 setTitle(CharSequence).

The title appearance can be tweaked via the collapsedTextAppearance and expandedTextAppearance attributes.

标題哪個更大當布局完全可見但是折疊時和布局滾動關閉螢幕變得更小，你可以通過設定标題通過 setTitle(CharSequence)

标題外觀可以通過 CollapsedTitleTextAppearance 和 expandedTieleTextAppearance 來設定

Content scrim | 内容紗幕

A full-bleed scrim which is show or hidden when the scroll position has hit a certain threshold. You can change this via setContentScrim(Drawable).

一個顯示或隐藏的紗幕當它滾動到一個指定的門檻值，可以設定這個内容紗幕 setContentScrim

Status bar scrim | 狀态欄紗幕

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 setStatusBarScrim(Drawable).

This only works on LOLLIPOP devices when we set to fit system windows.

一個顯示或隐藏的紗幕當螢幕滾動到指定門檻值時的狀态欄後面，你可以改變這個狀态欄 setStatusBarScrim

這個僅适用于5.0以上的版本并且設定了屬性fitSystemWindows 為 true的情況下

Parallax scrolling children | 子View視差滾動

Child views can opt to be scrolled within this layout in a parallax fashion. See COLLAPSE_MODE_PARALLAX and setParallaxMultiplier(float).

子view可以選擇在布局裡滾動 見COLLAPSE_MODE_PARALLAX 和 setParallaxMultiplier(float)

Pinned position children | 固定子view位置

Child views can opt to be pinned in space globally. This is useful when implementing a collapsing as it allows the Toolbar to be fixed in place even though this layout is moving.

See COLLAPSE_MODE_PIN.

子視圖可以選擇在全球範圍内的空間被固定,這是一個有用的實作當Toolbar被固定在适當的位置甚至移動,見 COLLAPSE_MODE_PIN

Do not manually add views to the Toolbar at run time. 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.

注意：不要手動在運作時添加視圖工具欄.我們将添加一個”虛拟視圖”在Toolbar,使我們可以能夠制定出标題空間.你可以添加認識View在這個接口

先看效果圖

使用方法

CollapsingToolbarLayout來自design相容包，使用需要添加依賴。android studio 添加依賴如下：

dependencies {
    compile ‘com.android.support:design:22.2.0+‘
}           

XML中添加布局檔案

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorlayout"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbarlayout"
            android:layout_width="match_parent"
            android:fitsSystemWindows="true"
            android:layout_height="wrap_content">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingtoolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/colorTheme"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                app:title="@string/CoordinatorLayout">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/model02"
                    app:layout_collapseMode="parallax"/>

                <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?android:attr/actionBarSize"
                    android:contentInsetStart="0dp"
                    app:layout_collapseMode="pin">

                    <ImageView
                        android:id="@+id/imageview_back"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingBottom="20dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="20dp"
                        android:paddingTop="20dp"
                        android:src="@drawable/back"/>

                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/text"
                android:textSize="22sp"/>

        </android.support.v4.widget.NestedScrollView>

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

代碼中添加

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_play_coordinator_toolbar);
        showContentView();

        //設定Collapsing折疊後文字顔色
        bindingView.collapsingtoolbar.setCollapsedTitleTextColor(Color.WHITE);
        //設定Collapsing未折疊文字顔色
        bindingView.collapsingtoolbar.setExpandedTitleColor(Color.BLACK);
    }           

OK，這就完成了如效果圖上的效果，可以自己嘗試一下，下面貼上一些可以自己定制需求常用的方法

collapsedTitleGravity | 設定折疊後的标題位置

contentScrim | 設定折疊後的scrim

expandedTitleGravity | 設定展開後的标題位置

scrimAnimationDuration | 設定scrim動畫漸顯事件(毫秒值)

title | 設定标題内容

layout_scrollFlags | 設定折疊方式，同CoordinatorLayout的scrollFlags一樣

總結

CoolapsingToolbarLayout主要是包括Toolbar使用更多的效果，狀态欄動态改變顔色使用時需要注意android版本為5.0以上和設定fitsystemwindow屬性

更多方法檢視官方API

完整代碼點我下載下傳GitHub

Thank you

• 以上僅本人學習中遇到的問題，如有更多意見歡迎随時交流 issues
• email:[email protected]