CoordinatorLayout|CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout使用详解
前言
在Android开发过程中,我们经常会遇到一些标题栏显示/隐藏 十分炫酷的效果,在Android设计库中,有那么几个控件CoordinatorLayout
,AppBarLayout
与CollapsingToolbarLayout
,也能迅速实现标题栏的一些特效,那么今天就来做个简单的介绍吧。
今天涉及知识点:
- 依赖库
-
CoordinatorLayout
,AppBarLayout
与CollapsingToolbarLayout
简单介绍
2.1 CoordinatorLayout
2.2 AppBarLayout
2.3 CollapsingToolbarLayout
2.4 滚动控件
2.5 各控件之间的关系 - 标题栏使用前环境搭建
3.1 外部环境
3.2 实现标题栏重心 - AppBarLayout使用详解
4.1 AppBarLayout直接子view显隐
4.2 AppBarLayout直接子view动效种类
4.3 AppBarLayout事件处理 - CollapsingToolbarLayout使用详解
5.1 折叠标题
5.2 内容纱布
5.3 状态栏纱布
5.4 视差滚动
5.5 将子View位置固定
1.gif 2.gif 3.gif 4.gif 5.gif 6.gif 7.gif
文章图片
8.gif 9.gif 更多精彩内容,请关注微信公众号 "Android进击",大家一起来学习进步吧
一. 依赖库
CoordinatorLayout
,AppBarLayout
与CollapsingToolbarLayout
的使用需要在项目中添加如下依赖:implementation 'com.google.android.material:material:1.2.0'
二. CoordinatorLayout,AppBarLayout与CollapsingToolbarLayout简单介绍 我们经常提到的应该是
AppBarLayout
了,但是凡是介绍到AppBarLayout
使用的时候,又会顺便讲讲CoordinatorLayout
和CollapsingToolbarLayout
,所以很多同学都疑惑,我是看AppBarLayout
使用啊,你老是讲CoordinatorLayout
和CollapsingToolbarLayout
干啥,真让人懵逼。那么下面就来简单讲讲它们之间的关系。2.1 CoordinatorLayout
CoordinatorLayout
本质上是一个ViewGroup
,其具备通过Behavior 协调子View的功能。2.2 AppBarLayout
AppBarLayout
是一个垂直分布的LinearLayout
,其可以定制当某个滚动View的滚动手势发生变化时,AppBarLayout
内部的子view发生连带动作。即根据某个滚动view的变化来使AppBarLayout
内部的子view发生变化。2.3 CollapsingToolbarLayout
CollapsingToolbarLayout
实质是一个FrameLayout
,其是作为标题栏外部布局用于控制标题栏效果的。实质是对标题栏效果的进一步增强,若你标题栏需要实现更加炫酷的效果,你可以用此布局来包装你的标题栏
控件,但需要注意的是它是作为AppBarLayout
的直接子view使用。2.4 滚动控件 【CoordinatorLayout|CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout使用详解】一般指
NestedScrollView
,RecyclerView
等可滑动控件。2.5 各控件之间的关系
推荐阅读
- CoordinatorLayout|CoordinatorLayout + AppBarLayout + RecyclerView,滚动到最底部延迟的坑
- 一文彻底搞懂|一文彻底搞懂 Design 设计的 CoordinatorLayout 和 AppbarLayout 联动,让 Design 设计更简单~
- CoordinatorLayout+RecyclerView使用遇到的问题
- CoordinatorLayout问题汇总
- 3.1.3_CoordinatorLayout原理
- 理解RecyclerView(七)—RecyclerView配合使用CoordinatorLayout及Behavior的嵌套滑动机制
- 《Android进阶之光》笔记|《Android进阶之光》Design Support Library常用控件(二)(CoordinatorLayout)
- UI|嵌套滑动--NestedScroll-项目实例(淘宝首页缺陷),及CoordinatorLayout 和 AppbarLayout 联动原理
- CoordinatorLayout实现自定义头条卡住的解决方案
- 初探CoordinatorLayout+AppBarLayout