众所周知，在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是否有瘦身的需要；
- 图案是否足够简单；
- 图案需要自由缩放；
- 设计开发工作流程是否容许开发人员跨界；
- 开发人力相对于设计人力更充足。
否则，应该考虑以图片方式渲染。
相关推荐
最后，将`shadow_button.xml`设置为按钮的背景，以实现带有阴影的圆形按钮。 为了实现点击按钮后自动旋转，可以将旋转动画与按钮的点击事件关联起来： ```java button.setOnClickListener(new View....
在Android开发中，Drawable是图形资源的核心组成部分，用于在屏幕上绘制图像。自定义drawable不仅可以提升应用的视觉效果，还能实现一些复杂的功能需求。本篇文章将深入探讨如何在Android中玩转自定义图片，并解决...
Paint类则用于控制绘制的样式，如颜色、线条宽度、文字大小、阴影效果等。你可以设置Paint的属性，如setColor()来改变颜色，setStyle()来选择填充还是描边，setShadowLayer()来添加阴影。在Canvas上绘制时，将Paint...
这不仅支持圆形，还能实现Material Design的各种阴影效果。 对于界面中的其他元素，如按钮、图片等，也需要进行相应的处理以适应圆形布局。例如，图片可以使用`BitmapShader`来裁剪为圆形，或者使用`ImageView`的`...
首先，`shape`是Android图形绘制的一种XML资源，它可以用来定义不同类型的图形，如矩形、圆形、椭圆等，并能设置填充色、边框宽度和颜色等属性。在自定义`Button`的形状时，我们需要创建一个XML文件，放入`res/...
在"安卓动画效果相关-Material风格的动画圆形按钮.rar"这个压缩包中，我们可以探索如何在Android应用中实现Material设计风格的动画圆形按钮。 1. **Material Design简介** Material Design不仅仅是一种视觉设计...
本文将详细介绍如何使用Android编程实现带渐变效果的圆角矩形，并对其涉及的Android界面布局及属性设置相关操作技巧进行详细解释。 一、Android界面布局 在Android编程中，界面布局是指在用户界面上排列控件的方式...
在Android开发中，`Drawable`是用于绘制图形和设置视图背景的重要类。`DrawablePaintDemo`是一个示例项目，展示了如何通过代码实现各种背景色和效果，这通常包括按钮背景、选择器以及其他视觉元素。在本文中，我们将...
在Android开发中，自定义组件是一项重要的技能，它允许开发者根据设计需求创造出独特且功能丰富的UI元素。"自定义圆角动画按钮"就是一个很好的实例，它结合了视觉效果与交互体验，下面我们将深入探讨如何实现这样的...
在Flat-UI-Android项目中，我们可以看到这种设计理念的体现，例如，使用纯色背景、无阴影的图标以及清晰的文字排版。 二、Java在平面设计中的角色 在Android平台上，Java是主要的开发语言，用于实现用户界面逻辑和...