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

继续接着上一篇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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,107评论 25 707
  • 一、 Drawable简介 1 Drawable表示的是一种可以在Canvas上进行绘制的抽象的概念,可以是纯颜色...
    黄海佳阅读 1,211评论 0 10
  • 更多Android总结知识点 Android中的13种Drawable小结 Android的八种对话框的实现 An...
    侯蛋蛋_阅读 3,959评论 0 5
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 4,833评论 1 19
  • 🙏 王强. 项目 技术点: 通用版本的 项目 技术点 好 Low,但是 只会 这些。写一些 很高大上的东西, 你...
    FlyTheKite阅读 152评论 0 0