CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用，Toolbar特效

最新推荐文章于 2023-07-26 18:22:02 发布
最新推荐文章于 2023-07-26 18:22:02 发布
阅读量1.7k 收藏 9
点赞数 4
分类专栏： Android Framework 文章标签： android toolbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guangdeshishe/article/details/118685483
版权

在这里插入图片描述
在这里插入图片描述

上面这个特效就是Toolbar与CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout配合后的效果；这几个View单独使用没什么效果，一般都是要互相配合才行。

简介

  • CoordinatorLayout: Coordinator的翻译后意思是【协调者】，它主要用于协调处理子View如何响应滚动事件，一般与NestedScrollView配合，协调子View滚动事件的处理
  • AppbarLayout:是一种支持响应滚动手势的App Bar布局,继承自LinearLayout，子View通过app:layout_scrollFlags控制行为；它的第一个子View必须设置【app:layout_scrollFlags=“scroll”】，不然其他子View也无法联动滚动
    • app:layout_scrollFlags=“scroll”：跟手势随滚动，直到消失不可见
    • app:layout_scrollFlags=“scroll|snap”：带有吸附效果，滑动距离超过view的一半则自动隐藏或者显示
    • app:layout_scrollFlags=“scroll|enterAlways”：跟随手势滚动，直到消失不可见，并且任何时候手势下拉时显示
    • app:layout_scrollFlags=“scroll|enterAlways|enterAlwaysCollapsed”：跟随手势滚动，直到消失不可见，并且任何时候手势下拉时显示Toolbar折叠时的状态，需要与【CollapsingToolbarLayout】配合使用
    • app:layout_scrollFlags=“scroll|exitUntilCollapsed”: 跟随手势滚动，一直到CollapsingToolbarLayout折叠起来为止，也就是Toolbar一直顶部可见，需要与【CollapsingToolbarLayout】配合使用
  • CollapsingToolbarLayout：与Toolbar配合，支持折叠/展开Toolbar
    • app:layout_collapseMode=“parallax”：Toolbar上的Menu在折叠后不显示，仅显示Title
    • app:layout_collapseMode=“pin”: Toolbar上的Menu在折叠后依然显示
    • app:contentScrim="?attr/colorPrimary"：Toolbar折叠时，显示的Toolbar背景色
  • Toolbar:
    • android:background="?attr/colorPrimary"
    • android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    • app:layout_scrollFlags=“scroll”
    • app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    • app:title=“我的应用”
  • NestedScrollView：Nested翻译后的意思是【嵌套的】，它是支持嵌套滑动的ScrollView，这意味这它会自动处理滑动冲突问题
    • app:layout_behavior="@string/appbar_scrolling_view_behavior"：当滚动时通过CoordinatorLayout协调，联动AppbarLayout的子View

联动效果

下面将由浅入深看看不同联动效果如何实现的

效果1:

随着主界面的往上滚动，Toolbar会慢慢的隐藏起来；当主界面往下滚动到最顶部时，Toolbar又逐渐显示出来
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll"
            app:menu="@menu/main_menu"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:title="我的应用" />


    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.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">

            <Button
                android:id="@+id/mClickButton"
                android:layout_width="wrap_content"
                android:layout_height="1000dp"
                android:text="Hello World!"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

简单理解上面布局：当触摸产生滚动事件时，NestedScrollView由于配置了【app:layout_behavior="@string/appbar_scrolling_view_behavior"】，CoordinatorLayout 会协调NestedScrollView，在适当时机将滚动事件传递给AppBarLayout，而AppBarLayout则根据子View（Toolbar）的【app:layout_scrollFlags=“scroll”】属性来决定如何响应滚动事件，【scroll】表示当滚动事件产生时，子View（Toolbar）也跟随滚动

效果2

在【效果1】Toolbar跟随手势滚动的基础上，Toolbar带有吸附效果，也就是Toolbar的高度隐藏或者显示超过一半并停止滚动时，会自动完全显示/隐藏
在这里插入图片描述

<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_scrollFlags="scroll|snap"
    app:menu="@menu/main_menu"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="我的应用" />

关键代码：【app:layout_scrollFlags=“scroll|snap”】，表示跟随滚动并且带有吸附效果

效果3

在【效果2】的基础上，不管【NestedScrollView】滚动到任何位置，当手势往下拉的时候，Toolbar总是显示出来；而【效果2】只有当【NestedScrollView】滚动到顶部继续下拉时才会显示Toolbar
在这里插入图片描述

关键代码：【app:layout_scrollFlags=“scroll|snap|enterAlways”】，表示【跟随滚动】【带吸附效果】【不管滚动到任何位置都下拉显示】

效果4：与CollapsingToolbarLayout一起使用

【Collapsing】是折叠的意思，与Toolbar配套使用可以使得Toolbar具有折叠/展开的效果，需要注意以下几点：

  • CollapsingToolbarLayout必须要指定具体的高度，不能是【wrap_content】,否则会出现【app:title】无法显示的问题
  • 【app:layout_scrollFlags】属性要加在【CollapsingToolbarLayout】上而不是【Toolbar】上了
    在这里插入图片描述
<com.google.android.material.appbar.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	
	<com.google.android.material.appbar.CollapsingToolbarLayout
		android:layout_width="match_parent"
		android:layout_height="150dp"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
		app:layout_scrollFlags="scroll|snap|enterAlways">

		<androidx.appcompat.widget.Toolbar
			android:layout_width="match_parent"
			android:layout_height="?attr/actionBarSize"
			android:background="?attr/colorPrimary"
			android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
			app:menu="@menu/main_menu"
			app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
			app:title="我的应用" />
	</com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

效果5

在【效果4】的基础上，任意位置下拉时，Toolbar只显示折叠后的高度，只有滚动到最顶端继续下拉时才会完全显示出来
在这里插入图片描述

关键代码【app:layout_scrollFlags=“scroll|snap|enterAlways|enterAlwaysCollapsed”】；【enterAlwaysCollapsed】表示总是以折叠状态进入，需要与【CollapsingToolbarLayout】一起使用才有意义；

效果6

【效果5】可以看到折叠后的Toolbar不显示【Menu】了，解决这个问题需要在Toolbar上加上另一个属性【app:layout_collapseMode=“pin”】
在这里插入图片描述

<androidx.appcompat.widget.Toolbar
    app:layout_collapseMode="pin"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:menu="@menu/main_menu"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="我的应用" />

效果7

如果在【效果6】的基础上，往上拖动时不想Toolbar完全隐藏，而是始终显示折叠状态下的Toolbar怎么做呢？

  • 修改【CollapsingToolbarLayout】的属性为【app:layout_scrollFlags=“scroll|exitUntilCollapsed”】就可以了
  • 【exitUntilCollapsed】的意思是滚动到Toolbar折叠起来就结束
    在这里插入图片描述
<com.google.android.material.appbar.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">

	<com.google.android.material.appbar.CollapsingToolbarLayout
		android:layout_width="match_parent"
		android:layout_height="150dp"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
		app:layout_scrollFlags="scroll|exitUntilCollapsed">

		<androidx.appcompat.widget.Toolbar
			app:layout_collapseMode="pin"
			android:layout_width="match_parent"
			android:layout_height="?attr/actionBarSize"
			android:background="?attr/colorPrimary"
			android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
			app:menu="@menu/main_menu"
			app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
			app:title="我的应用" />
	</com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

效果8：给Toolbar加个漂亮的背景

由于【CollapsingToolbarLayout】是继承自【FrameLayout】，所以除了Toolbar，还可以添加其他View的，给Toolbar加背景，其实也就是在Toolbar上面加多一个【ImageView】就可以了
在这里插入图片描述

<com.google.android.material.appbar.CollapsingToolbarLayout
	android:layout_width="match_parent"
	android:layout_height="150dp"
	android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
	app:layout_scrollFlags="scroll|exitUntilCollapsed">

	<ImageView
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:scaleType="centerCrop"
		android:src="@drawable/ic_snow_mountain"/>

	<androidx.appcompat.widget.Toolbar
		app:layout_collapseMode="pin"
		android:layout_width="match_parent"
		android:layout_height="?attr/actionBarSize"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
		app:menu="@menu/main_menu"
		app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
		app:title="我的应用" />
</com.google.android.material.appbar.CollapsingToolbarLayout>

效果9：折叠后Toolbar显示纯色背景

可以看到【效果8】加个背景色虽然漂亮，但是有时候我们希望Toolba折叠后显示纯色背景，展开后才显示图片背景

  • 只要在【CollapsingToolbarLayout】上加多一个属性【app:contentScrim】指定Toolbar折叠后的背景色就可以了
    在这里插入图片描述

完整布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_snow_mountain" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"
                app:menu="@menu/main_menu"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:title="我的应用" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/mMainContentView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/mClickButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello World!" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
guangdeshishe
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能
01-04
一、国际惯例，先看下效果图 二、不跟你多bb直接上布局文件代码 <?xml version=1.0 encoding=utf-8?> <LinearLayout 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_
#Android笔记# 超级足球app 开发总结（三）—— CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现两种折叠效果
superyu1992的专栏
03-20 1157
最近利用业余时间，开发了一款基于懂球帝接口数据的足球资讯app，整体的UI也是仿照懂球帝设计的。这是一个比较综合的项目，用到了不少以前没用过的组件和api，而且产生了很多新的开发思路，有些实现方式也是自己琢磨的，所以值得做一些记录，可能还存在瑕疵和可以优化的地方，也希望大家给我多指正。 折叠式布局在app中已经十分常见，一方面它可以方便用户在同一个页面看到尽可能多的内容，另一方面它的动画效果也比...
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史以来的第四次熔断 。 突 。 突突 。。突突突 。。。 很尴尬 ，找不到做 gif 的东西 。怎么办呢 。（找了好久 ，在手机上下载了一个  GIF 动图制作） AppbarLayout 回顾 我记得 16 、17年的时候这个效果在很多 APP 上都有出现 。之前写过demo ，然后一直也没机会在项目中使用 。 实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
Android CoordinatorLayout + AppBarLayout+ToolBar(向上滚动隐藏指定的View)
06-24
实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚动RecylerView,Tab恢复出现.这么做的好处在于,用户能有更多的空间位置去看列表里面的内容.
android5.0协调布局CoordinatorLayout（第二篇CollapsingToolbarLayout效果实现原理讲解）原理
xiatiandefeiyu的博客
11-08 3036
上一篇中已经讲解了CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout之间的关系，这一篇探索一下CollapsingToolbarLayout内部是怎么实现的，不熟悉CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout之间的关系的请先看上一篇文章android5.0协调布局Coordin
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
07-16
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动
一颗烂葱的博客
11-02 6525
一、CoordinatorLayouyCoordinatorLayouy是一个能够协调子布局的容器布局。常见的使用方法如下：1.与AppbarLayout共同包裹Toolbar可以实现滚动隐藏Toolbar和重现Toolbar。2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView实现视差滚动效果2.在CoordinatorLayout下使用Fl
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout讲解
智玲君
11-24 2988
1，CoordinatorLayout协调布局 作用 根据一个layout（Dependency View）的操作来让另一个layout（child View）自动执行相关的操作，该child View具体执行什么相关操作取决于app:layout_behavior属性所指定的behavior类如何编写。 根据概念可以看出，协调布局的使用包含三个部分： 1.Dependency View 2.ch...
Android CoordinatorLayout 实现浮动导航栏效果、常规用法
张雨的博客
09-09 5287
Android CoordinatorLayout+AppBarLayout实现浮动导航栏效果
Android Material Design 系列之 CoordinatorLayout + CollapsingToolbarLayout 开发详解
一名互联网时代苟且偷生的 Android码农
07-28 1250
前言 CoordinatorLayout 遵循 Material 风格，结合 AppbarLayout, CollapsingToolbarLayout 等可产生各种炫酷的效果，本篇博客就将介绍 CoordinatorLayout 的各种酷炫效果。 一、View 介绍 1、CoordinatorLayout 又名协调者布局，它是 support.design 包中的控件。简单来说，CoordinatorLayout 是用来协调其子 view 并以触摸影响布局的形式产生动画效果的一个 super-power
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView
07-16
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView的使用，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
reakingf的博客
11-09 604
CoordinatorLayout CoordinatorLayout相当于一个功能更加强大的FrameLayout，主要有两个用途： 作为顶层布局； 作为协调与子布局之间交互的容器。 通过为子布局指定Behaviors，可以为子布局之间提供不同的交互。CoordinatorLayout的子布局可以通过实现CoordinatorLayout.AttachedBehavior接口为自身添加默认行...
Material Design之CoordinatorLayout实现滑动折叠
热门推荐
zhaojun的博客
07-17 2万+
前段时间PM提了一个需求，实现一种滑动折叠效果，这种效果与掌上英雄联盟的战绩页面很像。经过调研，发现使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout可以轻松实现这一效果。先给大家看一下掌上英雄联盟的效果，大家可以先确定是不是自己想要的效果（PS：这战绩真不是我打的，我发誓。。。）。 一.布局文件 ...
CoordinatorLayout+AppbarLayout+CollapsingToolbarLayout的使用以及配合使用实现Toolbar的折叠效果
chenkaisq的博客
03-20 6720
1.CoordinatorLayout
关于使用CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout达到的吸顶效果。
最新发布
weixin_72827485的博客
07-26 295
里面的CollapsingToolbarLayout是用来放你不想被吸顶的布局的，里面可以放多布局，自己替换就好了，CollapsingToolbarLayout下面的TextView就是准备吸顶的控件，也可以是多布局。app:layout_scrollFlags="scroll|exitUntilCollapsed"，这个属性不要忘记加了！目前市面上大多数APP基本都设计到吸顶效果，网上找了一些资料，做下记录，可能你会遇到没办法达到效果的情况，不要着急，好好看看布局文件的代码，一定可以实现的。
Android开发实战手把手教你实现一个折叠式布局
门心叼龙的专栏
10-29 6131
在上一篇文章我们实现了一个头部固定的ExpandedListView,今天需要在他的头部加一个背景图片，默认状态下他处于展开状态，往上滑的时候背景图片逐渐的折叠起来，往下滑的时候背景图片慢慢的展开效果图如下： 图1 有人可能会说这不就是折叠式布局吗？是的，这就是Android 5.0给我们提供的材料设计库中的CoordinateLayout就是解决这个问题的，使用CoordinateLayout来...
【Android+Kotlin】自适应CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout,Palette与FloatingActionButt
qq_38304672的博客
10-12 1457
扉 1. 初级样例传送门 2. 细节注意 androidx.coordinatorlayout.widget.CoordinatorLayout（协调者布局）包裹的内容 AppBarLayout如果我们想要实现折叠的ActionBar效果 CollapsingToolbarLayout主要是实现折叠布局的，需要作为AppBarLayout的子View才会有效 其余各种属性详解 1）contentScrim ： 当CollapsingToolbarLayout完全折叠后的背景颜色。 通常设置为：app:
CoordinatorLayout+ AppBarLayout+ CollapsingToolbarLayout
qq_34606099的博客
11-18 4573
主要记录一下在使用这几个组合控件中遇到的一些小问题。 CollapsingToolbarLayout是只能作为AppBarLayout的子布局，一般会加toolbar和其它的布局，反正是一个FrameLayout，随便加。 想要当前控件侵入到状态栏上，布局必须支持android:fitsSystemWindows=“true”。 想要上面这个属性生效还必须设置系统状态栏： @android:color/transparent 当设置透明就会默认把布局撑上去，上面这个是撑上去之后预留出状态栏的空间。 来到了C
CoordinatorLayout,AppbarLayout,CollapsingToolbarLayout滑动效果
xdy1120的博客
05-10 1403
CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。 作为最上层的View 作为一个 容器与一个或者多个子View进行交互 AppBarLayout 继承与LinearLayout的，默认 的 方向 是Vertical。 appb...
android appbarlayout 监听滚动,Android之解决CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+RecyclerV...
06-06
好的，我知道你的问题了。针对你的问题，可以通过如下代码实现AppBarLayout的滚动监听： ```java AppBarLayout appBarLayout = findViewById(R.id.appBarLayout); appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { // 在这里处理滚动事件 } }); ``` 其中，`addOnOffsetChangedListener` 方法可以添加滚动监听器，该监听器中的 `onOffsetChanged` 方法中可以处理 AppBarLayout 的滚动事件。 关于CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 和 RecyclerView 的结合使用，可以参考以下代码： ```xml <androidx.coordinatorlayout.widget.CoordinatorLayout android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" android:src="@drawable/image" app:layout_collapseMode="parallax" /> <com.google.android.material.toolbar.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> ``` 其中，`CoordinatorLayout` 是一个可以协调多个子视图之间交互的布局容器。`AppBarLayout` 是一个垂直的 LinearLayout，可以包含一个或多个子视图，用于实现应用程序栏。`CollapsingToolbarLayout` 是一个具有可折叠效果的 Toolbar 布局。`RecyclerView` 是一个可以滚动的列表视图。 以上代码实现了一个具有可折叠效果的 Toolbar 和一个可以滚动的列表视图。在 `CollapsingToolbarLayout` 中的 `ImageView` 和 `Toolbar` 都有一个 `layout_collapseMode` 属性，用于指定它们的行为。`ImageView` 的 `layout_collapseMode` 属性设置为 `parallax`，表示在滚动时具有视差效果；`Toolbar` 的 `layout_collapseMode` 属性设置为 `pin`，表示在折叠时固定在顶部。 `RecyclerView` 的 `layout_behavior` 属性设置为 `appbar_scrolling_view_behavior`，表示它是一个可以与 `AppBarLayout` 协同工作的滚动视图。这样，`AppBarLayout` 就可以根据 `RecyclerView` 的滚动情况来调整自身的显示状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值