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

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

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

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

有更高Z值的视图挡住Z值较低的视图。无论如何,Z值不会影响到View的大小。

高度也是有用的,当在执行一些动作的时候创建动画让组件升起。

为视图分配高度

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

Z = elevation + translationZ

不同高度的视图的阴影

在布局文件中设置evelation 使用android:elevation,在代码中使用View.setElevation()方法。

设置一个视图的平移,使用View.setTranslationZ()方法。

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

你也可以使用StateListAnimator方式定义这些文件在xml文件中。特别适用于,状态改变时执行的动画,比如用户点击按钮。更多信息,请看动画视图状态改变,下次在动画一节讲。

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,来阻止投射阴影。

 裁剪视图

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

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

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

 总结

上面可以看到,设置阴影很简单:

  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/,转载请注明出处。

时间: 2024-12-31 13:22:43

创建Material Design风格的Android应用--定义阴影和裁剪视图的相关文章

创建Material Design风格的Android应用--应用主题

昨天正式发布了android 5,同时android developer网站也更新了,增加了创建Material Design风格的Android应用指南,也更新了Support Library,在support library增加了一些Material Design风格的控件和动画等,这里给大家简单介绍一下怎样开发material design风格的Android应用. android 5使用Material Design风格 android提供了三种Material Design风格Them

创建Material Design风格的Android应用--使用自定义动画

动画在Material Design设计中给用户反馈放用户点击时,并且在程序用户界面中提供连贯的视觉.Material主题为按钮(Button)和activity的转换提供了一些默认的动画,在android5.0(api 21)和更高的版本,你可以自定义这些动画和创建一个新动画: Touch feedback(触摸反馈) Circular Reveal(循环揭露效果) Activity transitions(Activity转换效果) Curved motion(曲线运动) View stat

创建Material Design风格的Android应用--使用Drawable

以下Drawables的功能帮助你在应用中实现Material Design: 图片资源着色 在android 5.0(api 21)和更高版本,可以着色bitmap和.9 png 通过定义透明度遮盖.你可以着色通过使用颜色资源或者主题的属性去解析颜色资源(比如,?android:attr/colorPrimary).通常我们创建一次,然后资源自适应主题. 你可以给BitmapDrawable或NinePatchDrawable对象着色使用setTint()方法.你可以可以在布局文件中使用and

创建Material Design风格的Android应用--创建列表和卡片

本人所有文章首先发布于个人博客,欢迎关注,地址:http://blog.isming.me 上次说过使用主题,应用Material Design的样式,同时卡片布局也是Material Design的重要组成部分,今天来写写. 引言 在程序中创建复杂的Material Design 样式的 List和Card,可以使用RecyclerView和CardView组件,这两个组件是在最新的support v7包(version 21)中提供的.因此需要引入依赖包: dependencies { co

Android应用之定义阴影和裁剪视图技巧

今天要写的阴影和视图裁剪,无法向下兼容,请注意. Material Design 为用户界面元素引入了深度这个元素.深度帮助用户理解各个元素之间的重要关联和帮助用户关注他们手上的任务. 视图的高度(elevation),通过Z属性表现,通过他的阴影确定:z值更高的视图投影出更大的阴影.视图只在Z=0的平面上投影处阴影:他们不会投影阴影在其他放在下面的视图上面和高于z=0的平面. 有更高Z值的视图挡住Z值较低的视图.无论如何,Z值不会影响到View的大小. 高度也是有用的,当在执行一些动作的时候创

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

之前已经写过通过应用主题和使用ListView, CardView,应用Material Design样式,同一时候都都能够通过support library向下兼容.今天要写的阴影和视图裁剪.无法向下兼容.请注意. ?Material Design 为用户界面元素引入了深度这个元素.深度帮助用户理解各个元素之间的重要关联和帮助用户关注他们手上的任务. 视图的高度(elevation).通过Z属性表现,通过他的阴影确定:z值更高的视图投影出更大的阴影.视图仅仅在Z=0的平面上投影处阴影:他们不会

Android Meterial Design-Defining Shadows and Clipping Views(定义阴影和裁剪视图)-(四)

转载请注明出处:http://blog.csdn.net/bbld_/article/details/40539131 Material Design引入了深度的UI元素.深入帮助用户了解每个元素的相对重要性,并把注意力集中到手头上正在做的事情. 一个视图(控件),由Z属性表示的高程(elevation),决定了它的影子的大小:有更高的Z值得视图就具有更大的阴影.视图仅仅只投下在Z=0平面上的阴影:它们并不投影在在它们下面和上面Z=0平面的其它视图中. 具有较高Z值视图(控件)会挡住较低Z值的视

Android控件使用 — 12个Material Design风格控件的使用

项目在GitHub上的地址: https://github.com/Hebin320/MaterialDesignUse 1.AppBarLayout.ToolBar AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作. AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用. ToolBar是谷歌新推出的代替Action

Android开发实战之拥有Material Design风格的抽屉式布局

在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也很简单,配合着toolbar有着不一样的滑动效果,所以推荐大家使用. 如下是效果图,是不是更具交互性,更加酷炫? **首先是XML** drawlayout分为两部分:侧滑界面和内容界面,所以drawlayout中应该有两个布局,在侧滑的布局中设置属性:android:layout_gravity=