Drawable Resource 之旅(二):ShapeDrawable 详解与应用(仿微信雷达扫描)

一、前言

在我们的日常开发中,需要大量的图片来美化我们的 APP,图片的大量使用在增强 UI 的美观性外,也带来诸多的问题,比如:导致程序出现

OOM(内存溢出)、APK 体积变的十分臃肿,内存泄露等 。事实上,在大部分情况下,我们都可以通过 ShapeDrawable

来绘制我们需要的图形,从而有效避免使用图片而带来的诸多问题 。ShapeDrawable

可以理解为通过颜色来绘制的图形,它既可以是纯色的图片,也可以具有渐变效果的图形 。ShapeDrawable和其他层次化的 Drawable

一起使用,可以绘制各非常绚丽的图形与动画效果。

二、ShapeDrawable 详解

ShapeDrawable 对应 < shape > 标签,其语法如下:

                       

各标签、属性详解:

< shape >

android:shape表示:图形的形状,可以定义下面四种类型的形状

rectangle : 矩形。默认的形状,可以画出直角矩形、圆角矩形、弧形等。

oval: 椭圆形。长宽一样时表示正圆。

line: 线形,可以画实线和虚线。

ring: 环形,可以画环形进度条。

当 android:shape="ring" 时,又具有如下特殊的属性:

android:thickness 厚度, 圆环的厚度 = 外半径 - 内半径 ,当和thicknessRatio一起存在时,以thickness为准。

android:innerRadius 圆内的内半径,当和innerRadiusRatio同时存在时,以innerRadius为准

Android:innerRadiusRatio 内半径在占整个Drawable宽度的比例,默认值是9。如果为n,那么 内半径 = 宽度 / n。

android:thicknessRatio 厚度占整个Drawable的宽度的比例,默认值是3。如果为n,那么 厚度 = 宽度 / n 。

android:useLevel 一般都应该使用false,否则可能无法达到预期的效果,除非他被用来作为 LevelListDrawable 来使用。

< corners >表示:角度 ( 只适用于 android:shape="rectangle" ), 表示 shape 图形四个角的圆角程度,每个圆角半径值都必须大于1,否侧就没有圆角 。

android:radius 为四个角同时设定相同的角度,优先级低,会被下面几个覆盖。

android:topLeftRadius 左上角的角度

android:topRightRadius 右上角的角度

android:bottomLeftRadius 左下角的角度

android:bottomRightRadius 右下角的角度

< gradient >表示:渐变效果

android:angle 渐变的角度,默认是0,其值必须是45的整数倍。0表示从左边到右,90表示从上到下。具体效果随着角度的调整而产生变化,角度影响渐变方向。

android:centerX  渐变中心的横坐标点

android:centerY 渐变中心的纵坐标点

android:centerColor 渐变色的中间色

android:endColor 渐变色的结束色

android:gradientRadius 渐变的半径(仅当 android:type 为radio时有效)

android:startColor 渐变色的起始色

android:type 渐变的类型

linear 线性渐变 (默认值)

radial 径向渐变

sweep 扫描线渐变

android:useLevel 一般为false,当Drawable作为StateListDrawable时有效。

< padding >表示:内边距

android:top \ bottom \ left \ right 分别设置上下左右的内边距。

< size >表示:shape 大小

android:height 指定shape高

android:width 指定shape宽

说明:严格来说 shape 没有宽高,但是我们指定size就有了所谓的宽高。当shape作为View 的背景时,shape 还是会被拉伸的,所以这个宽高并不是指定多少就固定了shape大小(对于Drawable都是没有绝对的宽、高的)。

< solid >表示:纯色填充 (与gradient互斥,纯色或者渐变只能取一个)

android:color 指定shape的颜色

< stroke >表示:描边

android:width 描边的宽度,越大则shape的边缘线越粗

android:color 描边的颜色

android:dashGap 虚线的空隙的间隔

android:dashWidth 虚线的宽度

注意:如果 android:dashWidth 和 android:dashGap 两者有任意一个为0,那么虚线效果就无法显示。

三、ShapeDrawable 应用案例(仿微信雷达扫描)

先看看运行效果截图:

运行效果截图

说明:本案例使用到了 LayerDrawable ,后期会重点讲解。这里先简单介绍一下:LayerDrawable 对应 < layer-list> 标签, LayerDrawable 是一个可以管理一组 drawable 对象的 drawable 。在 LayerDrawable 的 drawable 资源按照列表的顺序绘制,后边的 drawable 绘制在前边的上边,列表的最后一个 drawable 绘制在最上层。

1,绘制雷达波纹 :  /res/drawable/wave.xml

                                                                                                                                                                                   

预览效果:

雷达波纹

绘制扫描光束:/res/drawable/light_beam.xml

       

预览效果:

扫描光束

Activity 布局文件:/res/layout/activity_shape_drawable.xml

       

Activity 代码:

---


运行效果截图:

运行效果

最后运行效果:

说明:录制的GIF丢帧比较严重,所以扫描看起来不连贯了,在手机上运行效果不会是这样的。

雷达扫描

Demo 源码下载地址:http://download.csdn.net/detail/easyer2012/9837222

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

推荐阅读更多精彩内容

  • 2015年伊始,Google发布了关于Android性能优化典范的专题, 一共16个短视频,每个3-5分钟,帮助开...
    zizi192阅读 539评论 0 3
  • 2015新年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开...
    huldaZhang阅读 475评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,460评论 25 707
  • Overdraw(过度绘制)描述的是屏幕上的某个像素在同一帧的时间内被绘制了多次。在多层次的UI结构里面,如果不可...
    gogoingmonkey阅读 875评论 0 3
  • 冯导可真算得上敢讲敢言的真性情,前有微博上同王家公子的唇枪舌战,引得“万众瞩目”,而近日,采访中又出惊人之语,在网...
    山羊君阅读 407评论 0 1