领略千变万化的Android Drawable (二)

hello,上篇我们已经分析6种Drawable的使用方法,本篇咱们就继续剩下的Drawable~,闲话莫多说,那就直接开始吧。

7、TransitionDrawable

很多时候我们在实现渐变的动画效果时,都会使用到animation,但实际上我们有既简单又完美的解决方法,没错,它就是TransitionDrawable啦,TransitionDrawable用于实现两个Drawable之间的淡入淡出的效果,它对应的是<transition&gt标签;其语法如下:

语法中的属性比较简单,其中 android:top,android:bottom,android:left,android:right分别表示Drawable四周的偏移量。

android:id

资源ID,drawable资源的唯一标识。使用”@+id/name”方式来给这个item定义一个新的资源ID。可以使用View.findViewById()或者 Activity.findViewById()等方式检索和修改这个item。
同样,我们来看一个实例:

引用如下:

通过它的startTransition和reverseTransition方法实现淡入淡出效果,代码如下:

如果在imageView设置的src属性

代码控制为:

最终效果:

最后我们给出代码实现的方式,比较简单,这里不过多分析:

8、InsetDrawable

有时候我们可能需要为一个全屏的LinearLayout布局指定背景图,但我们不想让背景图充满屏幕,这时我们就需要使用到InsetDrawable了,InsetDrawable对应标签,它可以将其他Drawable内嵌到自己当中,并可以在四周预留出一定的间距。当我们希望View的背景比实际区域小时,就可以采用InsetDrawable来实现,个人认为这个效果并没有什么特殊之处,因为layerDrawable也是可以达到相同的预期效果的。其语法如下:

属性解释:

属性 含义
android:insetTop 图像距离上边的距离
android:insetRight 图像距离右边的距离
android:insetBottom 图像距离底边的距离
android:insetLeft 图像距离左边的距离

直接看个例子吧,代码如下:

直接作为根布局的背景

效果如下:

9、ScaleDrawable

ScaleDrawable对应标签,主要基于当前的level,对指定的Drawable进行缩放操作。有点需要特别注意的是我们如果定义好了ScaleDrawable,要将其显示出来的话,必须给ScaleDrawable设置一个大于0小于10000的等级(级别越大Drawable显示得越大,等级为10000时就没有缩放效果了),否则将无法正常显示。我们可以看看其draw函数的源码:

很明显d.getLevel() != 0才会去把当前drawable画在画布上然后显示在屏幕上,我们知道这点后再来看看其语法:

android:gravity

当图片小于容器尺寸时,设置此选项可以对图片经典定位,这个属性比较多,不同选项可以使用‘|’来组合使用。

可选项 含义
top 将图片放在容器顶部,不改变图片大小
bottom 将图片放在容器底部,不改变图片大小
left 将图片放在容器左侧,不改变图片大小
right 将图片放在容器右侧,不改变图片大小
center_vertical 图片竖直居中,不改变图片大小
fill_vertical 图片竖直方向填充容器
center_horizontal 图片水平居中,不改变图片大小
fill_horizontal 图片水平方向填充容器
center 使图片在水平方向和竖直方向同时居中,不改变图片大小
fill 图片填充容器,默认值
clip_vertical 竖直方向剪切,很少使用
clip_horizontal 水平方向剪切,很少使用

android:scaleHeight

表示Drawable的高的缩放比例,值越大,内部Drawable的高度显示得越小,例如android:scaleHeight=”70%”,那么显示时Drawable的高度只有原来的30%。

android:scaleWidth

表示Drawable的宽的缩放比例,值越大,内部Drawable的宽显示得越小,例如android:scaleWidth=”70%”,那么显示时Drawable的宽度只有原来的30%。
直接来看个例子呗,我们设置两组宽高分别缩放70%和30%,然后来对比一下情况

必须在java调用设置level(默认为0)的代码才可以正常显示:

效果对比如下:

我们再来对比一下宽高同等缩放比例(50%)下,level对Drawable的影响效果,分别设置level等级为1,5000,10000.

10、ClipDrawable

ClipDrawable是通过设置一个Drawable的当前显示比例来裁剪出另一张Drawable,我们可以通过调节这个比例来控制裁剪的宽高,以及裁剪内容占整个View的权重,通过ClipDrawable的setLevel()方法控制显示比例,ClipDrawable的level值范围在[0,10000],level的值越大裁剪的内容越少,当level为10000时则完全显示,而0表示完全裁剪,不可见。需要注意的是在给clip元素中android:drawable属性设置背景图片时,图片不能是9图,因为这涉及到裁剪这张图片,如果设置为九图,裁剪的实际情况会与想要的效果不一样。ClipDrawable对应xml的<clip>标签,其语法如下:

其中android:clipOrientation和android:gravity属性共同控制Drawable被裁剪的方向,其中clipOrientation表示裁剪的方向(水平和垂直两种),gravity比较复杂必须和clipOrientation一起才能起作用,同样的我们可以通过“|”来组合使用gravity的属性值。gravity属性值说明如下:

属性值 描述
top 将这个对象放在容器的顶部,不改变其大小。当clipOrientation 是”vertical”,裁剪从底部开始
bottom 将这个对象放在容器的底部,不改变其大小。当clipOrientation 是 “vertical”,裁剪从顶部(top)开始
left 将这个对象放在容器的左部,不改变其大小。当clipOrientation 是 “horizontal”,裁剪从drawable的右边(right)开始,默认值
right 将这个对象放在容器的右部,不改变其大小。当clipOrientation 是 “horizontal”,裁剪从drawable的左边(left)开始
center_vertical 将对象放在垂直中间,不改变其大小,如果clipOrientation 是 “vertical”,那么从上下同时开始裁剪
fill_vertical 垂直方向上不发生裁剪。(除非drawable的level是 0,才会不可见,表示全部裁剪完)
center_horizontal 将对象放在水平中间,不改变其大小,clipOrientation 是 “horizontal”,那么从左右两边开始裁剪
fill_horizontal 水平方向上不发生裁剪。(除非drawable的level是 0,才会不可见,表示全部裁剪完)
center 将这个对象放在水平垂直坐标的中间,不改变其大小。当clipOrientation 是 “horizontal”裁剪发生在左右。当clipOrientation是”vertical”,裁剪发生在上下。
fill 填充整个容器,不会发生裁剪。(除非drawable的level是 0,才会不可见,表示全部裁剪完)。
clip_vertical 附加选项,表示竖直方向的裁剪,很少使用
clip_horizontal 附加选项,表示水平方向的裁剪,很少使用

ClipDrawable属性介绍完了,直接来个实战吧,

在上面的xml中我们实现了左侧裁剪的效果,因此应将clipOrientation设置为水平方向裁剪,gravity要设置为right。然后应用到我的ImageView上代码如下:

接着在代码中设置ClipDrawable的等级,代码如下:

因为这里我们在xml引用时设置的是背景图所以使用clipImage.getBackground(),如果在xml引用时使用的是src,那么就使用clipImage.getDrawable()即可。前面我们已经提到过,ClipDrawable的等级范围是[0,10000],而且level越大裁剪区域越少,当level=10000时,表示不裁剪,我们在这里设置了level为6000则表示裁剪40%的区域,效果如下:


最后我们来实现一个案例,在实际开发中经常会使用到动画来实现一些特殊效果,比如我们可能需要实现一个徐徐展开的图片,这时我们的ClipDrawable就派上用场了,接着我们就是利用ClipDrawable来实现一个拥有徐徐展开效果的图片

思路:

因为ClipDrawable的setLevel(int level)可以控制截取图片的部分,因此我们可以设置一个定时器,让程序每隔一段时间就调用ClipDrawable的setLevel(int level)方法即可实现图片徐徐展开效果。
我们首先来实现一个clip_drawable_image.xml,并设置clipOrientation=”horizontal”,即水平剪切,以及设置gravity=”center”,即左右同时裁剪,代码如下:

接着在activity_clip.xml文件布局中引用:

代码调用如下:

效果如下:

11、ColorDrawable

ColorDrawable 是最简单的Drawable,它实际上是代表了单色可绘制区域,它包装了一种固定的颜色,当ColorDrawable被绘制到画布的时候会使用颜色填充Paint,在画布上绘制一块单色的区域。 在xml文件中对应标签,它只有一个android:color属性,通过它来决定ColorDrawable的颜色。
xml实现如下:

也可以使用代码实现,注意传入的颜色值为16进制的数字:

12、GradientDrawable

GradientDrawable 表示一个渐变区域,可以实现线性渐变、发散渐变和平铺渐变效果,实际上这个我们在上一篇的shapeDrawable中就已经分析过了,忘了可以回头复习一下哈~,其对应的标签为<gtadient>一般都是配置shapeDrawable来使用,为其实现渐变颜色。这里给出简单案例如下:

当然GradientDrawable也可以作为View的背景图,案例代码实现如下:

最后设置给View的背景图即可。

代码实现GradientDrawable还可以设置边框,圆角,边框宽度等等,这里我们就不深究了,感兴趣可以自行研究一下。
到此,常用的Drawable我们已经全部介绍完了,告一段落了哈~,下一篇我们将继续分享如何实现自定义Drawable,欢迎关注。

主要参考资料:

《android开发艺术探索》
《google android官网》

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

2 3 收藏 评论

关于作者:shine_zejian

一个狂热的技术追求者 个人主页 · 我的文章 · 11 ·  

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部