Android之使用CoordinatorLayout相关布局实现标题栏的滑动折叠效果

最新推荐文章于 2025-04-06 11:44:03 发布

我思故你不在

最新推荐文章于 2025-04-06 11:44:03 发布

阅读量5.4k

点赞数 3

分类专栏： Android之控件文章标签： Android开发 CoordinatorLayout 滑动效果

本文链接：https://blog.youkuaiyun.com/yuncaidaishu/article/details/89192265

版权

本文介绍了如何使用CoordinatorLayout及其配合布局，如AppBarLayout、CollapsingToolbarLayout、NestedScrollView等，来实现Android应用标题栏的滑动折叠效果。详细解释了各个布局和控件的作用，包括CoordinatorLayout作为顶级父布局，AppBarLayout响应滑动事件，CollapsingToolbarLayout实现折叠效果，NestedScrollView作为滑动子View，以及FloatingActionButton的添加。通过构建一个Demo，展示了具体实现步骤。

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

前言：本篇博文不会讲的太过深奥，通过实现一个Demo来讲解相关的知识，对于知识点背后的实现原理并没有去深究，适合初次接触CoordinatorLayout相关布局的读者。

一：为什么选择CoordinatorLayout

普通的布局，诸如LinearLayout（线性布局），它里面的子布局和子控件之间是没有关联、互不影响的，比如在布局里定义了一个ListView，当滑动ListView的时候并不会对其他控件的位置和行为造成影响，标题栏控件依旧在最顶端。这样的布局就显得很平庸，毫无特色，因此，Android系统引入了CoordinatorLayout一系列相关布局，目的就是使APP页面产生各种炫酷的效果。

二：CoordinatorLayout相关布局

光靠一个CoordinatorLayout布局是完不成各种花里胡哨的页面布局的，它需要配合其他相关布局来达到效果，这些布局有AppbarLayout、CollapsingToolbarLayout等，还有一些相关的控件比如NestedScrollView、FloatingActionButton等。

1.CoordinatorLayout

CoordinatorLayout又叫协调者布局，它是顶级的父布局，继承自FrameLayout，其他所有的布局或控件都是定义在它内部的。定义在CoordinatorLayout布局内的子布局或控件能够相互影响。它是support.design包中的控件，所以使用的时候要导入compile ‘com.android.support:design:xxx’包（xxx代表版本号）。

2.AppBarLayout

AppBarLayout布局继承自LinearLayout，所以它的默认布局方向是垂直的。它的作用就是：当CoordinatorLayout布局内的某个可滑动子View（实现了NestedScrollView机制的View，比如RecyclerView和NestedScrollView等，ListView不行）发生滑动事件时，定义在AppBarLayout布局内的子View能够实现某种动作（比如滑动，折叠，隐藏等等）。方法就是在子View的属性中添加一句：app：layout_scrollFlags="xxx"。xxx代表滑动的方式，有5个选项（用RecyclerLayout做滚动子View，标题栏ToorBar做AppBarLayout内的子View举例说明）：

（1）scroll：标题栏会跟RecyclerView一起滑动（必选，不然标题栏就不会滑动）。

（2）enterAlways：只要手指向下划滑动RecyclerView，标题栏就会马上跟着滑动出现；只要手指向上划滑动RecyclerView，标题栏就会马上跟着滑动消失。

（3）exitUntilCollapsed：首先给标题栏设置一个最小高度，当手指向上滑动RecyclerView时，RecyclerView先不会滑动，而是先滑动标题栏，当标题栏滑到设置的最小高度的时候才会滑动RecyclerView，当RecyclerView滑到底的时候再滑动剩余的标题栏，最后标题栏全部消失。

（4）enterAlwaysCollapsed：需要配合enterAlways一起使用。同样给标题栏设置一个最小高度，当手指向下滑动RecyclerView时，标题栏会先滑动出现，当滑动到最小高度时才滑动RecyclerView，当RecyclerView滑到顶的时候再滑动剩下的标题栏，最后标题栏全部出现。

（5）snap：当标题栏滑动到一定程度（没有完全出现或消失）的时候，即使停止滑动标题栏仍然会完全出现或消失。

3.CollapsingToolbarLayout

该布局继承自FrameLayout，作用是对标题栏（Toorbar）进行再次包装，可以实现折叠效果，CollapsingToolbarLayout布局内的子视图不仅仅可以是标题栏，还可以添加一张图片（ImageView控件）。注：当标题栏被CollapsingToolbarLayout布局封装过后，想要更改标题栏的title需要通过调用CollapsingToolbarLayout的setTitle（）方法。同时app：layout_scrollFlags="xxx"这个属性被设置在CollapsingToolbarLayout的属性上。

4.NestedScrollView

该控件是ScrollView的升级版，它们都能实现滑动效果，区别在于NestedScrollView支持嵌套滑动（在NestedScrollView内嵌套一个RecyclerView控件）。该控件就是我们Demo中要用到的滑动子View，当NestedScrollView产生滑动效果时，AppBarLayout内的子View就会做出相应动作。注：NestedScrollView可以用RecyclerLayout代替，不能用ListView（RecyclerLayout相当于ListView的升级版）。

5.FloatingActionButton

FloatingActionButton就是一个按钮控件，其本质是一个ImageVeiw。有一点要注意，Meterial Design引入了Z轴的概念，就是所有的view都有了高度，他们一层一层贴在手机屏幕上，而FloatingActionButton的Z轴高度最高，它贴在所有view的最上面，没有view能覆盖它。

6.TabLayout

TabLayout又称表格布局，主要用于页面的顶部导航栏，此处不进行过多说明，知道它是干嘛的就行。

三：构建一个Demo

上面需要用到的知识点都简单介绍了，接下来通过一个Demo来具体实现效果