泡面管家Android版开源 – Instant Noodles Master for Android Is Open Souce

专为泡面开发的一键计时器《泡面管家》Android版已开放源代码,并托管于GitHub上。
The One-Tap-Timer for instant noodles, Instant Noodles Master for Android, is now open source on GitHub.

开源项目URL是:
The URL of the open souce project is:

https://github.com/evisong/noodlesmaster

源代码早于2010年已托管在GoogleCode上,于2013年7月迁移至GitHub,原GoogleCode源代码将不再维护。
The souce code is originally hosted on GoogleCode since 2010, and was finally migrated to GitHub on July 2013, since then the copy on GoogleCode will no longer be maintained.


泡面管家Android 2.1版发布 – Instant Noodles Master for Android 2.1 Released

此版本中的新功能:
Recent changes:

全新《泡面管家》,将成为你最称心的泡面计时器。
Brand new NoodlesMaster, now is your best timer app for cooking instant noodles.

  • 可设置提醒铃声。
    Notification ring tone can be customizable now.
  • 默认提醒铃声更引人注意。
    Default notification ring tone lasts longer.
  • 加入官方微博链接。
    Link to official Weibo is added.

 

从谷歌Play市场安装:
Install from Google Play:

Get it on Google Play

或本地下载:
Or download the APK:

[wpdm_file id=2]

前一版本介绍:
Previous version:

泡面管家Android 2.0版发布 – Instant Noodles Master for Android 2.0 Released


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

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

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

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

当然也有缺点:

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

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

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

noodlesmaster_timer

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

noodlesmaster_timer_zoom

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

  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是否有瘦身的需要;
  • 图案是否足够简单;
  • 图案需要自由缩放;
  • 设计开发工作流程是否容许开发人员跨界;
  • 开发人力相对于设计人力更充足。

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