Material Design For Android

核心思想

  Material Design的核心思想，就是将物理世界中的体验带入屏幕，并且去掉物理世界中的杂质，再配合虚拟世界的灵活特性，达到最贴近真实的体验。到目前为止可以说，Material Design是最重视跨平台体验的一套设计语言。

材质与空间

  魔法纸片是Material Design中最重要的信息载体。它拥有现实中的厚度、惯性和反馈，并且能够自由伸展变形。魔法纸片引入了Z轴的概念，Z轴垂直于屏幕，用来表现元素的层叠关系。Z值越高，元素离界面底层的距离越远，投影就越重。

动画

真实的动作

  在物理世界中，通过观察一个物体的运动动作，我们可以感知到它的重量、惯性和大小。在Material Design设计规范中，动作不仅仅要展示物体的运动轨迹，还需要展示其在空间中的关系、功能以及在整个系统中的趋势。所以在设计动画时，就需要先考虑它在现实世界中的运动规律。

响应式交互

  响应式交互能吸引很多用户，在用户操作一个既美观又符合常理的应用时，这会是一个很美好的体验，这会让用户产生愉悦感。响应式交互是一种有目的、非随机的、有些异想天开但不会让人分心的交互。响应式交互分为3种交互形式，分别是表层响应、元素响应和径向响应。

• 表层响应   当用户点击屏幕时，系统会立即在交互的触点上绘制出一个可视化的图形让用户感知到：如在点击屏幕时会出现类似于墨水扩散那样的视觉效果形状。
• 元素响应   元素本身也能做出交互响应，物体可以在触控或点击的时候浮起来，以表示该元素正处于激活可操作状态。比如我们长按一个应用图标时，这个应用图标会浮起来，我们可以拖动该应用图标完成位置更换或者卸载等操作。
• 径向响应   所有的用户交互行为中都会有一个中心点，作为用户关注的中心点，当用户进行操作时应该绘制一个明显的视觉效果来让用户清晰地感知到自己的操作。

转场动画

  当一个界面跳转到另一个界面时，这一过程可以编排转场动画，这些动画不仅可以带来良好的视觉效果，更重要的是吸引用户的注意，比如我们可以利用转场动画引导用户做下一步的操作。转场动画不仅要提升用户体验的整体美感，还要为业务服务。

细节动画

  动画最基本的使用场景是过渡效果，但是最基本的动画，只要恰到好处并且足够出色，同样也能打动用户。例如一个播放器，我们根据播放状态将播放图标改为暂停图标，这种状态间的无缝切换虽说并不起眼，但也能让用户感知到。当无数个类似这样的细节和精湛的设计充满你的应用时，用户也会发现这些小细节，从而感受到设计者的诚意和用心。

字体排版

样式

色彩、字体、字体排版等。

图标

桌面图标、小图标。

图像

桌面图标、小图标。

布局

  布局设计使用相同的视觉元素、结构网格和通用的行距规则，这样会使得App在不同平台与屏幕尺寸上都拥有一致的外观和体验。这样就创造了一个识别度高的跨平台产品的用户环境，这个环境会给用户提供高度的熟悉感和舒适性。

组件

• 底部动作条（Bottom Sheets）
• 卡片（Cards）
• 提示框（Dialogs）
• 菜单（Menus）
• 选择器（时间选择器）
• 滑块控件（Sliders）
• 进度和动态
• Snackbar与Toast
• Tab

Design Support Library 常用控件

Snackbar的使用

类似Toast的提示，不过带了交互功能，调用方式也和Toast类似：

Snackbar.make(view,“Data deleted”,Snackbar.LENGTH_SHORT)
  .setAction("Undo",new View.OnClickListener(){
    @override
    public void onClick(View v){
      Toast.makeText(context,"Data restored",Toast.LENGTH_SHORT)
        .show();
    }
  }).show();

TextInputLayout

Desin Support库中提供，TextInputLayout是一个容器，跟ScrollView一样，只接受一个子元素，并且这个子元素为EditText,使用步骤：

1. 布局文件layout 引入TextInputLayout包裹EditText
2. 设置EditText的hit属性，就会看到不一样的输入提示
3. 代码文件，findviewbyid找到TextInputLayout，还可以设置错误提示

tl.setErrorEnable(true);
tl.setError("error message tips!");

4. 样式文件，改变主题的colorAccent，可改变hit提示颜色

FloatingActionButton的使用

负责显示界面基本操作的圆形按钮，其使用起来非常便捷，可以把它当作一个Button。

app：backgroundTint来设定背景填充色。
app：elevation用来设置正常状态的阴影大小，
app：pressedTranslationZ用来设置点击时阴影的大小

TabLayout

经典实现TabLayout + Viewpager + Fragment

NavigationView

实现抽屉菜单界面，

CoordinatorLayout实现Toolbar隐藏和折叠

• CoordinatorLayout实现Toolbar隐藏效果
• CoordinatorLayout结合CollapsingToolbarLayout实现Toolbar折叠效果

下拉刷新SwipeRefreshLayout

布局文件layout 中引入SwipeRefreshLayout包裹RecyclerView

CardView

v7包提供，实际上CardView也是一个FrameLayout,只是额外添加了圆角，阴影等效果，使用步骤同FrameLayout一样，只需在布局文件layout中引入CardView，设置圆角，阴影等属性配置即可。

沉浸式标题栏

实现背景图和系统标题栏融合，控件设置android:fitsSystemWindows属性为true，主题中的android:statusBarColor设置为透明。由于android:statusBarColor是从5.0系统才有，需进行系统差异化处理。建立values-v21主题配置。

参考及开源项目

《android进阶之光》

Material Design for Android

Android Design Support Library 的 代码实验——几行代码，让你的 APP 变得花俏

Android Material Design动画

Material Design 风格的各种控件（开源库）

plaid（非常给力的一个开源项目，有着很酷炫的动画效果）