文档章节

Android开发:用Drawable XML绘制带阴影效果的圆形按钮

新年
 新年
发布于 2015/05/08 10:04
字数 1184
阅读 932
收藏 6

众所周知,在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的方式来绘制的。

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

  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代码如下:

<?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作为背景在前景叠加圆形以区分不同状态。



本文转载自:http://evis.me/2013/05/android-dev-render-button-with-shadow-using-drawable-xml/

新年
粉丝 7
博文 84
码字总数 46086
作品 0
海淀
程序员
私信 提问
Android应用资源---绘制资源类型(Drawable)(一)

可绘制资源是指能够被绘制到屏幕上的图形的一般化概念,并且能够用诸如getDrawable(int)等API方法来获取这些资源,或者使用诸如android:drawable和android:icon属性把它们应用到另一个XML资源...

长平狐
2012/10/16
632
0
android自定义button样式

在Android开发应用中,默认的Button是由系统渲染和管理大小的。而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的。因此,我们在开发产品的时候,需要对默认按钮进行美化。在本篇...

sumpower
2014/02/25
0
0
Snackbar、CardView、FloatingActionButton、SwitchCompat使用介绍

Android5.0也出来了老长一段时间了,5.0推出的MartailDesign系列确实相当高大上,颜色鲜艳像各种套壳的iphone c,老有设计范儿了。接下来,就学着写它们的用法,并写一些效果。 github代码传...

奔跑吧李博
2018/10/19
0
0
Android 动画效果学习笔记

Android渐变效果实现: 在drawable中创建新的share_background.xml文件,编写代码如下 <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/a......

SRain215
2016/03/11
36
0
彻底理解 Android 中的阴影

如果我们想创造更好的 Android App,我相信我们需要遵循 Material Design 的设计规范。一般而言,Material Design 是一个包含光线,材质和投影的三维环境。如果我们想要在 App 的开发过程中,...

丁佳辉
2018/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

动态代理知识详解

动态代理实现的两种方式 给动态代理举个栗子:例如我们平时买笔记本电脑,很多时候都是不从厂家拿货,而是通过经销商买电脑。代理模式出现解决了生产厂家的一些问题,那么这个这个思想在我们...

我叫小糖主
19分钟前
4
0
Calendar TimeZone SimpleDateFormat

关于Calendar类的使用可参考:Java Calendar类的使用总结 获取日历(Calendar):java.util.Calendar#getInstance() 获取时区TimeZone: TimeZone.getTimeZone("GMT+00:00"); 或:TimeZone.ge......

Hzhodor
20分钟前
0
0
这 17 个 JVM 参数,高级 Java 必须掌握

前言 大家都知道,jvm在启动的时候,会执行默认的一些参数。一般情况下,这些设置的默认参数应对一些平常的项目也够用了。但是如果项目特别大了,需要增加一下堆内存的大小、或者是系统老是莫...

编程SHA
26分钟前
0
0
jenkins配置自动发送邮件

1.开通QQ的SMTP服务,需要发一条短信,qq会给你一个密码(不是你的QQ邮箱密码哦) 2.安装 Email Extension Plugin 插件 3.进入系统管理--系统设置 3.1按照如下图设置 首先找到 Extended E-m...

shzwork
30分钟前
0
0
网络请求异常拦截优化

目录介绍 01.网络请求异常分类 02.开发中注意问题 03.原始的处理方式 04.如何减少代码耦合性 05.异常统一处理步骤 06.完成版代码展示 好消息 博客笔记大汇总【16年3月到至今】,包括Java基础...

潇湘剑雨
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部