android开发：CoordinatorLayout配合AppBarLayout实现炫酷悬停标题栏

最新推荐文章于 2025-05-28 10:50:24 发布

可乐猫哈

最新推荐文章于 2025-05-28 10:50:24 发布

阅读量6.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： android design控件

本文链接：https://blog.csdn.net/qq_39027256/article/details/102689684

本文详细介绍了如何在Android开发中利用CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout实现炫酷的悬停标题栏效果。通过调整layout_scrollFlags属性，可以实现不同滚动行为，如普通滚动、进入始终、弹性收缩等。文中还提供了XML代码示例和运行效果分析。

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

首先介绍上述几个控件在使用的时候的注意点：

CoordinatorLayout：

是一个类似FrameLayout的布局，它是根布局

AppBarLayout：

是一个vertical的LinearLayout，他必须严格地是CoordinatorLayout的直接View，不然他一点作用都发挥不出来。

CollapsingToolbarLayout:

它是AppBarLayout下的子控件，CollapsingToolbarLayout可以看成一个可折叠的toolbar，里面包含一个imageView和一个toolbar当它缩到最小的时候就是一个普通的toolbar，它可以实现：随着滑动，图片逐渐缩小最后只剩下toolbar。必须在CollapsingToolbarLayout设置layout_scrollFlags属性才可以跟随其他view缩放，至于它的属性后面介绍。

它内部的子View一般都要加上属性：app:layout_collapseMode=""，常用的是parallax，pin。parallax是视差滚动，用在imageView, pin是固定，用在toolbar。

内容控件：

我们需要和AppBarLayout同一级下添加一个内容控件，并添加

app:layout_behavior="@string/appbar_scrolling_view_behavior"

他们的层次关系如下图（图是网上扣来的）

先看下xml代码：

<?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"
    android:fitsSystemWindows="true"
    tools:context="com.ganshenml.slideholdsmoothdemo.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:l