加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

用Drawable XML绘制带阴影效果的圆形按钮

发布时间：2020-12-16 05:43:02 所属栏目：百科 来源：网络整理
导读：众所周知，在Android开发里，为了优化在各种分辨率设备上的显示效果，同一份图片素材往往要提供mdpi、hdpi、xhdpi三种（以前还有ldpi），尤其是按钮类的素材，考虑到normal、pressed、focused更是需要至少3×3=9张图片。NinePatch技术虽然可以解决一部分尺寸

众所周知，在Android开发里，为了优化在各种分辨率设备上的显示效果，同一份图片素材往往要提供mdpi、hdpi、xhdpi三种（以前还有ldpi），尤其是按钮类的素材，考虑到normal、pressed、focused更是需要至少3×3=9张图片。NinePatch技术虽然可以解决一部分尺寸灵活性的问题，但大部分修改和适配还是要再次制作一批图片的。

根据交互设计的需要，可以考虑用Drawable的XML绘制按钮，好处有：

  • 矢量绘制，易于缩放；
  • 字节数更少（一般而言）；
  • 基于XML文本，属性值易于调整；
  • Drawable组件间可嵌套，可重用；
  • XML与项目其他源代码在一起，便于版本控制。

当然也有缺点：

  • 没有可视化的编辑器，编辑不够直观；
  • 受限于基本的图形和填充方式；
  • 美工人员很难上手。

以本站开发的习作《泡面管家》（参见这里）为例。

下图是泡面管家的计时器，中间的圆形（包含镂空阴影效果）默认是表示计时器状态的icon，在计时器运行期间会变换为停止计时的按钮：

这里icon的背景是用Drawable XML绘制的。在Android中，DrawableXML并不支持阴影，参考了网上诸多例子，一般都是以额外绘制的渐变或者边框来实现阴影。这里是用叠加shape的方式来绘制的。

上图中绿色方框中的标识的色块，从外到内可以划分成几个部分：

  1. Outer circle
  2. Inner shadow of outer circle
  3. Gap
  4. Outer shadow of center circle
  5. 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" ?>
< layer-list xmlns:android "http://schemas.android.com/apk/res/android" >
<!-- outer circle -->
item >
shape android:shape "oval" >
solid android:color "#FFACB8C3" />
</ shape >
>
<!-- inner shadow of outer circle -->
item
android:bottom "2dp"
android:left "2dp"
android:right "2dp"
android:top "2dp" >
>
"#FFbdcad6" />
>
>
item
"3dp"
"3dp"
"3dp"
"3dp" >
>
"#FFc3cfd9" />
>
>
item
"4dp"
"4dp"
"4dp"
"4dp" >
>
"#FFcbd6df" />
>
>
item
"5dp"
"5dp"
"5dp"
"5dp" >
>
"#FFd4dee5" />
>
>
<!-- gap -->
item
"6dp"
"6dp"
"6dp"
"6dp" >
>
"#FFdae2e8" />
>
>
<!-- outer shadow of center circle -->
item
"10dp"
"10dp"
"10dp"
"10dp" >
>
"#FFced5dc" />
>
>
item
"12dp"
"12dp"
"12dp"
"12dp" >
>
"#FFbcc4c9" />
>
>
item
"13dp"
"13dp"
"13dp"
"13dp" >
>
"#FFb4bbc0" />
>
>
item
"14dp"
"14dp"
"14dp"
"14dp" >
>
"#FFacb3b8" />
>
>
<!-- center circle -->
item
"15dp"
"15dp"
"15dp"
"15dp" >
>
stroke android:width "1dp" "#FFFCFCFC" />
gradient
android:angle "270"
android:endColor "#FFCFD7DD"
android:startColor "#FFF0F5F9" />
>
>
layer-list >

从以上代码中可以看出，只是简单的圆形的叠加，就可以绘制出具有立体感的按钮。

要注意上边只是按钮的背景。文章开头也讲过，Drawable XML的特征之一就是可复用。继续看res/drawable/stop_timer_btn.xml的代码：

?
44
selector >
<!-- normal -->
item android:state_enabled "true" android:state_focused "false" android:state_pressed "false" >
>
android:drawable "@drawable/timer_center_bg" />
android:bottom "15dp" android:left android:right android:top >
/>
gradient android:angle "270" android:endColor "#FF91c0e8" android:startColor "#FFa7d3fa" />
>
>
>
>
<!-- pressed -->
"true" />
>
>
"2dp" "#FFf8f640" />
/>
>
<!-- selected -->
>
>
/>
>
/>
/>
>
>
>
>
<!-- ...... -->
selector 上述代码以看出，<selector/>中每个<item/>都是一个<layer-list/>，将@drawable/timer_center_bg作为背景在前景叠加圆形以区分不同状态。

最后要说明的是，决定一个按钮应该是否用Drawable XML渲染，应考虑以下几个因素：

  • App是否要支持多分辨率；
  • App是否有瘦身的需要；
  • 图案是否足够简单；
  • 图案需要自由缩放；
  • 设计开发工作流程是否容许开发人员跨界；
  • 开发人力相对于设计人力更充足。

否则，应该考虑以图片方式渲染。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同