IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 『Material Design』CollapsingToolbarLayout可折叠标题栏 -> 正文阅读

[移动开发]『Material Design』CollapsingToolbarLayout可折叠标题栏

👨?🎓作者简介:一位喜欢写作,计科专业大三菜鸟

🏡个人主页:starry陆离

如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

1.可折叠标题栏

可折叠标题栏需要借助CollapsingToolbarLayout这个工具。

CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,由DesignSupport库提供。

需要注意的是:

  • CollapsingToolbarLayout不能独立存在
  • 它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。
  • 而AppBarLayout又必须是CoordinatorLayout的子布局;

因此可以通过下面这个图直观的了解他们的层级关系。

image-20221014183212863

2.布局设计

布局的设计分为

  • 标题部分
  • 内容部分

标题部分

首先我们来看标题部分,这里我们设计是完全遵循刚刚的规则的,最外层是CoordinatorLayout,中间是AppBarLayout,最里层是CollapsingToolbarLayout。并且我们制定了AppBarLayout的高度是250dp,因此只有上面的那小部分是蓝色的。

在CollapsingToolbarLayout中有几个属性需要说明一下,分别是

  • contentScrim:指定CollapsingToolbarLayout趋于折叠状态的背景色
  • layout_scrollFlags:scroll表示CollapsingToolbarLayout会随着内容部分滚动一起滚动,exitUntilCollapsed表示CollapsingToolbarLayout完成折叠后保留在揭秘那上,不会移出屏幕。

image-20221014184107813

然后在CollapsingToolbarLayout放置一个背景图片和一个ToolBar。

这里用到了layout_collapseMode属性

  • parallax:表示折叠的过程中产生一定的错位偏移
  • pin:表示折叠的过程中位置始终保持不变

注意这里控件不要选错了哦,是androidx.appcompat.widget.Toolbar

image-20221014195723661

内容部分

内容部分就简单了。由一个NestedScrollView嵌套一个LinearLayout,在LinearLayout中存放我们的内容。

image-20221014185729321

为了美化效果,在线性布局中,使用MaterialCardView,然后放置一个文本控件显示内容。

image-20221014190213682

至此布局部分编写完毕。

3.代码部分

代码部分比较简单,分别获取各个控件的实例,然后设置图片资源,文本资源即可。实际开发当然不是这么简单粗暴,这些数据应该从上一个界面获取,或者网络加载请求数据。

除此之外我还通过setDisplayHomeAsUpEnabled()设置左上角的返回按钮显示。并用onOptionsItemSelected()方法监听返回事件

getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示android.R.id.home

Ad_003image-20221014200458189

4.充分利用系统状态栏

让背景图和系统状态栏融合,需要借助Android:fitsSystemWindows这个属性来实现。

将控件的android:fitsSystemWindows属性指定成true,就表示该控件会出现在系统状态栏里。现在我们要让图片出现在状态栏里,除了给ImageView设置Android:fitsSystemWindows属性,它的所有父控件均需要设置。

image-20221014203334205

除此之外我们还需要将状态栏设置为透明的。

在themes文件中定义一款主题样式CollapseTheme,它继承自AppTheme中的所有特性,并在此基础上添加了状态栏颜色设置透明

image-20221014203642971

在AndroidManifest.xml中为CollapseActivity使用这款主题

image-20221014203859621

再来看一下效果,nice!!!

Ad_003

5.参考资料

Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现(充分利用系统状态栏空间) - 简书 (jianshu.com)

6.Gitee源码

Android_Java_Review: 学习–代码即笔记 (gitee.com)

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-11-05 00:39:30  更:2022-11-05 00:42:03 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 0:02:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码