Material Designer设计（上）

1.什么是Material Designer

android 自推出以来，一直没有固定的风格，于是国内的产品与设计师大量的抄袭了IOS的风格，但是有些风格是不应该在android 手机上面出现的，因此android开发者被抄袭风格弄的苦不堪言。

为了统一风格，Google I/O 2014 推出了一个Material Designer的风格，建议android应用都按照这个风格进行开发，Material Designer 除了有一部分是UI的规定外，也提供了很多绚丽的效果.

Material Design 有以下的特点：

1. 实体感的操作
2. 鲜明、形象的视觉效果
3. 有意义的动画效果

Material Design 样式

系统也为Material Design提供了一系列的样式，代码如下：

@android:style/Theme.Material
@android:style/Theme.Material.Light
@android:style/Theme.Material.Light.DarkActionBar

样子如下：

5.0以后的版本(也就是21版本号)我们可以根据样式内部的颜色值进行修改相应的内容的颜色。

我们可以在style文件中修改需要显示的样式

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="colorAccent">@color/colorAccent</item>
 </style>

除了上面的方式以外，我们还有其他的方式来修改对应的颜色，注意以下的方法只在5.0以上的手机上能够生效

Window window = getWindow();
window.setStatusBarColor(ContextCompat.getColor(this, R.color.colorBlue));
window.setNavigationBarColor(ContextCompat.getColor(this, R.color.colorGreen));

2.视图高度和阴影

我们在之前的开发中，知道了android 的坐标系，屏幕的左上角是坐标系的原点，代表 x y 分别是(0,0).在21版本以后，所有的控件还多了一个属性z。我们看看下图。

从上面的代码中可以看出圆形控件的层次比白色背景要高一些，比黑色控件要低一些，那么如何设置一个控件的高度呢？只需要在控件的布局文件中添加属性：

android:translationZ

除此之外android还提供了一个api用来设置控件的阴影，注意使用这个api要提供一个背景给控件才能生效。注意，该高度和阴影必须是21版本里面并且该阴影只有当控件有了背景颜色才有用

android:elevation

注意这些api都是21版本以上的才有，注意好版本适配.

或者为控件添加代码：

ImageView iv= (ImageView) findViewById(R.id.iv);
//如果版本大于等于5.0版本 则可以添加属性
if (Build.VERSION.SDK_INT>=21){
    iv.setTranslationZ(30);
    iv.setElevation(30);
}

3.波纹触摸反馈

android 在5.0以后提供了一个触摸反馈的效果给开发者，开发者能够很轻松的实现当用户点击后即出现一个向外扩展的圆形波纹反馈。触摸反馈的配置分成两组：

1. 波纹无边界的 ?android:attr/selectableItemBackground
2. 波纹带边界的 ?android:attr/selectableItemBackgroundBorderless

代码开发的步骤如下：

1. 在res下创建一个layout-v21文件夹。
2. 将你想实现波纹效果的控件所在的布局复制一份

3. 找到对应的控件，添加背景，代码如下：

   <ImageView
       android:id="@+id/iv"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:clickable="true"
       android:background="?android:attr/selectableItemBackground"
       android:layout_margin="10dp" />
   

注意 该效果一般用在轻色调的控件上配置好些

4.CardView

CardView是一种自带圆角 阴影的容器。

如果我们需要使用这个控件，我们需要增加这个控件的依赖。在app项目下的,build.gradle添加依赖，注意CarView的版本必须和v7包的版本一致。如下图：

使用的方法很简单,首先需要在布局文件中使用CardView：

 <android.support.v7.widget.CardView
     android:layout_width="300dp"
     android:layout_height="300dp">

 </android.support.v7.widget.CardView>

CardView有以下特殊的属性:(需要导入自定义命名空间 xmlns:app=”http://schemas.android.com/apk/res-auto”)

app:cardElevation：控件的阴影大小
app:cardCornerRadius：控件的圆角大小
app:cardBackgroundColor：控件的背景颜色

图示如下：

5.TextInputLayout

android 在旧版本就提供了输入控件EditText，输入控件能够很好的满足我们的需求，但是为了提供更加友善的界面.我们可以使用TextInputLayout可以作为EditText的父控件。在需要提示信息 显示输入字数长度 错误等方面做了很大的处理.

1. 在app的build.gradle添加依赖：

1. 在layout-v21中创建布局。在输入框外面嵌套一层，代码如下：

3.效果图如下：

4.当用户输入失败的时候，我们也可以给他设置错误的提示，如下：

5.效果图如下：

6.如果你觉得提示的文本样式不符合你的需求，可以再样式文件中修改，如下：

<style name="TextLabel" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">33sp</item>
</style>

<style name="myError" parent="TextAppearance.Design.Error">
    <item name="android:textSize">33sp</item>
    <item name="android:textColor">@android:color/holo_red_dark</item>
</style>

6.NestedScrollView

android 在旧版本提供了一个控件ScrollView ,能够将内部的很长的控件滚动显示，但是我们在实际开发中难免会碰到这样的需求，如在一个ScrollView
中，增加一个能够滚动的区域。或在一个列表控件（ListView RecyerView）中，除了能够上下滚动外，也可以对内部的某个滚动，现在Material Design提供了一个进阶版本的ScrollView给我们使用。

如下图，我们想将列表中每个item变成一个个可以内部滑动的控件，图如下：

此时，只需要对每个item布局实现如下的代码即可：

7.FloatActionButton

android 在 Material Designer 中提供了一种漂浮的按钮，我们可以使用这个控件开发出很酷炫的效果,如下图：

该控件也是design包下的提供的一个组件，具体用法如下：

常用的属性：

android:src 中间的icon
app:backgroundTint 背景的颜色
app:rippleColor 点击时的颜色
app:borderWidth 应该设置为0，否则会在4.1会显示为正方形，而在5.0以后没有阴影效果
app:fabSize 控件的大小，有两个值 normal和mini
app:layout_anchor 设置FloatActionButton相对于那个控件
app:elevation 默认显示的阴影的大小

需要注意的是 FloatingActionButton有些版本默认是无法点击的 所以点击效果无效，请设置android:clickable=”true”属性

8.ToolBar

google在旧版本推出过一个控件ActionBar,但是ActionBarzhi只能固定在顶部，不能灵活使用，所以google推出了一个ToolBar来替换ActionBar.

我们可以配合一些新的控件实现很多酷炫的效果。下图是ToolBar内部显示的内容.

关于旧版本是如何演化的，大家可以参考博客《从ActionBar,沉浸式 再到ToolBar》

9.Snackbar

Toast是我们在日常开发中经常使用的控件，简单易用，但是现在有这样的需求，需要与Toast交互，比如登陆失败了，弹出Toast后，点击Toast能够重新登陆，但是就目前的Toast来说是无法解决这种问题的。因此google提供了一个新的控件给开发者,也就是Snackbar。Snackbar除了有Toast的功能外，还具备了Toast不具备的交互功能。

1 生成一个 Snackbar，该静态方法类似toast的makeText()

//传入某一个控件 它会找到该控件的最外层容器 在该容器中添加一个snackbar
//提示的长度 LENGTH_LONG2LENGTH_SHORT2LENGTH_INDEFINITE
make(View view, CharSequence text, int duration)

2 设置Snackbar的点击方法

setAction(CharSequence text, final OnClickListener listener)

3 显示

show()

具体的代码图如下：