众所周知,在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代码如下:
<?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>
</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的代码:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 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是否有瘦身的需要;
* 图案是否足够简单;
* 图案需要自由缩放;
* 设计开发工作流程是否容许开发人员跨界;
* 开发人力相对于设计人力更充足。
否则,应该考虑以图片方式渲染。
原文发表于:
http://evis.me/2013/05/android-dev-render-button-with-shadow-using-drawable-xml/ 《Android开发:用Drawable XML绘制带阴影效果的圆形按钮》
- 大小: 32.1 KB
- 大小: 8.3 KB
分享到:
相关推荐
自定义Drawable 实现图片圆角、圆形、椭圆形,帮助理解自定义Drawable; 自定义Drawable 实现图片圆角、圆形、椭圆形,帮助理解自定义Drawable;
主要介绍了Android开发使用Drawable绘制圆角与圆形图案功能,结合具体实例形式分析了Drawable绘制圆角矩形的实现步骤与使用方法,需要的朋友可以参考下
自定义Drawable实现圆形图片和圆角图片,个人感觉挺简单的
android所有的可自定义xml资源的元素及子元素用法
android drawable下的xml详解
Android把任何可绘制在屏幕上的图形图像都称为drawable。drawable可以是一种抽象的图形、一个继承Drawable类的子类,或者是一张位图图像。接下来,我们将会接触到更多的drawable:state list drawable、shap ...
本示例 演示绘制位图,分两种方式 1. 绘制Bitmap对象 2.使用Drawable.draw方法绘制位图 详情请参见 http://blog.csdn.net/aduovip/article/details/6722949
android:drawable.xml相关应用,对android开发有帮助的文档。
一个旨在减少99%的drawable.xml文件的库,可直接在布局文件中对任意View声明drawable属性。
在开发中我们经常要使用图片或者drawable文件夹下的xml,来实现一些效果,Drawable的用法都和xml相关,我们可以使用shape、layer-list等标签绘制一些背景,还可以通过selector标签定义View的状态的效果等。...
演示Demo:一种巧妙的drawable.xml替代方案-效果篇 特性 ① 成本低 仅需开启DataBinding,核心仅一个方法; ② 高可读性 直接在布局中的View标签声明drawable属性,对View最终效果一目了然; ③ 适配任意View 像使用...
作者nekocode,源码Badge,别在用 View 了,请用 Drawable 来绘制 Badge!
主要有静态和动态两种方式,静态通过xml描述使用,动态即自定义Drawable。本文实现一个圆形和圆角的背景图片效果。 效果图: 实现方式: 1.初始化一个BitmapShader着色器对象; 2.将着色器对象set给画笔; 3.在...
Android用drawable实行属性按钮3种状态demo,原博客地址http://blog.csdn.net/u010356768/article/details/78351416
drawable实现三角形,原博客地址:https://blog.csdn.net/u010356768/article/details/76040972#comments 大家去原博客地址看下就知道了。不用下载浪费积分
我的博客《Android动画之一:Drawable Animation》附带源码
一种可用于播放按钮的材料设计
演示了各种Drawable的效果,以及自定义Drawable