详解Android Material设计中阴影效果的实现方法

View可以投下的阴影,一个View的elevation值决定了它的阴影的大小和绘制的顺序。可以设置一个视图的elevation,在布局中使用属性:android:elevation

<TextView
  android:id="@+id/my_textview"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/next"
  android:background="@color/white"
  android:elevation="5dp" />

新的translationz属性使您能够创建一个反映了暂时的elevation变化的动画。elevation的变化可在响应触摸手势时可能是有用的。
每个View的elevation值,相当于z属性,它决定了阴影的大小:z越大,阴影越大。
Views仅仅在z=0的平面上才会投影;它们不会投影在放置在它们下面和上面的的其他Views上。
使用较高z值的Views会阻隔使用较低z值的Views。
然而,一个View的Z值不会影响View的大小。
elevation有利于创建 在组件需要临时上升到View的平面之上做一些操作时 的动画。
更多关于elevation的介绍,详见http://www.google.com/design/spec/what-is-material/elevation-shadows.html

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()。
裁剪是一个奢侈的操作,不要使用动态图形来裁剪。为了实现这种效果,可以使用动画来展现。

(0)

相关推荐

  • Android滑动到顶部和底部时出现的阴影如何去掉

    android去掉滑动到顶部和底部的阴影 <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="wrap_content" android:cacheColorHint="#00000000" android:divider="@color/line_color"

  • Android编程之阴影(Shadow)制作方法

    本文实例讲述了Android编程之阴影(Shadow)制作方法.分享给大家供大家参考,具体如下: 先看运行效果图如下: 阴影制作:包括各种形状(矩形,圆形等等),以及文字等等都能设置阴影. 阴影制作是什么原理呢? 其实很简单,你需要设置阴影的东西被看作一个主层.然后在主层下面画一个阴影层. 阴影制作涉及到一个重要函数: public void setShadowLayer (float radius, float dx, float dy, int color) 参数: radius:阴影半径

  • Android百度地图应用之图层展示

    一.简介  1.地图类型  百度地图Android SDK 3.7.1提供了两种类型的地图资源(普通矢量地图和卫星图),开发者可以利用BaiduMap中的MapType属性(C#)来设置地图类型.C#核心代码如下: mMapView = FindViewById<TextureMapView>(Resource.Id.bmapView); mBaiduMap = mMapView.Map; //设置底图显示模式:普通地图 mBaiduMap.MapType = BaiduMap.MapType

  • Android实现ImageView阴影和图层效果

    本文实例为大家分享了ImageView阴影和图层效果的实现代码,供大家参考,具体内容如下 import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import and

  • Android 自定义阴影效果详解及实例

    Android 自定义阴影效果详解及实例 Android5.X中,Google为其增加了两个属性 android:elevation=" " 与 android:translationZ=" ",对应垂直方向上的高度变化.系统会自动增加阴影效果. 在TabLayout中增加android:elevation=" 8dp" ,效果如下: 箭头指向的就是系统为我们默认提供,结果差强人意.那我们是不是可以自定义阴影,不使用系统提供的. 自定义阴影效果

  • Android5.x中的阴影效果elevation和translationZ的实现方法

    android5.x中 view多了一个 属性 z,垂直高度上的变化. Z属性  由两部分组成,elevation 和 translationZ <ImageView android:id="@+id/me_daijjBack" android:layout_width="27dp" android:layout_height="27dp" android:elevation="3dp" android:translat

  • Android编程使用自定义shape实现shadow阴影效果的方法

    本文实例讲述了Android编程使用自定义shape实现shadow阴影效果的方法.分享给大家供大家参考,具体如下: 直接上xml文件, 并且附上相应的解析: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_p

  • Android自定义ImageView实现在图片上添加图层效果

    首先我们先看下效果图 实现思路 这是两张前后对比图,右边第二张图里面的已抢光标签图片当已经没有商品的时候就会显示了,在每个图片的中心位置,第一想法是在ImageView的外层再套一层RelativeLayout 实现方法 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <SelectableRoundedImageVi

  • Android实现图片阴影效果的方法

    本文实例介绍了Android实现图片阴影效果,设置画布颜色,图像倾斜效果,图片阴影效果的方法,采用canvas.save(Canvas.MATRIX_SAVE_FLAG);来实现.由于图片的实际尺寸比显示出来的图像要大一些,因此需要适当更改下大小,以达到较好的效果,在原有矩形基础上,画成圆角矩形,同时带有阴影层.读者可以根据自身需要对该程序代码进行个性化的修改以便更符合自身项目需求. 具体实现代码如下: package canvas.test; import android.app.Activi

  • Android编程实现图片背景渐变切换与图层叠加效果

    本文实例讲述了Android编程实现图片背景渐变切换与图层叠加效果.分享给大家供大家参考,具体如下: 本例要实现的目的: 1.图片背景渐变的切换,例如渐变的从红色切换成绿色. 2.代码中进行图层叠加,即把多个Drawable叠加在一起显示在一个组件之上. 效果图: 代码很简单: (1)布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

随机推荐