众所周知,在Android开发里,为了优化在各种分辨率设备上的显示效果,同一份图片素材往往要提供mdpi、hdpi、xhdpi三种(以前还 有ldpi),尤其是按钮类的素材,考虑到normal、pressed、focused更是需要至少3×3=9张图片。NinePatch技术虽然可以 解决一部分尺寸灵活性的问题,但大部分修改和适配还是要再次制作一批图片的。
根据交互设计的需要,可以考虑用Drawable的XML绘制按钮,好处有:
- 矢量绘制,易于缩放;
- 字节数更少(一般而言);
- 基于XML文本,属性值易于调整;
- Drawable组件间可嵌套,可重用;
- XML与项目其他源代码在一起,便于版本控制。
当然也有缺点:
- 没有可视化的编辑器,编辑不够直观;
- 受限于基本的图形和填充方式;
- 美工人员很难上手。
以本站开发的习作《泡面管家》(参见这里)为例。
下图是泡面管家的计时器,中间的圆形(包含镂空阴影效果)默认是表示计时器状态的icon,在计时器运行期间会变换为停止计时的按钮:
这里icon的背景是用Drawable XML绘制的。在Android中,Drawable XML并不支持阴影,参考了网上诸多例子,一般都是以额外绘制的渐变或者边框来实现阴影。这里是用叠加shape的方式来绘制的。
上图中绿色方框中的标识的色块,从外到内可以划分成几个部分:
- Outer circle
- Inner shadow of outer circle
- Gap
- Outer shadow of center circle
- Center circle
使用<layer-list/>,从最底层开始,画对应最外部分的、最大的圆形,然后逐层的、边扩大padding边叠加圆形,圆形的填充颜色要对应到相应的色块。res/drawable/timer_center_bg.xml代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<? xml version = "1.0" encoding = "utf-8" ?>
<!-- outer circle -->
< item >
< shape android:shape = "oval" >
< solid android:color = "#FFACB8C3" />
</ shape >
</ item >
<!-- inner shadow of outer circle -->
< item
android:bottom = "2dp"
android:left = "2dp"
android:right = "2dp"
android:top = "2dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFbdcad6" />
</ shape >
</ item >
< item
android:bottom = "3dp"
android:left = "3dp"
android:right = "3dp"
android:top = "3dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFc3cfd9" />
</ shape >
</ item >
< item
android:bottom = "4dp"
android:left = "4dp"
android:right = "4dp"
android:top = "4dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFcbd6df" />
</ shape >
</ item >
< item
android:bottom = "5dp"
android:left = "5dp"
android:right = "5dp"
android:top = "5dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFd4dee5" />
</ shape >
</ item >
<!-- gap -->
< item
android:bottom = "6dp"
android:left = "6dp"
android:right = "6dp"
android:top = "6dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFdae2e8" />
</ shape >
</ item >
<!-- outer shadow of center circle -->
< item
android:bottom = "10dp"
android:left = "10dp"
android:right = "10dp"
android:top = "10dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFced5dc" />
</ shape >
</ item >
< item
android:bottom = "12dp"
android:left = "12dp"
android:right = "12dp"
android:top = "12dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFbcc4c9" />
</ shape >
</ item >
< item
android:bottom = "13dp"
android:left = "13dp"
android:right = "13dp"
android:top = "13dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFb4bbc0" />
</ shape >
</ item >
< item
android:bottom = "14dp"
android:left = "14dp"
android:right = "14dp"
android:top = "14dp" >
< shape android:shape = "oval" >
< solid android:color = "#FFacb3b8" />
</ shape >
</ item >
<!-- center circle -->
< item
android:bottom = "15dp"
android:left = "15dp"
android:right = "15dp"
android:top = "15dp" >
< shape android:shape = "oval" >
< stroke android:width = "1dp" android:color = "#FFFCFCFC" />
< gradient
android:angle = "270"
android:endColor = "#FFCFD7DD"
android:startColor = "#FFF0F5F9" />
</ shape >
</ item >
</ layer-list >
|
从以上代码中可以看出,只是简单的圆形的叠加,就可以绘制出具有立体感的按钮。
要注意上边只是按钮的背景。文章开头也讲过,Drawable XML的特征之一就是可复用。继续看res/drawable/stop_timer_btn.xml的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<? xml version = "1.0" encoding = "utf-8" ?>
<!-- normal -->
< item android:state_enabled = "true" android:state_focused = "false" android:state_pressed = "false" >
< layer-list >
< item android:drawable = "@drawable/timer_center_bg" />
< item android:bottom = "15dp" android:left = "15dp" android:right = "15dp" android:top = "15dp" >
< shape android:shape = "oval" >
< stroke android:width = "1dp" android:color = "#FFFCFCFC" />
< gradient android:angle = "270" android:endColor = "#FF91c0e8" android:startColor = "#FFa7d3fa" />
</ shape >
</ item >
</ layer-list >
</ item >
<!-- pressed -->
< item android:state_enabled = "true" android:state_pressed = "true" >
< layer-list >
< item android:drawable = "@drawable/timer_center_bg" />
< item android:bottom = "15dp" android:left = "15dp" android:right = "15dp" android:top = "15dp" >
< shape android:shape = "oval" >
< stroke android:width = "2dp" android:color = "#FFf8f640" />
< gradient android:angle = "270" android:endColor = "#FF91c0e8" android:startColor = "#FFa7d3fa" />
</ shape >
</ item >
</ layer-list >
</ item >
<!-- selected -->
< item android:state_enabled = "true" android:state_focused = "true" android:state_pressed = "false" >
< layer-list >
< item android:drawable = "@drawable/timer_center_bg" />
< item android:bottom = "15dp" android:left = "15dp" android:right = "15dp" android:top = "15dp" >
< shape android:shape = "oval" >
< stroke android:width = "2dp" android:color = "#FFf8f640" />
< gradient android:angle = "270" android:endColor = "#FF91c0e8" android:startColor = "#FFa7d3fa" />
</ shape >
</ item >
</ layer-list >
</ item >
<!-- ...... -->
</ selector >
|
上述代码以看出,<selector/>中每个<item/>都是一个<layer-list/>,将@drawable/timer_center_bg作为背景在前景叠加圆形以区分不同状态。
最后要说明的是,决定一个按钮应该是否用Drawable XML渲染,应考虑以下几个因素:
- App是否要支持多分辨率;
- App是否有瘦身的需要;
- 图案是否足够简单;
- 图案需要自由缩放;
- 设计开发工作流程是否容许开发人员跨界;
- 开发人力相对于设计人力更充足。
否则,应该考虑以图片方式渲染。
相关推荐
android:drawable.xml相关应用,对android开发有帮助的文档。
Android所有系统资源图标android.R.drawable.xxx查看软件 源码地址:http://blog.csdn.net/dianyueneo/article/details/7197067
主要介绍了Android开发使用Drawable绘制圆角与圆形图案功能,结合具体实例形式分析了Drawable绘制圆角矩形的实现步骤与使用方法,需要的朋友可以参考下
我的博客《Android动画之一:Drawable Animation》附带源码
android-gif-drawable 用于在Android上显示动画GIF
我的博客《Android动画之一:Drawable Animation》的附带源码
自定义Drawable 实现图片圆角、圆形、椭圆形,帮助理解自定义Drawable; 自定义Drawable 实现图片圆角、圆形、椭圆形,帮助理解自定义Drawable;
android所有的可自定义xml资源的元素及子元素用法
android drawable下的xml详解
xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android: <item android:duration="130" android:drawable="@drawable/image_loading_01"> <item ...
android-gif-drawable ... compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.7' } Note that Maven central repository should be defined eg. in top-level build.gradle like this: buildscript { r
Android开发中的drawable-(hdpi,mdpi,ldpi)和WVGA,HVGA,QVGA的区别以及联系
Android-android-gif-drawable.zip,在android上显示动画gif的视图和绘图,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性优势。
android-gif-drawable 开源组件,需要的朋友下载
Android系统图标android.R.drawable下的所有图标查看软件
android_gif_drawable(播放gif图片)
drawable实现三角形,原博客地址:https://blog.csdn.net/u010356768/article/details/76040972#comments 大家去原博客地址看下就知道了。不用下载浪费积分
ratingbar 自定义星星效果 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+android:id/background" android:drawable="@...
给图片添加阴影效果,这是很常见的需求。第一种方法是自定义drawable,使用layer-list定义两个图片,代码如下: show_view.xml: <?xml version=1.0 encoding=utf-8?> <layer-list xmlns:android=...
参照github上android-gif-drawable框架出现的5.0不适配的问题。