Android(Lollipop/5.0) Material Design(四) 定义阴影和裁剪View

官网:https://developer.android.com/intl/zh-tw/training/material/shadows-clipping.html

Material设计为UI元素引入了一个depth值,depth帮助用户了解每个元素相对重要性,重点关注手头的任务

每个View的elevation值,相当于z属性,它决定了阴影的大小:z越大,阴影越大。

Views仅仅在z=0的平面时才会投影;它们不会投影在放置在它们下面和上面的的其他Views上。

使用较高z值的Views会阻隔使用较低z值的Views。

然而,一个View的Z值不会影响View的大小。

elevation有利于创建 在组件需要临时上升到View的平面之上做一些操作时 的动画。

Assign Elevation to Your Views  在Views中指定Elevation

Z值包含两个成分:elevation和translation。elevation是一个静态的成分,translation使用了动画:Z
= elevation + translationZ

在layout中设置elevation,使用android:elevation属性。在代码中设置,使用View.setElevation()方法。

设置一个View的translation,使用View.setTranslationZ()方法。

ViewPropertyAnimator.z()和ViewPropertyAnimator.translationZ() 能使你更轻易的推动Views的elevation。

您还可以使用一个StateListAnimator指定这些动画声明的方式。在状态改变触发动画的情况下,这是特别有用的,比如当用户按下一个按钮时。

Customize View Shadows and Outlines  自定义View的阴影和轮廓

View的背影图片的边界确定了阴影的默认图形。轮廓代表一个图形对象的外部形状和定义的用于触摸反馈的波纹区域。

参考:

<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>

因为背景图片定义了View的轮廓(outline),所以View会投放一个使用了圆角的阴影。提供一个自定义的轮廓重写View的默认阴影图形。

自定义轮廓在代码中:

·继承自ViewOutlineProvider

·重写getOutline()

·使用View.setOutlineProvider(),指派新的轮廓

使用Outline类的一些方法,创建圆角矩形和椭圆的轮廓。默认的outline provider 包含了View的背影轮廓。阻止一个View的投影,可以设置View的ouline provider 为null。

Clip Views  裁剪

剪裁视图使您能够轻松地更改视图的形状。你可以统一裁剪成使用了其他设计元素,或在响应用户输入时改变View的形状。可以裁剪View的外部轮廓区域,使用View.setClipToOutline()或者android:clipToOutline属性。只有矩形、圆形、圆角矩形支持轮廓的裁剪,由Outline.canClip()方法来确定。

当要裁剪成一个图片的形状时,需要设置该图片为View的背景,并调用View.setClipToOutline()。

裁剪是一个奢侈的操作,不要使用动态图形来裁剪。为了实现这种效果,可以使用动画来展现。

时间: 2024-10-13 10:50:46

Android(Lollipop/5.0) Material Design(四) 定义阴影和裁剪View的相关文章

Android(Lollipop/5.0) Material Design(四) 创建列表和卡片

Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design(二) 入门指南 Android(Lollipop/5.0)Material Design(三) 使用Material主题 Android(Lollipop/5.0)Material Design(四) 创建列表和卡片 Android(Lollipop/5.0)Material Design(五) 定

Android(Lollipop/5.0) Material Design(七) 保持兼容性

Define Alternative Styles  定义替代样式 让你的app,使用Material Design的主题运行在支持它的设备上,并在早期版本的设备上可以运行较早的主题: 1. 在res/values/styles.xml 定义一个主题继承较早的主题 2. 在res/values-v21/styles.xml 定义一个相同名字的继承自Material主题 的主题 3. 在manifest中应用定义的主题 注:如果你的app使用了Material 主题,而不提供较早的主题,那么将不能

Android(Lollipop/5.0) Material Design(一) 简介

官网地址:https://developer.android.com/intl/zh-tw/design/material/index.html 使用Material Design 需要api21,即Lollipop/5.0以上 Material Design 为应用提供了:一个新的主题,一些组合View的新Widget,一些自定义阴影和动画的新Api Material 主题 在manifest.xml 中<... android:theme="@android:style/Theme.M

Android(Lollipop/5.0) Material Design(六) 自定义动画

官网地址:https://developer.android.com/intl/zh-tw/training/material/animations.html 动画在Material设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性.Material主题为Buttons和Activity的过渡提供了一些默认的动画,在android5.0(api21)及以上,允许自定义这些动画: · Touch feedback  触摸反馈 · Circular Reveal  循环显示 · Ac

Android(Lollipop/5.0) Material Design(三) 使用Material主题

官网地址:https://developer.android.com/intl/zh-tw/training/material/theme.html 新的Material主题提供了: 系统Widgets可设置它们的调色板 系统Widgets的触摸反馈动画 Activity的过渡动画 您可以自定义Material主题,根据你的品牌标识,用一个调色板来控制. 可以使用主题属性来为操作栏和状态栏着色,如图所示: Material主题的定义: @android:style/Theme.Material

Android(Lollipop/5.0) Material Design(二) 入门指南

官网地址:https://developer.android.com/intl/zh-tw/training/material/get-started.html Apply the Material Theme 运用材料主题 Design Your Layouts  设计你的布局 除了应用和自定义材料的主题,你的布局应符合材料的设计准则.当你设计你的布局,以下需要特别注意: 基线网格 Keylines 间距 触摸目标尺寸 布局结构 Specify Elevation in Your Views 

Android(Lollipop/5.0) Material Design(五) 使用图片

官网地址:https://developer.android.com/intl/zh-tw/training/material/drawables.html#DrawableTint 以下图片的功能能帮助你在app中实现Material设计: ·图片着色 ·颜色提取 ·矢量图片 Tint Drawable Resources  为图片资源染色 在Android 5.0(API级别21)及以上,你可以将图片和9-patch定义为掩饰透明度.你能使用颜色资源(如,?android:attr/colo

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最佳实践之Material Design

Material概述及主题 学习地址:http://developer.android.com/training/material/get-started.html 使用material design创建App: 温习一下material design说明 在app中应用material 主题 创建遵循material design规则的布局 指定投射阴影的高度 使用ListView和CardView 自定义动画 使用Material 主题 <!-- res/values/styles.xml