第二章 Material Design
- 学习什么是Material Design和其中一些常用的控件的使用方法
2.1 Material Design
- 官方文档，貌似想看得翻墙：http：//www.google.com/design/spec/material-design/
2.1.1 核心思想
- 将物理世界的体验带入屏幕，配合虚拟世界的灵活特性，达到最贴近真实的体验
2.1.2 材质与空间
- 魔法纸片引入了Z轴的概念，Z轴垂直于屏幕，Z值越高，投影越重
2.1.3 动画
1.真实动作
- 通过观察一个物体的动作，我们可以感知到它们的重量、惯性和大小
2.响应式交互
响应式交互可以吸引很多用户，一种美好的体验：
- 表层响应：当用户点击屏幕时，系统会立即在交互的触点上绘制出一个可视化的图形让用户感知到，比如水波纹效果
- 元素响应：比如控件本身在触控或点击的时候浮起来，比如长按应用浮起来，可以进行位置更换和卸载的操作
- 径向响应：所有的用户交互行为都会有一个中心点，用户进行操作时应该绘制一个明显的视觉效果来让用户清晰地感知到自己的操作
3.转场动画
- 当一个界面跳转到另一个界面时，这一过程可以编排转场动画，带来良好的视觉体验，并且去引导用户的下一步操作
4.细节动画
- 动画最基本的使用场景是过渡效果，最基本的动画只要恰到好处，也能打动用户，例如播放器的播放状态的按钮和暂停状态的按钮的切换
2.1.4 样式
1.色彩
- 强调大胆的阴影和高光，从而产生意想不到且充满活力的颜色
2.字体
- 字体的宽度和圆度都有了提高
3.字体排版
- 一个优秀的布局不会使用过多的字体尺寸和样式
2.1.5 图标
1.桌面图标
- 桌面图标是app的门面
2.小图标
- 优先使用Material Design默认图标?
2.1.6 图像
- 图像不应该是认为策划的，而是组建生成的，强调场景的实质性、质感和深度
- 布局：布局设计使用相同的视觉元素、结构网格和通用的行距规则，这样会使app在不同平台上都有一致的外观和体验
2.1.7 组件
1.底部动作条(Bottom Sheets)
扫描二维码关注公众号，回复： 3617282 查看本文章
- 从屏幕底部边缘向上滑出的面板，显示出来跟底部弹出的dialog差不多, 只不过底部动作条可以向上滑出
2.卡片(Cards)
- 可以直接在xml中有圆角和阴影
3.提示框(Dialogs)
- 这个没啥说的
4.菜单(Menus)
- 这个没啥说的
5.选择器
- 比如选择日期，时间等
6.滑块控件(Sliders)
- 比如调节音乐音量或者音乐播放进度
7.进度和动态
- 进度条或者转圈
8.Snackbar与Toast
- Toast我们常用，Snackbar可以在屏幕上滑动关闭
9.Tab
- 页面之间切换的显示
2.2 Design Support Library常用控件详解
- 全新的Android Design Support Library，做了很多Material Design设计风格的控件
2.2.1 Snackbar的使用
- Snackbar显示在屏幕底部，包含了文字信息与一个可选的操作按钮
- 比Toast多了一个操作，并且弹出多个消息时，Snackbar会停止前一个，直接显示后一个，Snackbar的出现不会影响用户的继续操作，而Dialog显示出来要不你操作dialog，要不就得有撤销动作，所以说Snackbar比Diaolog更轻量
- 使用比较简单，就不说了，不过项目中一直还没用到过，何时项目中需要的话，直接用就好了
2.2.2 用TextInputLayout
1.实现布局
- 简单的登录界面：两个EditText输入用户名密码，一个提交Button
2.使用TextInputLayout
- 将EditText用TextInputLayout来包围，然后我们显示的hint值会悬浮在EditText上方，再点击其他地方时，悬浮的文字会回到原本的EditText中，并有动画效果
3.显示错误信息
- 通过setErrorEnabled(true)和setError()可以显示错误信息，比如在登录时的用户名密码验证，我们大部分项目都使用Toast，那么我们可以通过TextInputLayout在EditText的下方显示错误信息
4.改变样式
- 提示字体颜色不满意可以在style.xml文件中对colorAccent进行修改
2.2.3 FloatingActionButton的使用
- 意为悬浮按钮，按绝使用也和Button没什么区别，可能就是多了几个属性吧
2.2.4 用TabLayout实现类似网易选项卡的动态滑动效果
- 说来说去就这么个步骤：
- TabLayout中去添加Tab，然后将tabLayout和ViewPager和ViewPager的适配器关联起来
2.2.5 用NavigationView实现抽屉菜单界面
- DrawerLayout为xml的根布局，其中有一个LinearLayout和一个NavigationView，然后NavigationView去实现侧滑，可以导入headerLayout和menu布局，挺简单的，没啥可说的
2.2.6 用CoordinatorLayout实现Toolbar隐藏和折叠
- Coordinator意为“协调者”，它用来组织子View之间协作的一个父View，默认情况下可被理解为一个FrameLayout
1.CoordinatorLayout实现Toolbar隐藏效果
- 关键xml代码实现滚动后隐藏Toolbar效果：
app:layout_scrollFlags="scroll|enterAlways"
- 这里用到了Snacker和FloatingActionButton
- CoordinatorLayout和FloatingActionButton一起使用时有一个特殊的效果
- 当弹出Snacker的时候，为了留出空间，FloatingActionButton会向上移动
2.CoordinatorLayout结合CollapsingToolbarLayout实现Toolbar折叠效果
- collapsing意为“折叠”，CollapsingToolbarLayout也是继承自FrameLayout，还是设置上面的layout_scrollFlags属性，比如ImageView、Toolbar来响应layout_behavior事件做出相应的scrollFlags滚动事件，说来说去，最后实现了一个向上滚动折叠了toolbar，然后将title显示在了左上角
3.自定义Behavior
CoordinatorLayout中最经典的设计就是Behavior，我们可以自己自定义Behavior来实现自己的组件和滑动交互，有两种方法：
定义的View监听CoordinatorLayout里的滑动状态
- 注意onStartNestedScroll()和onNestedPreScroll()方法
定义的View监听另一个View的状态变化，如View的大小、位置和显示状态等
- 注意layoutDependsOn()和onDependentViewChanged()方法
具体实现就不说了，对于以上两种方法，继承CoordinatorLayout.Behavior<View>重写方法即可
2.3 本章小结
说实话，很多项目的开发，产品经理和UI设计并不知道Material Design的概念，甚至很多产品动画都运用的特别少，其实最理想的情况就是让产品和设计也能了解一下Material Design，那真是太棒了。
这节的内容可以说挺简单，像这种类型的内容，可以说一看一写，立马就可以学会的