建立Material Design风格Android应用--自定义阴影和裁剪视图

以前已经写过经过应用主题和使用ListView, CardView,应用Material Design样式,同一时候都都可以经过support library向下兼容。今天要写的阴影和视图裁剪。没法向下兼容。请注意。html

​Material Design 为用户界面元素引入了深度这个元素。深度帮助用户理解各个元素之间的重要关联和帮助用户关注他们手上的任务。android

视图的高度(elevation)。经过Z属性表现,经过他的阴影肯定:z值更高的视图投影出更大的阴影。视图仅仅在Z=0的平面上投影处阴影;他们不会投影阴影在其它放在如下的视图上面和高于z=0的平面。app

有更高Z值的视图挡住Z值较低的视图。ide

无论怎样。Z值不会影响到View的大小。布局

高度也是实用的,当在运行一些动做的时候建立动画让组件升起。动画

为视图分配高度

一个View的Z值有两个组成部分,elevation(高度)translation(平移).elevation是一个静态部分,translation 用于动画:ui

Z = elevation + translationZspa


不一样高度的视图的阴影设计

在布局文件里设置evelation 使用android:elevation,在代码中使用View.setElevation()方法。
设置一个视图的平移,使用View.setTranslationZ()方法。code

新的方法ViewPropertyAnimator.z()ViewPropertyAnimator.translationZ()可以让你更easy的变更视图的高度。不少其它的信息,看ViewPropertyAnimator的Api文档http://developer.android.com/reference/android/view/ViewPropertyAnimator.html。和属性动画的开发指南:http://developer.android.com/guide/topics/graphics/prop-animation.html

你也可以使用StateListAnimator方式定义这些文件在xml文件里。

特别适用于,状态改变时运行的动画,比方用户点击button。

不少其它信息,请看动画视图状态改变,下次在动画一节讲。
Z值在測量上使用和X,Y值同样的单位。

本身定义视图阴影和轮廓

视图的背景边界决定了阴影的默认形状。轮廓(Outlines)表明了图形对象的外形状,并肯定了对触摸反馈区的波纹。

看这个视图,定义一个背景Drawable:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

背景是一个圆角矩形

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

当这个背景drawable做为视图的轮廓。视图投射出圆角阴影。

提供一个本身定义的轮廓,可以覆盖默认视图阴影的形状。

在本身的代码中本身定义一个轮廓:

1.继承ViewOutlineProvider类
2.重写getOutline()方法
3.在视图中设置轮廓,使用View.setOutlineProvider()方法

你可以建立椭圆和圆角矩形轮廓使用OutLine类中的方法。视图默认的outline provider会依据视图的背景来生成轮廓。可以设置视图的outline provider为null。来阻止投射阴影。

 裁剪视图

裁剪视图功能,可以让你更easy的改变视图的形状。你可以裁剪视图为了和其它的设计元素保持一致。或者改变成形状响应用户的输入。你可以裁剪一个视图的轮廓使用View.setClipToOutLine()方法,或者android:clipToOutline属性。仅仅有矩形,圆角矩形,圆圈的轮廓支持被裁剪,可以使用Outline.canClip()方法检測是否支持被裁剪。

裁剪视图到一个drawable的形状。设置drawable做为视图的背景(让视图显示在其上),并且调用View.setClipToOutline()方法。

裁剪视图是一个耗费的操做,裁剪视图时不要使用形状动画。达到这样的效果,请使用Reveal Effect 动画(下节讲)。

 总结

上面可以看到,设置阴影很是easy:

  1. 设置eleavation值。
  2. 加入背景或者设置一个outline.

參考资料:http://developer.android.com/training/material/shadows-clipping.html

原文地址:http://blog.isming.me/2014/10/26/creating-app-with-material-design-three-shadows/。转载请注明出处。

相关文章
相关标签/搜索