关闭

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

33人阅读 评论(0) 收藏 举报

根据交互设计的需要,可以考虑用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代码如下:

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

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

    上述代码以看出,<selector/>中每个<item/>都是一个<layer-list/>,将@drawable/timer_center_bg作为背景在前景叠加圆形以区分不同状态。

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

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

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2633次
    • 积分:263
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:9篇
    • 译文:0篇
    • 评论:0条
    文章存档