Android material design support library -- CollapsingToolbarLayout簡介

本文是codetrick上material design support library教程的第三篇，主要講的是CollapsingToolbarLayout的概念和應用方法。

原文連接：Material Design Support Library Tutorial – Part 3

Collapsing Toolbar Layout

想實現工具欄collpasing的效果，須要將工具欄(Toolbar)包裹在CollapsingToolbarLayout內。佈局的結構以下：

<android.support.design.widget.CoordinatorLayout >
    <android.support.design.widget.AppBarLayout >
        <android.support.design.widget.CollapsingToolbarLayout >
            <ImageView />
            <android.support.v7.widget.Toolbar />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout

CoordinatorLayout是一個增強的FrameLayout，指定了子視圖的多種交互行爲。容許浮動的視圖錨定在佈局中。

AppBarLayout

AppBarLayout是一個垂直的線性佈局，實現了material design中關於app bar概念的多個特性，也就是滾動手勢。

子視圖應該經過setScrollFlags(int)方法給出它們想要的滾動行爲，相關聯的佈局xml屬性是app:layout_scrollFlags。

這個控件重度依賴CoordinatorLayout，並且須要是CoordinatorLayout的直接子控件。若是你把AppBarLayout放在別的ViewGroup中，它的大多數功能都將失效。

CollapsingToolbarLayout

CollapsingToolbarLayout是對Toolbar的包裝，實現了一個能夠收縮的應用欄。它被設計成做爲AppBarLayout的直接子視圖來使用。它包含如下的特性：

Collapsing title

這個標題在佈局徹底可見時最大，當佈局滾出屏幕時會收縮變小。你能夠經過setTitle(CharSequence)方法來設置標題。標題文本的外觀能夠經過collapsedTextAppearance和expandedTextAppearance屬性來修改。

Content scrim

一個full-bleed(滿血？)的scrim(簾布？)，當滾動位置到達必定閾值時會顯示或者隱藏。你能夠經過setContentScrim(Drawable)方法來改變它。

Status bar scrim

這也是一個scrim(簾布？)，當滾動位置到達必定的閾值時會顯示或隱藏在狀態欄(status bar)後面。你能夠經過setStatusBarScrim(Drawable)方法來改變它。在LOLLIPOP設備上，只有設置了fit system windows屬性，它纔有效。

Parallax scrolling children

在這個佈局中，子視圖能夠選擇視差滾動。參見COLLAPSE_MODE_PARALLAX和setParallaxMultiplier(float)。

Pinned position children

子視圖也可選擇在全局空間中固定位置。在實現收縮效果時這頗有用，由於即便佈局在移動，它上面的Toolbar也能夠固定在一個位置。

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <com.codentrick.materialdesigndemo.SquareImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            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>

java代碼：

CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbarLayout.setTitle("This is title");
        collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));

相關代碼和效果參見原做者的github庫MaterialDesignSupportSample。