第2章 Material Design
依据2017年首版完整目录覆盖17个节点:把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout
第2章 Material Design
本页依据刘望舒《Android进阶之光》独立重构,不复制原文。版本锁定电子工业出版社2017年7月首版、492页、ISBN 9787121315305;正式结构为11章、190个章/节/小节节点。
原书处在Android 5.0至7.0、Java与Support Library时代,包含AsyncTask、Volley、otto、RxJava早期版本、ButterKnife、Dagger 2和Data Binding。课程先复现历史机制,再以AndroidX、协程/Flow、现代架构组件作迁移对照。
学习目标
- 能解释“第2章 Material Design”全部17个正式节点的输入、线程、生命周期与可观察结果。
- 能实现“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”的最小可运行切片并保存版本、源码、样本和日志。
- 能区分正确结果、框架便利、隐藏成本和版本差异,并用层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。
- 能设计反例推翻“把Material Design降为颜色和阴影皮肤,忽略信息层级、运动因果、输入反馈与可访问性”,写出2017年机制到现代Android的迁移与回退条件。
从可观察行为开始
↡以表面、层级和运动帮助用户理解界面结构与操作结果的设计模型、↡让子View通过Behavior协同滚动和位置变化的容器、↡短暂展示操作结果并可提供单一恢复动作的底部反馈组件、↡为文本输入提供浮动标签、错误提示和计数等外层能力的组件、↡声明CoordinatorLayout子项响应依赖与嵌套滚动的协作规则构成本页的分析词汇。先预测一次输入会穿过哪些对象、线程、队列、View或语言边界,再运行正常与失败样本;没有版本和原始证据的“源码原理”不能复查。
本单元主线是把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout。交互管线逐项选择目录节点,反例实验切换正常、配置变化、线程竞争、所有者销毁和版本漂移,证据门要求目录、行为、线程、生命周期与迁移全部通过。
权威目录逐节点映射
第2章 Material Design
章节合同 1/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1 Material Design概述
主题边界 2/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.1 核心思想
实现检查点 3/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.2 材质与空间
实现检查点 4/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.3 动画
实现检查点 5/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.4 样式
实现检查点 6/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.5 图标
实现检查点 7/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.6 图像
实现检查点 8/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.1.7 组件
实现检查点 9/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2 Design Support Library常用控件详解
主题边界 10/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2.1 Snackbar的使用
实现检查点 11/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2.2 用TextInputLayout实现登录界面
实现检查点 12/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2.3 FloatingActionButton的使用
实现检查点 13/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2.4 用TabLayout实现类似网易选项卡的动态滑动效果
实现检查点 14/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2.5 用NavigationView实现抽屉菜单界面
实现检查点 15/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.2.6 用CoordinatorLayout实现Toolbar隐藏和折叠
实现检查点 16/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
2.3 本章小结
主题边界 17/17。 把本节点放进“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”主线:先确定输入与所有者,再追踪线程、View、网络、对象或源码调用,最后以层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图验收。只记API和类名不能证明掌握。
最小实现与边界
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/action"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>实现后用固定输入记录输出、线程名、生命周期、异常和资源释放。再构造错误输入、取消、旋转、后台切前台及低版本设备,验证便利框架没有隐藏所有权问题。
data class AndroidProbe(
val apiLevel: Int,
val ownerActive: Boolean,
val callbackThread: String,
val resultStable: Boolean
)
check(probe.ownerActive && probe.resultStable)证据解释
第一份证据是行为基线。固定Android版本、依赖版本、构建类型、输入数据和页面生命周期,完整记录“把材质、空间、动画、样式、图标、图像与组件原则落实到Snackbar、TextInputLayout、FAB、TabLayout、NavigationView和CoordinatorLayout”从入口到结果的顺序。除了成功输出,还要保存回调线程、对象身份、队列或订阅状态以及释放日志;否则无法判断升级后的差异来自业务代码、框架实现还是测试环境。
第二份证据是反例。针对“把Material Design降为颜色和阴影皮肤,忽略信息层级、运动因果、输入反馈与可访问性”构造至少一个可重复失败:在配置变化、快速重复输入、网络超时、后台切换或所有者销毁时观察错位、重复、泄漏和迟到回调。反例必须写明预期拒绝条件;只展示正常路径会掩盖框架最重要的所有权边界。
第三份证据是源码定位。先锁定仓库标签和库版本,再从公开入口沿实际调用追踪,不跨版本拼接类名。每次跨线程、跨进程或跨Java/Native边界,都记录调用方、被调用方、数据形态、错误返回和资源归属。层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图应能让另一位读者在相同版本上重建同一条链。
第四份证据是迁移对照。现代API解决的问题可能相同,但取消、缓存、状态恢复、线程和错误语义未必一致。迁移时保持输入和验收不变,一次只替换一个组件;新旧结果不一致时先解释差异,再决定适配或回退,不能用“新版推荐”跳过历史行为验证。
迁移账本
原书节点: 第2章 Material Design
历史基线: Android 5.0—7.0 / Java / Support Library
现代候选: 一次只替换一个API或框架
不变量: 业务结果、线程、生命周期、错误与资源释放
证据: 层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图
回退: 任一不变量失败即恢复历史实现本章回顾
从一个真实输入复盘:它由谁接收、在哪个线程执行、状态和对象归谁所有、何时取消或释放、低版本与异常路径如何表现。然后用层级与间距标注、动效状态、错误输入、无障碍语义、滚动协作与折叠边界截图重放;无法复现的结论退回实验阶段。
复习与独立交接
练习
问题 1:为什么本页必须保留17个目录节点?
问题 2:最小正确性合同是什么?
问题 3:怎样构造最有效的反例?
问题 4:为什么只读源码类名不够?
问题 5:怎样迁移而不改写原书?
问题 6:独立交接需要什么?
名词解释
本章出现的专业名词,用大白话再讲一遍。
- 材质隐喻
- 以表面、层级和运动帮助用户理解界面结构与操作结果的设计模型。
- CoordinatorLayout
- 让子View通过Behavior协同滚动和位置变化的容器。
- Snackbar
- 短暂展示操作结果并可提供单一恢复动作的底部反馈组件。
- TextInputLayout
- 为文本输入提供浮动标签、错误提示和计数等外层能力的组件。
- Behavior
- 声明CoordinatorLayout子项响应依赖与嵌套滚动的协作规则。