Material Design控件之CollapsingToolbarLayout

Material Design Android控件之介紹

CollapsingToolbarLayout

• 摺疊工具欄佈局
• extends FrameLayout ,作爲AppBarLayout的子佈局,ToolbarLayout的父佈局存在,用於包裝Toolbar
• 所以通過app:layout_scrollFlags 五種組合模式 CollapsingToolbarLayout實現嵌套滾動
• 官方爲我們實現了摺疊Toolbar的效果,不用自己自定義或者使用第三方開源庫來實現.

CollapsingToolbarActivity簡單展示CollapsingToolbarLayout的摺疊效果

• 設置app:layout_scrollFlags= “scroll|exitUntilCollapsed “實現摺疊效果
• 需要一個最大值height和一個minHeight
• CollapsingToolbarLayout嵌套一個Toolbar和一個背景ImageView
• 當NestedScrollView向上滾動時,CollapsingToolbarLayout最先向上滾動,一般會摺疊到Toolbar高度:Toolbar height 必須爲固定值
• 當NestedScrollView向下滾動時,CollapsingToolbarLayout最後向下滾動,擴大到最大height,一般爲背景ImageView的高度

佈局如下

<?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.wega.materialdesignwidget.CollapsingToolbarLayoutActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/CollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:layout_weight="1"
            app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
            app:contentScrim="#6F51B5"
            app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="#603F9F"
            app:title="CollapsingToolbarLayout1"
            app:titleEnabled="true">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/timg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_action_back"
                app:subtitle="CollapsingToolbarLayout3"
                app:theme="@style/ThemeOverlay.AppCompat.Dark"
                app:title="CollapsingToolbarLayout2">

            </android.support.v7.widget.Toolbar>


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


        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#3558B3"
            android:minHeight="40dp"
            app:tabIndicatorColor="#cdcdcd"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#fff"
            app:tabTextAppearance="@style/TextAppearance.AppCompat.Small"
            app:tabTextColor="#cdcdcd">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:icon="@drawable/ic_action_tab"
                android:tag="tag第三項"
                android:text="第一項" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:icon="@drawable/ic_action_tab"
                android:tag="tag第三項"
                android:text="第二項" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:icon="@drawable/ic_action_tab"
                android:tag="tag第三項"
                android:text="第三項" />
        </android.support.design.widget.TabLayout>

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


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/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">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#cdcdcd"
                android:lineSpacingExtra="12dp"
                android:padding="12dp"
                android:text="@string/collapsingtoolbarlayout" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#ababab" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#cdcdcd" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>


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

CollapsingToolbarLayout的四個要素

collapsedTitle(可摺疊標題)

• 在CollapsingToolbarLayout最上層存在一個跟隨摺疊的可變字體title的’titleView’,通過mCollapsingTextHelper進行繪製
• 並且作爲子view的Toolbar的title和subTitle不會顯示(Toolbar會被CollapsingToolbarLayout找到並設置)

 app:title="CollapsingToolbarLayout"

摺疊狀態屬性設置

 app:collapsedTitleGravity
 app:collapsedTitleTextAppearance

展開狀態屬性設置

app:expandedTitleGravity
app:expandedTitleMargin
app:expandedTitleMarginTop
app:expandedTitleMarginBottom
app:expandedTitleMarginLeft
app:expandedTitleMarginRight

是否使用CollapsingToolbarLayout的title,

false 將展示Toolbar的title

app:titleEnabled

app:statusBarScrim

• 狀態欄紗布
• 根據滾動位置到達一個閥值,改變StatusBar顏色,只能在5.0 API21 LOLLIPOP以上有作用。
• 摺疊時狀態欄的顏色

app:statusBarScrim 

or

setStatusBarScrim(Drawable)

• This scrim is only shown when we have been given a top system inset
• CollapsingToolbarLayout需要嵌入到StatusBar,才起作用 這個涉及到使用透明化狀態欄
  style.xml

<item name="android:windowTranslucentStatus">true</item>

or

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

• 問題1:AppBarLayout設置android:fitsSystemWindows有效, CollapsingToolbarLayout和Toolbar無效
• 問題2:展開時StatusBar位置（CollapsingToolbarLayout的paddingTop）顏色可通過CollapsingToolbarLayout或者AppBarLayout的background設置。默認爲colorPrimary
• 問題3:展開時StatusBar位置需要背景圖嵌入,以後再說吧

app:contentScrim

• 內容紗布

• 摺疊時CollapsingToolbarLayout的顏色

  app:contentScrim

  or

  setContentScrim(Drawable)
  

• toolbar不設置背景顏色,不然會覆蓋,通常也需要toolbar爲透明

app:layout_collapseMode

• collapsingToolbarLayout子佈局設置

app:layout_collapseMode:parallax

app:layout_collapseMode:parallax 視差滾動
app:layout_collapseParallaxMultiplier 視差因子 默認0.5

app:layout_collapseParallaxMultiplier

• 可取0-1
• 子View相對collapsingToolbarLayout向下運動速度,
• 當0時,沒有相對速度,即相對於collapsingToolbarLayout靜止,
• 當1時,與collapsingToolbarLayout向上速度相等,即相對於phoneView靜止
• imageview一般設置爲parallax

app:layout_collapseMode:pin

• 釘子 固定在屏幕上, 即相對於phoneView靜止
• toolbar一般設置爲pin

ps

CollapsingToolbarLayout通過實現AppBarLayout的OnOffsetChangedListener接口，根據AppBarLayout的偏移來實現子佈局和title的視差移動以及ContentScrim和StatusBarScrim的顯示

源碼地址：https://github.com/LinweiJ/MaterialDesignWidget