Android 6.0 CollapsingToolbarLayout简单使用

最新推荐文章于 2019-07-02 22:36:56 发布

码蛋蛋

最新推荐文章于 2019-07-02 22:36:56 发布

阅读量362

点赞数

分类专栏： Android 特征集文章标签： android 设计 android6-0

本文链接：https://blog.youkuaiyun.com/u013933720/article/details/78184220

版权

Android 特征集专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Android Support Design库中的CollapsingToolbarLayout，用于实现上拉隐藏ToolBar特效。CollapsingToolbarLayout是AppBarLayout的子组件，提供了off、pin和parallax三种折叠模式。通过app:contentScrim和app:statusBarScrim可以自定义折叠时的颜色，同时可通过app:layout_collapseParallaxMultiplier设置视差滚动因子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自从谷歌Google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个AppBarLayout+CollapsingToolbarLayout+NestedScrollView+CollapsingToolbarLayout，它可以实现上拉隐藏toolbar等特效，用起来你会爱上它。
效果图

这里写图片描述

上推后效果图
这里写图片描述

CollapsingToolbarLayout介绍

折叠ToolBar布局

Collapsing:折叠

CollapsingToolBarLayout是对Toolbar的一个包装，只能作为AppBarLayout的直接孩子。

折叠的目标对象是AppBarLayout,所以CollapsingToolBarLayout就是在AppBarLayout内面，CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。

CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode）

这里写图片描述

off：这个是默认属性，布局将正常显示，没有折叠的行为。

pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。

parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。

当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。

CollapsingToolbarLayout使用

上布局：

这里写图片描述

style

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--沉浸式状态栏-->
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <!--标题栏的颜色-->
        <item name="android:textColorPrimary">#fff</item>

    </style>

</resources>