Android CollapsingToolbarLayout控件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chennai1101/article/details/82382298

相关文章
Android Snackbar控件
Android FloatingActionButton控件
Android Toolbar控件
Android AppBarLayout控件
Android CollapsingToolbarLayout控件

1. CollapsingToolbarLayout

CollapsingToolbarLayout是5.0版本出现的控件，可以实现Toolbar的折叠效果。
CollapsingToolbarLayout的属性

• app:contentScrim，指定布局内部未展开时的背景颜色
• app:collapsedTitleTextAppearance，指定未展开时的标题文字字体
• app:collapsedTitleTextColor，指定未展开时的标题文字颜色
• app:collapsedTitleGravity，指定未展开时的标题文字对齐方式
• app:expandedTitleTextAppearance，指定展开后的标题文字字体
• app:expandedTitleTextColor，指定展开后的标题文字颜色
• app:expandedTitleGravity，指定展开后的标题文字对齐方式
• app:expandedTitleMargin，指定展开后的标题四周间距

我们设置Toolbar的背景为红色，可以看到Toolbar实际是在最上面的，但Toolbar的标题文字被移植到中间位置。

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="240dp">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/colorAccent"
        app:collapsedTitleGravity="left"
        app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
        app:expandedTitleGravity="center"
        app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:layout_collapseMode="pin"
            app:navigationIcon="@drawable/nav_back"
            app:title="标题"
            android:background="@color/red"/>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

效果如下

2. layout_scrollFlags配置

在CollapsingToolbarLayout中配置不同layout_scrollFlags属性，会产生不同的效果。

(1) 设置为scroll，CollapsingToolbarLayout随着手势一起滑动。

(2) 设置为enterAlways，下滑时CollapsingToolbarLayout先进入。

(3) 设置为enterAlwaysCollapsed，下滑时CollapsingToolbarLayout先进入但只显示Toolbar。

(4) 设置为exitUntilCollapsed，CollapsingToolbarLayout随着手势一起滑动到只显示Toolbar。

(5) 设置为snap，CollapsingToolbarLayout会根据手势自动滑入滑出。

3. 设置图片背景

在CollapsingToolbarLayout内定义一个图片，并设置ayout_collapseMode，

扫描二维码关注公众号，回复： 3515936 查看本文章

• pin，当CollapsingToolbarLayout完全收缩后，View还可以保留在屏幕上
• parallax，当CollapsingToolbarLayout收缩时，View也同时收缩，实现视差滚动效果。通常和layout_collapseParallaxMultiplier(0.0~1.0)搭配使用。

在CollapsingToolbarLayout内，添加ImageView

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:contentScrim="@color/colorAccent"
    app:collapsedTitleGravity="left"
    app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
    app:expandedTitleGravity="center"
    app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/anim"
        android:scaleType="fitXY"
        app:layout_collapseMode="parallax"
        app:layout_collapseParallaxMultiplier="0.4" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_collapseMode="pin"
        app:navigationIcon="@drawable/nav_back"
        app:title="标题"/>
</android.support.design.widget.CollapsingToolbarLayout>

效果如下

4. FloatingActionButton

FloatingActionButton可以设置layout_anchor属性，自动根据CollapsingToolbarLayout的滚动来设置自己的状态。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon_qq"
    app:rippleColor="#ffe5e5e5"
    app:backgroundTint="#ffffffff"
    app:elevation="6dp"
    app:pressedTranslationZ="6dp"
    app:fabSize="mini"
    app:borderWidth="0dp"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|right"
    android:layout_margin="20dp" />

效果如下