Material Design简介

Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容。
Material Design对排版、材质、配色、光效、间距、文字大小、交互方式、动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用。
Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,强色一般处于处于视图最底层,例如状态栏或者actionbar。通过强色调形成鲜明的对比,更容易突出内容的重要性。对于文字色彩的取值,Material Design建议在浅色背景上采用黑色,在深色背景上采用白色。重要信息和标题采用87%透明度,次要文字采用54%透明度,而更次要的说明文字可以采用26%的透明度。对于想特别突出或者可点击的文字,建议使用强色调。不同层级的视图,可以通过阴影来凸显。对于带有操作且内容突出的区域,可以使用cardview进行隔离,对于内容不太重要或者操作比较单一的区域,可以使用分割线进行隔离。

Material Design使用

作为我们开发者,最关心的还是如何在项目中使用Material Design风格:

设置应用的 targetSdkVersion 和 targetSdkVersion 为21

在values目录下的style资源文件中创建一个style,让其继承自 android:Theme.Material

在AndroidManifest中指定应用的主题或者Activity的主题为我们设定的样式

谷歌官方我们提供了三种配色风格的Material Design样式:

黑色主题 Theme.Material

明亮主题 Theme.Material.Light

明亮主题黑色ActionBar Theme.Material.Light.DarkActionBar

android 30新特性 android5.0新特性_android-特征

Material Design兼容性

主题不仅可以对Application和Activity使用,也可以对某一个控件单使用,或者是在xml布局中给一个根节点控件设置android:theme属性,来修改它和它所有子控件的主题。 如果我们要对特定控件实例做自定义修改,更建议大家可以通过控件自身的API进行设置修改。

主题不仅可以对Application和Activity使用,也可以对某一个控件单使用,或者是在xml布局中给一个根节点控件设置android:theme属性,来修改它和它所有子控件的主题。 如果我们要对特定控件实例做自定义修改,更建议大家可以通过控件自身的API进行设置修改。

android 30新特性 android5.0新特性_android-特征_02

android 30新特性 android5.0新特性_android-特征_03

View的z属性

View的Z属性可以通过elevation和translationZ进行修改。
z = elevation+translationZ
在5.0之前,我们如果想给view添加阴影效果,以体现其层次感,通常的做法是给view设置一个带阴影的背景图片,现在,我们只需要简单的修改view的Z属性,就能让其具备阴影的层次感。
Z属性会扩大view的显示区域,如果它的大小大于或等于父视图的大小,那么它的阴影效果就无法显示了,view并不会因为z属性而把自身缩小腾出空间显示阴影。

View的轮廓

在Android的世界里,所有的View都是矩形的,虽然可以给View设置背景圆形的图片,即可在界面显示出圆形的内容,但是View的大小实际上仍然是矩形,并且设置的图片也是实际上也是矩形,只是圆形意外的区域为透明色。

在Android的世界里,所有的View都是矩形的,虽然可以给View设置背景圆形的图片,即可在界面显示出圆形的内容,但是View的大小实际上仍然是矩形,并且设置的图片也是实际上也是矩形,只是圆形意外的区域为透明色。

为了解决该类问题,View增加了一个新的描述来指明内容显示的形状,这就是轮廓。通过shape设置的背景,View会自动根据shape的形状进行轮廓判定,通过color设置的背景,View默认其轮廓和View的大小一样。但是通过图片进行背景设置,View则无法获知轮廓的形状,这个时候就需要我们程序员显示的指定。

在xml布局中,可以通过android:outlineProvider来指定轮廓的判定方式:
none 即使设置了Z属性,也不会显示阴影
background 会按照背景来设置阴影形状
bounds 会按照View的大小来描绘阴影
paddedBounds 和bounds类似,不过阴影会稍微向右偏移一点

View的剪裁

给View指定轮廓,可以决定阴影的显示形状,如果给View指定一个小于自身大小的轮廓,则阴影通常会被View遮住,这个时候View的显示内容并没有因为轮廓的缩小而缩小。
    如果想根据轮廓来缩小一个View,则可以通过剪裁。如果一个View指定了轮廓,调用setClipToOutline方法,就可以根据轮廓来剪裁一个View。想要剪裁轮廓,必须要给View先指定轮廓,并且轮廓是可以被剪裁的,目前只有圆形,矩形,圆角矩形支持剪裁,可以通过outline.canClip()来判断一个轮廓是否支持剪裁。
   Path剪裁不会改变View的大小,但是如果Path的范围比View要的bounds要小,则剪裁后会改变View的位置,位置偏移和Z属性有关,这可能是一个BUG,view的设计者可能在绘制阴影时根据轮廓偏移了画布,而在绘制完后忘记把画布还原了。
   剪裁不会改变View的测量大小和布局大小,也不会改变View的触摸区域,剪裁只是在onDraw的时候对画布做了剪裁处理,剪裁也不同于scale,scale是调整画布matrix的缩放属性,调整后,View仍然能完整显示,而剪裁是缩小画布的剪裁区域,剪裁后我们只能看到View的不一部分。
 试图给View一个比较大的轮廓进行剪裁也是不成功的,实验证明剪裁后的View只能比原有体积小。扩大轮廓只会扩大轮廓的绘制区域。
  剪裁是一个非常消耗资源的操作,我们不应该用此来做动画效果,如果要实现这样的动画,可以使用Reveal Effect

图片和颜色

  • tint属性
  • tint属性一个颜色值,可以对图片做颜色渲染,我们可以给view的背景设置tint色值,给ImageView的图片设置tint色值,也可以给任意Drawable或者NinePatchDrawable设置tint色值。
  • 在应用的主题中也可以通过设置 android:tint 来给主题设置统一的颜色渲染。

Android应用程序架构

tint的渲染模式有总共有16种,xml文件中可以使用6种,代码中我们可以设置16种,渲染模式决定了渲染颜色和原图颜色的取舍和合成规则:

android 30新特性 android5.0新特性_控件_04

通过tint色处理的图片会原图显示出不一样的颜色,我们可以通过这种方式利用一张图片做出图片选择器的效果,让控件在按压状态下显示另外一种颜色:

Palette调色版

Palette调色板,可以很方便的让我们从图片中提取颜色。并且可以指定提取某种类型的颜色。
Vibrant 鲜艳的
Vibrant dark鲜艳的暗色
Vibrant light鲜艳的亮色
Muted 柔和的
Muted dark柔和的暗色
Muted light柔和的亮色

vector矢量图

矢量图也称为面向对象的图像或绘图图像,是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图形最大的优点是无论放大、缩小或旋转等不会失真;最大的缺点是难以表现色彩层次丰富的逼真图像效果。
Android L开始支持矢量图,我们可以用它来处理一些图形简单的icon,方便我们的适配。
Android L中对矢量图的支持是通过xml文件构建,通过矢量图的path描述来生成一个矢量图,对应的java对象为VectorDrawable。

全新的动画

在Material Design设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性。Material主题为控件和Activity的过渡提供了一些默认的动画,在android L上,允许自定义这些动画:

Touch feedback 触摸反馈
Circular Reveal 圆形展示
Curved motion 曲线运动
View state changes 视图状态变化
Vector Drawables 矢量图动画
Activity transitions 活动转场

新增的Widget

RecyclerView新UI控件

RecyclerView是ListView的升级版,它具备了更好的性能,且更容易使用。和ListView一样,RecyclerView是用来显示大量数据的容器,并通过复用有限数量的View,来提高滚动时的性能。当你的视图上的元素经常动态的且有规律的改变时候,可以使用RecyclerView控件。

与ListView不同的是RecyclerView现在不再负责布局,只专注于复用机制,布局交由LayoutManager来管理。 RecyclerView仍然通过Adapter来获取需要显示的对象。

RecyclerView

要使用RecyclerView组件,创建Adapter不再继承自BaseAdapter,而是应该继承自RecyclerView.Adapter类,并且最好指定一个继承自RecyclerView.ViewHolder的范型,Adapter不再要求你返回一个View,而是一个ViewHolder。
继承自Adapter后,需要实现3个抽象方法:
// 当RecyclerView需要一个ViewHolder时会回调该方法,如果有可复用的View则该方法不会得倒回调
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i);
// 当一个View需要出现在屏幕上时,该方法会被回调,你需要在该方法中根据数据来更改视图
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i);
// 用于告诉RecyclerView有多个视图需要显示
public int getItemCount();

CardView

在实现扁平化的UI处理上,通常离不开阴影和圆角,我们通常是让美工提供一个带有阴影和圆角效果的背景图片,现在我们有了更好的实现方式,那就是CardView。

CardView实际是一个FrameLayout类的子类,它为视图提供卡片样式,并保持在不同平台上拥有统一的风格。CardView组件可以设定阴影和圆角。
  我们可以使用cardElevation属性在xml布局中设置阴影效果,在代码中可以通过setCardElevation达到同样的效果。阴影的设置和Android L中的Z属性类似。
设置圆角也相当容易,在xml中通过cardCornerRadius来设置,在代码中则使用setRadius,圆角的设置和Android L中的剪裁很相似。
如果我们想设置cardview的背景,请注意使用carBackgroundColor方法,setBackgroundColor也许会影响我们的圆角效果