Android Material Design控件之CollapsingToolbarLayout

本文详细介绍了Android中CollapsingToolbarLayout的使用方法及原理,包括如何设置折叠效果、关键属性解析及其与NestedScrollView的嵌套使用技巧。

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

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的显示

github 源码地址:https://github.com/LinweiJ/MaterialDesignWidget

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值