Android Material Design控件之CollapsingToolbarLayout

Android 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