码迷,mamicode.com
首页 > 移动开发 > 详细

ANDROID L——Material Design详解(视图和阴影)

时间:2014-10-17 03:26:43      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:material design   android l   阴影   elevation   

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!



Android L:


昨天凌晨Google刚刚确认Android L就是Android Lollipop(5.0)。


Google之前就已经提前推出了Android L Developer Preview(开发者预览版)来帮助开发者更快的了解Android特性,而不久前也推出了64位的模拟器镜像,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市。

相信Android L正式版离我们也不远了,所以是时候开始学习Android L了!



我打算写一个关于Android L的系列文章,本文就先介绍一下Android L最大的一个新特性——Material Design


关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章:

Android L——模拟器配置及创建项目


Material Design包含了很多内容,我大致把它分为四部分:

主题和布局——ANDROID L——Material Design详解(主题和布局)

视图和阴影

UI控件

动画


今天就先来说说第二部分——Material视图和阴影




视图和阴影


View的大小位置都是通过x,y确定的,现在有了z轴的概念,而这个z值就是View的高度(elevation),而高度决定了阴影(shadow)的大小。


bubuko.com,布布扣



View Elevation(视图高度)


View的z值由两部分组成,elevationtranslationZ(它们都是Android L新引入的属性)

eleavation是静态的成员,translationZ是用来做动画。

Z = elevation + translationZ


在layout中使用 android:elevation属性去定义 

在代码中使用 View.setElevation 方法去定义 

设置视图的translation,可以使用View.setTranslationZ方法 

新的ViewPropertyAnimator.zViewPropertyAnimator.translationZ方法可以设置视图的elevation


新的属性值:translationZ允许你创建一个动画暂时的反应出View的高度值(elevation)变化。

这对于响应触摸手势很有用处,请看下面代码(官方Demo中的代码):

  1. int action = motionEvent.getActionMasked();  
  2.                 /* Raise view on ACTION_DOWN and lower it on ACTION_UP. */  
  3.                 switch (action) {  
  4.                     case MotionEvent.ACTION_DOWN:  
  5.                         Log.d(TAG, "ACTION_DOWN on view.");  
  6.                         view.setTranslationZ(120);  
  7.                         break;  
  8.                     case MotionEvent.ACTION_UP:  
  9.                         Log.d(TAG, "ACTION_UP on view.");  
  10.                         view.setTranslationZ(0);  
  11.                         break;  
  12.                     default:  
  13.                         return false;  
  14.                 }  

一个简单触摸监听,在点击和抬起的时候分别设置translationZ的值,效果如下图所示:

bubuko.com,布布扣     bubuko.com,布布扣


Shadows and Outlines(阴影和轮廓)


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


在Android L中设置一个阴影很简单,只需要两点:

1.设置eleavation值

2.添加一个背景或者outline


可以在xml中通过定义一个背景来设置outline

  1. <TextView  
  2.     android:id="@+id/myview"  
  3.     ...  
  4.     android:elevation="2dp"  
  5.     android:background="@drawable/myrect" />  
  1. <!-- res/drawable/myrect.xml -->  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     <solid android:color="#42000000" />  
  5.     <corners android:radius="5dp" />  
  6. </shape>  


也可以通过代码来创建一个outline:

  1. /* Get the size of the shape from resources. */  
  2. int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);  
  3.   
  4. /* Create a circular outline. */  
  5. mOutlineCircle = new Outline();  
  6. mOutlineCircle.setRoundRect(00, shapeSize, shapeSize, shapeSize / 2);  
  7.   
  8. /* Create a rectangular outline. */  
  9. mOutlineRect = new Outline();  
  10. mOutlineRect.setRoundRect(00, shapeSize, shapeSize, shapeSize / 10);  

给视图设置一个outline(如果为了防止一个视图产生阴影可以设置outline为null):

  1. floatingShape.setOutline(mOutlineCircle);  


下图是使用不同eleavation值产生的阴影效果:

bubuko.com,布布扣


下图是不同背景/轮廓产生的阴影和拖拽效果:

bubuko.com,布布扣    bubuko.com,布布扣


Drawable Tinting(着色)


对于Android L还有一个独特的特点就是现在可以定义图片的alpha遮罩,并且可以轻松的使用android:tint属性去调整色调。


下面是一个使用tint属性给背景调整不同颜色的例子:

  1. <LinearLayout  
  2.     android:orientation="horizontal"  
  3.     android:layout_width="wrap_content"  
  4.     android:layout_height="wrap_content"  
  5.     android:layout_gravity="center_horizontal">  
  6.     <ImageView  
  7.         ...  
  8.         android:src="@drawable/xamarin_white"  
  9.         android:background="@drawable/mycircle"/>  
  10.     <ImageView  
  11.         ...  
  12.         android:src="@drawable/xamarin_white"  
  13.         android:background="@drawable/mycircle"  
  14.         android:tint="#2C3E50"/>  
  15.     <ImageView  
  16.         ...  
  17.         android:src="@drawable/xamarin_white"  
  18.         android:background="@drawable/mycircle"  
  19.         android:tint="#B4BCBC"/>  
  20. </LinearLayout>  

效果图:
bubuko.com,布布扣





Clipping Views(裁剪视图)


可以使用View.setClipToOutline方法去剪切一个视图的outline区域。

只有rectangle,circle, 和round rectangle outlines支持裁剪(Outline.canClip方法用来判断是否可以裁剪)


为了裁剪一个可绘制的视图形状,需要先设置一个outline然后调用View.setClipToOutline方法:

  1. floatingShape.setClipToOutline(true);  


下面请看一个使用裁剪的例子:

  1. int margin = Math.min(clippedView.getWidth(), clippedView.getHeight()) / 10;  
  2. Outline mClip = new Outline();  
  3. mClip.setRoundRect(margin, margin, clippedView.getWidth() - margin,  
  4.         clippedView.getHeight() - margin, margin / 2);  
  5. /* Sets the Outline of the View. */  
  6. clippedView.setOutline(mClip);  
  7. /* Enables clipping on the View. */  
  8. clippedView.setClipToOutline(true);  
首先创建一个轮廓,给轮廓设置区域大小,添加轮廓到视图上,确认裁剪,效果图如下:

bubuko.com,布布扣     bubuko.com,布布扣

因为裁剪视图是一个很耗资源的操作,所以当裁剪一个视图时不要添加动画(为了达到这个效果可以使用Reveal Effect动画,动画篇会介绍)。




总结:


我将Material Design分为如下四部分:

主题和布局——ANDROID L——Material Design详解(主题和布局)

视图和阴影

UI控件

动画


本文的视图和阴影非常重要,因为在以后Android L的开发中会经常用到。

当我把Android L所有特性介绍之后就会着手开始写实例Demo了,配合实例Demo相信会更容易理解。


剩余的UI控件动画,我会陆续更新,敬请期待。。。


ANDROID L——Material Design详解(视图和阴影)

标签:material design   android l   阴影   elevation   

原文地址:http://blog.csdn.net/a396901990/article/details/40153035

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!