CoordinatorLayout+AppBarLayout顶部栏吸顶效果

最新推荐文章于 2025-04-27 10:00:00 发布
最新推荐文章于 2025-04-27 10:00:00 发布
阅读量7k 收藏 12
点赞数 3
分类专栏： Android程序 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jason_Lee155/article/details/117233906
版权

看需求/效果

如果要实现如下效果，顶部标题栏随着上滑隐藏，且能显示缩略文字标题，那么就要用到CoordinatorLayout+几个layout了。

控件简介

CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。

  • 作为最上层的View
  • 作为一个 容器与一个或者多个子View进行交互

Google官方地址

CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout; As a container for a specific interaction with one or more child views.

常见结合体-AppBarLayout：

它是继承与LinearLayout的，默认的方向是Vertical：

appbarLayout的滑动flag：

appbarLayout的滑动flag
类型说明
int SCROLL_FLAG_ENTER_ALWAYS((entering) / (scrolling on screen))下拉的时候，这个View也会跟着滑出。
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED另一种enterAlways，但是只显示折叠后的高度。
nt SCROLL_FLAG_EXIT_UNTIL_COLLAPSED((exiting) / (scrolling off screen))上拉的时候，这个View会跟着滑动直到折叠。
int SCROLL_FLAG_SCROLL这个View将会响应Scroll事件
int SCROLL_FLAG_SNAP在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置

我们可以通过两种方法设置这个Flag：

  • 方法一：setScrollFlags(int)
  • 方法二：app:layout_scrollFlags="scroll|enterAlways"

AppBarLayout必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。

效果图一：

布局代码:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
 
    </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"/>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

思路分析：

注意一点，那个可滑动的 View 不能是 ListView，ScrollView 这种旧包下的控件，否则也是不起作用的。

layout_scrollFlags="scroll|enterAlways，前面已经说到layout_scrollFlags=scroll的时候，这个View会跟着滚动事件响应，layout_scrollFlags=“enterAlways”的时候这个View会响应下拉事件。所以呈现出来的结果应该是我们在上拉的时候toolBar会隐藏，下拉的时候toolBar会出来；如果当我们的toolBar等于app:layout_scrollFlags="scroll|snap"的时候 ，layout_scrollFlags=scroll的时候，这个View会跟着滚动事件响应，layout_scrollFlags=“snap”的时候 在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置。具体就自己研究了。

常见结合体-ViewPager：

布局代码：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">
 
        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="?attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@drawable/tangyan"
                   app:layout_scrollFlags="scroll|enterAlways"/>
 
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </com.google.android.material.appbar.AppBarLayout>
 
 
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

思路分析:

其实相对于前一个例子，只是把摆放RecyclerView的位置替换成ViewPager而已，为了有页面导航器的效果，再使用TabLayout而已，而TabLayout在我们滑动的时候最终会停靠在 最顶部，是因为我们没有设置其layout_scrollFlags，即TabLayout是静态的。

运行以后，即可看到以下的结果：

至于viewPager+TabLayout的使用，又是另外一个话题，具体可以搜索很多类似的博客。

常见结合体-CollapsingToolbarLayout：

简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能

  • Collapsing title（可以折叠的标题）
  • Content scrim（内容装饰），当我们滑动的位置到达一定阀值的时候，内容装饰将会被显示或者隐藏
  • Status bar scrim（状态栏布）
  • Parallax scrolling children，滑动的时候孩子呈现视觉特差效果
  • Pinned position children，固定位置的孩子
int COLLAPSE_MODE_OFFThe view will act as normal with no collapsing behavior.(这个 View将会呈现正常的结果，不会表现出折叠效果）
int COLLAPSE_MODE_PARALLAXThe view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.（在滑动的时候这个View 会呈现出视觉特差效果 ）
int COLLAPSE_MODE_PIN

The view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.（当这个View到达 CollapsingToolbarLayout的底部的时候，这个View 将会被放置，即代替整个CollapsingToolbarLayout）

我们有两种方法可以设置这个常量：

方法一：在代码中使用这个方法

setCollapseMode(int collapseMode)

方法 二：在布局文件中使用自定义属性

app:layout_collapseMode="pin"

结合ViewPager的视觉特差

布局代码：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    android:fitsSystemWindows="true">
 
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                app:layout_collapseMode="parallax"/>
 
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
 
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </com.google.android.material.appbar.AppBarLayout>
 
    <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
    </androidx.viewpager.widget.ViewPager>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

思路解析:

  • 结构图如图片所示，先说明CollapsingToolbarLayout的变化：

CollapsingToolbarLayout里面 包含ImageView 和ToolBar，ImageView的app:layout_collapseMode=”parallax”，表示视差效果，ToolBar的 app:layout_collapseMode=”pin”，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示

  • 接着说明TabLayout的变化：

从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的时候消失不见

另外：

如果我们仅仅 改变CollapsingToolbarLayout的app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"的时候，其它代码不变，运行以后，我们将可以看到如下效果图

总结

感谢很多文章的帮助，同时更多复杂的应用需要自行查询官网使用。这里也只是提供大致思路。

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
reakingf的博客
11-09 777
CoordinatorLayout CoordinatorLayout相当于一个功能更加强大的FrameLayout，主要有两个用途： 作为顶层布局； 作为协调与子布局之间交互的容器。 通过为子布局指定Behaviors，可以为子布局之间提供不同的交互。CoordinatorLayout的子布局可以通过实现CoordinatorLayout.AttachedBehavior接口为自身添加默认行...
CoordinatorLayout + AppBarLayout + NestScrollView 向上滑动卡顿问题解决方案
joye123的博客
11-07 1万+
问题描述在商品详情页使用CoordinatorLayout + AppBarLayout + NestScrollView布局组合展示。当向上滚动时，不会产生Fling效果，每当手指离开屏幕，布局就会停止滚动。当向下滚动时没有该问题。问题分析嵌套滑动的原理为由NestScrollView接收触摸事件并反馈到父视图，产生联动效果。猜测没有产生Fling效果的原因有可能是在NestScrollView
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
07-16
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
深入剖析 Android AppBarLayout：从源码洞悉其工作原理
最新发布
Android开发领域创作者
04-27 787
是一个垂直的，它继承自ViewGroup，主要用于实现 Material Design 风格的应用栏布局。它可以包含多个子视图，并且能够根据滚动事件来改变这些子视图的状态，例如隐藏、显示、缩放等。通常与结合使用，通过Behavior机制实现与其他滚动视图（如等）的协同工作。的布局测量过程基于父类的测量机制，并在此基础上增加了对滚动标记的处理。在测量过程中，会依次测量每个子视图，并根据子视图的滚动标记和当前的滚动状态来调整其测量结果。可以通过设置滚动标记和结合Behavior。
Android CoordinatorLayout+AppBarLayout顶部栏吸顶效果的实现
UrasakiNakajima的博客
05-26 5996
CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。作为最上层的View作为一个容器与一个或者多个子View进行交互常见结合体-AppBarLayout：它是继承与LinearLayout的，默认的方向是Vertical：appbarLayout的滑动flag：我们可以通过两种方法设置这个Flag：
关于使用CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout达到的吸顶效果。
weixin_72827485的博客
07-26 520
里面的CollapsingToolbarLayout是用来放你不想被吸顶的布局的，里面可以放多布局，自己替换就好了，CollapsingToolbarLayout下面的TextView就是准备吸顶的控件，也可以是多布局。app:layout_scrollFlags="scroll|exitUntilCollapsed"，这个属性不要忘记加了！目前市面上大多数APP基本都设计到吸顶效果，网上找了一些资料，做下记录，可能你会遇到没办法达到效果的情况，不要着急，好好看看布局文件的代码，一定可以实现的。
CoordinatorLayout+AppBarLayout 提供最佳浏览体验
你若盛开，蜜蜂自来
07-24 1万+
博主声明： 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。 本文首发于此 博主：威威喵|博客主页：https://blog.csdn.net/smile_running 感受 Material Design UI 魅力，你不能错过的Material Design 全系列文章： Material Design 之一 Bott...
CoordinatorLayout+AppBarLayout使用（替代ScrollView 避免滑动事件冲突）
qq_30107007的博客
01-03 6228
CoordinatorLayout+AppBarLayout使用（替代ScrollView 避免滑动事件冲突） 入坑部分 上周拿到产品需求，看了看需要悬浮置顶效果？？？？？？？？？？？？？ 这嘛很简单。 SmartRefreshLayout+NestedScrollView+RecyclerView搞定 恭喜你入坑了(NestedScrollView+RecyclerView事件滑动冲突) 我们...
详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能
08-25
Android 使用 CoordinatorLayout+AppBarLayout 实现拉伸顶部图片功能 Android 中实现拉伸顶部图片功能是非常常见的需求，今天我们将使用 CoordinatorLayout+AppBarLayout 来实现这个功能。CoordinatorLayout 是 ...
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史...实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
淘宝、京东首页浏览效果、tab悬浮吸顶
09-01
2. **AppBarLayout**：这是`CoordinatorLayout`的一个子类，通常用于构建顶部应用栏。它可以与`CollapsingToolbarLayout`配合使用，实现类似抽屉效果，当向下滚动时，应用栏可以平滑地收缩或扩展。在这个案例中，它...
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+banner
06-29
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+banner
Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
热门推荐
【博客地址迁移到】：https://zhengxiaoyong.com
07-12 3万+
ok，今天继续更新Material Design系列！！！ 废话不说，先看看效果图吧： 好了，现在来讲讲上图是怎么实现的吧！讲之前先讲讲几个控件： CoordinatorLayout  该控件也是Design包下的一个控件，然而这个控件可以被称为Design包中最复杂、功能最强大的控件：CoordinatorLayout。为什么这样说呢？原因是：它是组织它众多子
CoordinatorLayout + AppBarLayout
qq_39438055的博客
01-30 305
CoordinatorLayout + AppBarLayout
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout讲解
智玲君
11-24 3146
1，CoordinatorLayout协调布局 作用 根据一个layout（Dependency View）的操作来让另一个layout（child View）自动执行相关的操作，该child View具体执行什么相关操作取决于app:layout_behavior属性所指定的behavior类如何编写。 根据概念可以看出，协调布局的使用包含三个部分： 1.Dependency View 2.ch...
coordinatorlayout_一篇文章学会Coordinatorlayout+AppbarLayout
weixin_39647787的博客
11-30 404
点击上方蓝字关注??来源： 奔跑吧李博https://www.jianshu.com/p/cd93da2b7a24前言现如今，折叠式布局在App中相当常见，给人一种科技感，充满良好的用户体验。Coordinatorlayout+AppbarLayout+CollapsingToolbarLayout这三个臭皮匠联合起来用千变万化，啊，我重来没有见过如此超凡脱俗之效果。网上大多来不来就...
Material Design CoordinatorLayout+AppBarLayout+Toolbar
tony499074462的博客
07-11 503
1.CoordinatorLayout 简介 CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果 它作为最上层的View 它作为一个 容器与一个或者多个子View进行交互 2.AppBarLayout 它是继承与LinearLayo...
CoordinatorLayout+AppBarLayout实现联动
snailpeople的博客
08-31 760
CoordinatorLayout简介 CoordinatorLayout is a super-powered FrameLayout. CoordinatorLayout is intended for two primary use cases: 1.As a top-level application decor or chrome layout 2.As a cont
在HAL库中HAL_TIM_PeriodElapsedCallback这是什么函数
04-03
### HAL_TIM_PeriodElapsedCallback 函数功能与用法 #### 1. 功能描述 `HAL_TIM_PeriodElapsedCallback` 是 STM32 HAL 库中的回调函数，用于处理定时器周期结束事件。当定时器的计数值达到设定的最大值并触发更新事件时，该回调函数会被调用[^1]。 此函数的主要作用是在中断服务程序中被自动调用，允许用户在不修改底层驱动的情况下实现自定义逻辑。它通常用来响应特定的时间间隔到达后的动作，例如刷新数据、切换状态或其他实时任务调度[^2]。 --- #### 2. 定义形式 以下是 `HAL_TIM_PeriodElapsedCallback` 的典型定义： ```c void HAL_TIM_PeriodElapsedCallback(TIM_HandleTypeDef *htim) { // 用户可以在此处编写自己的代码来处理定时器周期溢出事件 } ``` - **参数说明** - `TIM_HandleTypeDef *htim`: 这是一个指向定时器句柄结构体的指针，包含了配置和运行状态的信息。通过这个句柄，可以在回调函数内部访问当前定时器的相关属性或重新设置其行为。 --- #### 3. 使用方法 为了使能这一回调机制，需完成以下几个步骤： 1. 初始化定时器：利用 `HAL_TIM_Base_Init` 或其他初始化接口完成硬件资源分配以及基础参数配置（如预分频系数、计数器周期等）。 2. 启动带中断模式的定时器：调用 `HAL_TIM_Base_Start_IT(htim)` 来开启定时器及其关联的中断请求。这一步会启用相应的中断线，并注册默认的中断服务例程(ISR)[^1]。 3. 实现回调函数：根据实际需求重写 `HAL_TIM_PeriodElapsedCallback` 方法的内容。每当发生一次完整的计数循环后，即进入下一轮计数前，都会跳转到此处执行指定的操作[^3]。 4. 清除标志位/中断挂起比特 (可选): 如果需要手动管理某些特殊类型的干扰信号，则可能还需要借助宏指令如 __HAL_TIM_CLEAR_IT() 对应位置零操作。 --- #### 示例代码片段 下面展示了一个简单的应用案例——每秒钟点亮 LED 一次: ```c #include "stm32f4xx_hal.h" // 假设已正确设置了 GPIO 和 TIM 句柄 htim2 uint8_t led_state = 0; void HAL_TIM_PeriodElapsedCallback(TIM_HandleTypeDef *htim){ if(htim->Instance == TIM2){ // 判断是否来自 TIM2 中断 if(led_state == 0){ HAL_GPIO_WritePin(GPIOA, GPIO_PIN_5, GPIO_PIN_SET); // 打开LED led_state = 1; } else { HAL_GPIO_WritePin(GPIOA, GPIO_PIN_5, GPIO_PIN_RESET); // 关闭LED led_state = 0; } } } int main(void){ /* MCU Initialization */ // 配置GPIO PA5作为输出端口 // 设置 TIM2 参数 TIM_HandleTypeDef timHandle; timHandle.Instance = TIM2; timHandle.Init.Prescaler = 8399; // 设定预分频值使得频率接近1KHz timHandle.Init.CounterMode = TIM_COUNTERMODE_UP; timHandle.Init.Period = 9999; // 计数至最大值约等于一秒 timHandle.Init.ClockDivision = TIM_CLOCKDIVISION_DIV1; if(HAL_TIM_Base_Init(&timHandle) != HAL_OK){ Error_Handler(); } // 开启 IT 模式的定时器 HAL_TIM_Base_Start_IT(&timHandle); while(1); } ``` 上述例子展示了如何结合外部设备控制形成规律性的脉冲序列。 ---
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值