安卓基础知识程序员Android知识

Android 中各种Drawable(对应XML)(二)

2017-03-21  本文已影响565人  海水未顶

继续接着上一篇Android中各种Drawable(一)把余下的几种Drawable学习一下


一:ShapeDrawable

安卓开发中常见的一种Drawable,可以理解为以颜色和形状来绘制的图形,可纯色亦支持渐变颜色。对应标签.ShapeDrawable可以使用标签在xml文件中定义,标签指向GradientDrawable的指针,也就是说编译的类型是GradientDrawable。

标签及属性介绍:

<shape>

android:shape =["rectangle"|"oval"|"line"|"ring"]

指定图形类型:矩形,圆形,线条,圆环

当shape = "ring" 有下面几个属性:

android:innerRadius 内圆半径 优先级高于innerRadiusRatio

android:thickness 圆环厚度 外圆半径-内圆半径

android:innerRadiusRatio 内半径在占整个Drawable宽度的比例,默认值是9。

android:thicknessRatio 厚度占整个Drawable的宽度的比例,默认值是3。

android:useLevel     如果当做是LevelListDrawable使用时值为true,否则为false.

<corners>定义图形四个角弧度

android:radius  四个角设置相同弧度 可被下面几个覆盖

android:topLeftRadius 左上角弧度

android:topRightRadius 右上角...

android:bottomLeftRadius 左下角..

android:bottomRightRadius 右下角..

<gradient>渐变填充

android:angle  渐变角度,必须为45的倍数,0为从左到右,90为从上到下

android:centerX="float"     渐变中心X的相当位置,范围为0~1

android:centerY="float"     渐变中心Y的相当位置,范围为0~1

android:startColor="color"     渐变开始点的颜色

android:centerColor="color"    渐变中间点的颜色,在开始与结束点之间

android:endColor="color"    渐变结束点的颜色

android:gradientRadius="float"   渐变的半径,只有当渐变类型为radial时才能使用

android:type=["linear" | "radial" | "sweep"]  共有3中渐变类型,线性渐变(默认)/放射渐变/扫描式渐变

android:useLevel  使用LevelListDrawable时就要设置为true。设为false时才有渐变效果

<padding>内部边距

android:left="dimension"  左内边距

android:top="dimension"  上...

android:right="dimension"  右...

android:bottom="dimension" 下...

<size>图形尺寸

android:width="dimension" 宽

android:height="dimension" 高

<solid>内部填充

android:color="color"  填充色

<stroke>描边

android:width="dimension"   描边的宽度

android:color="color"   描边的颜色

以下两个属性设置虚线:

android:dashWidth="dimension"   虚线的宽度,值为0时是实线

android:dashGap="dimension"   虚线的间隔

接下来写几个demo看一下效果:

1.纯色填充

先来实现纯色填充,具体(看代码):

实线边框纯色填充(shape_solid_real_line.xml) 虚线边框纯色填充(shape_solid_dash_line.xml)

2.渐变填充

线性渐变(shape_gradient_linear.xml) 放射渐变(shape_gradient_radial.xml) 扫描式渐变(shape_gradient_sweep.xml)

所谓线性渐变也就是它的渐变方向是在一条线上的(如:从左到右,从上到下);而放射渐变是从圆心向四周发散;扫描式渐变就类似雷达扫描效果,可以想象成半径以圆心为旋转点从0度扫到360度。具体可参见下文效果图。

上面连带也已指定了shape为 rectangle和oval的实现,还有两类shape未做尝试:line,ring(线条和圆环)

3.线条和圆环

先从简单的玩起吧!

绘制线条(shape_line.xml)

就这么多,这样就划出一条底色为#ff4081,宽度为1dp的直线了。

接着来画个圆环:

ring绘制圆环(shape_ring.xml)

画圆环也可以用oval实现,将外边框宽度设为thickness宽度 内半径为圆直径(宽/高)除以2减边框宽度,如下,与上图代码运行绘制结果一致:

oval绘制圆环2(shape_oval.xml)

差不多了 ,该晾上运行效果图了(控件都是TextView ,背景设为上面各个shape,这里就不贴出这个布局代码了):

shapeDrawable  效果图

二:ClipDrawable

ClipDrawable代表从一个位图上,截取一个图片片段。用标签<clip>表示,属性及相关介绍看下图:

clip_draw.xml

然后我们将其设为imageview的背景,对其level设置0,5000,10000 看看展示效果:

clip setLevel 代码片段

运行效果图如下:

运行结果

正如上面所说,level为0 显示空白,level为10000显示全图;level为5000(10000/2)显示一半。从clip可以通过设置level来截取图片,可以很容易联想到,是不是类似水平进度条也可以通过clipDrawable实现。闲话少叙,我们来试试:

先来写一个渐变进度条(图片源):

shape_progress.xml

然后创建clip文件如下:(图片源为上xml,gravity设置为left 从左开始截取,截取方向水平)

clip_proigress.xml

将该文件(clip_proigress.xml)作为imageview背景(这里就不贴布局代码了),我们主要看看,进度条的实现:

clipActivity源码

逻辑也比较简单,每隔500毫秒clipDrawable的level增加1000,直至10000为止,弹出toast提示加载完成。在onDestroy中记得将handelr里的线程,消息等移除--->

mHandler.removeCallbacks(mRun);

clip进度条效果图

好吧 !这次就这样了。还有剩下的几个关于动画的(以XML形式)实现,下次有空再学习整理出来。

感谢:

   clip Drawable


上一篇 下一篇

猜你喜欢

热点阅读