当前位置: 代码迷 >> Android >> ANDROID L——Material Design详解(视图跟阴影)
  详细解决方案

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

热度:191   发布时间:2016-04-24 12:00:35.0
ANDROID L——Material Design详解(视图和阴影)

关注微信号:javalearns?? 随时随地学Java

或扫一扫

?

?

随时随地学Java

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)的大小。

View?Elevation(视图高度)
?
View的z值由两部分组成,elevation和translationZ(它们都是Android L新引入的属性)。
eleavation是静态的成员,translationZ是用来做动画。
Z = elevation + translationZ
?
在layout中使用 android:elevation属性去定义?
在代码中使用 View.setElevation?方法去定义?
设置视图的translation,可以使用View.setTranslationZ方法?
新的ViewPropertyAnimator.z和ViewPropertyAnimator.translationZ方法可以设置视图的elevation值
?
新的属性值:translationZ允许你创建一个动画暂时的反应出View的高度值(elevation)变化。
这对于响应触摸手势很有用处,请看下面代码(官方Demo中的代码):
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
int?action = motionEvent.getActionMasked();?
????????????/* Raise view on ACTION_DOWN and lower it on ACTION_UP. */?
????????????switch?(action) {?
????????????????case?MotionEvent.ACTION_DOWN:?
????????????????????Log.d(TAG,?"ACTION_DOWN on view.");?
????????????????????view.setTranslationZ(120);?
????????????????????break;?
????????????????case?MotionEvent.ACTION_UP:?
????????????????????Log.d(TAG,?"ACTION_UP on view.");?
????????????????????view.setTranslationZ(0);?
????????????????????break;?
????????????????default:?
????????????????????return?false;?
????????????}?
????????????

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

Shadows and Outlines(阴影和轮廓)
?
视图的背景边界决定了默认的阴影形状。轮廓(Outlines)代表了图形对象的外形状,并确定了对于触摸反馈的波纹区域。
?
在Android L中设置一个阴影很简单,只需要两点:
1.设置eleavation值
2.添加一个背景或者outline
?
可以在xml中通过定义一个背景来设置outline:
?
1
2
3
4
5
6
7
8
9
10
11
12
<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>?

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

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

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

?
1
2
floatingShape.setOutline(mOutlineCircle);?

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

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

Drawable Tinting(着色)
?
?
对于Android L还有一个独特的特点就是现在可以定义图片的alpha遮罩,并且可以轻松的使用android:tint属性去调整色调。
?
下面是一个使用tint属性给背景调整不同颜色的例子:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
????<LinearLayout?
????android:orientation="horizontal"?
????android:layout_width="wrap_content"?
????android:layout_height="wrap_content"?
????android:layout_gravity="center_horizontal">?
????<ImageView?
????????...?
????????android:src="@drawable/xamarin_white"?
????????android:background="@drawable/mycircle"/>?
????<ImageView?
????????...?
????????android:src="@drawable/xamarin_white"?
????????android:background="@drawable/mycircle"?
????????android:tint="#2C3E50"/>?
????<ImageView?
????????...?
????????android:src="@drawable/xamarin_white"?
????????android:background="@drawable/mycircle"?
????????android:tint="#B4BCBC"/>?
</LinearLayout>?
?
????

效果图:

Clipping Views(裁剪视图)
?
可以使用View.setClipToOutline方法去剪切一个视图的outline区域。
只有rectangle,circle, 和round rectangle outlines支持裁剪(Outline.canClip方法用来判断是否可以裁剪)
?
为了裁剪一个可绘制的视图形状,需要先设置一个outline然后调用View.setClipToOutline方法:
?
1
2
floatingShape.setClipToOutline(true);?

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

?
1
2
3
4
5
6
7
8
9
????int?margin = Math.min(clippedView.getWidth(), clippedView.getHeight()) /10;?
Outline mClip =?new?Outline();?
mClip.setRoundRect(margin, margin, clippedView.getWidth() - margin,?
????????clippedView.getHeight() - margin, margin /?2);?
/* Sets the Outline of the View. */?
clippedView.setOutline(mClip);?
/* Enables clipping on the View. */?
clippedView.setClipToOutline(true);?
????

首先创建一个轮廓,给轮廓设置区域大小,添加轮廓到视图上,确认裁剪,效果图如下:

因为裁剪视图是一个很耗资源的操作,所以当裁剪一个视图时不要添加动画(为了达到这个效果可以使用Reveal Effect动画,动画篇会介绍)。
?
?
?
总结:
?
我将Material Design分为如下四部分:
主题和布局——ANDROID L——Material Design详解(主题和布局)
视图和阴影
UI控件
动画
?
本文的视图和阴影非常重要,因为在以后Android L的开发中会经常用到。
当我把Android L所有特性介绍之后就会着手开始写实例Demo了,配合实例Demo相信会更容易理解。

关注微信号:javalearns?? 随时随地学Java

或扫一扫

?

?

随时随地学Java

  相关解决方案