多图详解 “Android UI”设计官方教程(二)

移动开发 Android
本文为Android的官方开发者博客发了一份幻灯片的翻译文档的第二部分,专门介绍了一些Android UI设计的小贴士。希望大家喜欢。

编者注:本文为Android的官方开发者博客发了一份幻灯片的翻译文档的第二部分,专门介绍了一些Android UI设计的小贴士,我们在介绍这个幻灯片的第一部分《多图详解 “Android UI”设计官方教程》之后很多朋友都在等待第二部分,我们第一时间为大家提供本文的翻译文档,希望大家喜欢。

想了解全部Android UI教程内容请点击51CTO独家专题:谷歌官方教程:Android UI设计技巧

Android UI 框架特性

你必须了解(使用)的 UI 框架特性。

使用相对布局管理界面元素。

译者注:相对布局和线性布局是Android里面常用的两种布局,线性布局比较简单,而相对布局可以做出比较复杂的布局管理,所以仅仅了解线性布局,很多时候是不够的。不过以作者之前Qt的经验来看,Android里面的布局管理功能都比较阳春也不太容易使用,不过这可能是跟移动平台的性能考量有关系。

#p#

合理使用资源修饰符

使用资源修饰符来修饰同一套资源的多个不同版本。

◆一个apk包里面会包含所有的资源文件。

◆系统在运行时会根据软硬件环境来自动选择相应修饰符版本的资源。

译者注:最常用的修饰符可能是locale修饰符(制作多语文本),dpi修饰符(为不同密度的屏幕制作不同尺寸的图标和皮肤),orientation修饰符(为横屏和竖屏提供不同的UI布局)。如果系统找不到对应的修饰符版本,它就会选择无修饰符的版本,这个版本通常也是所谓的默认选择。

#p#

9-patch drawables

使用 9-patch drawables – foo.9.png

◆9-patch drawables 的语法跟CSS3 border image 类似

◆根据边缘的像素宽度切割出不同的拉伸区域

◆最好同时提供 mdpi 和 hdpi 的版本

译者注:drawables 在 Android 里面跟 WPF 里面的 Drawing 类似,用于定义一个可绘制的对象,包括位图,刷子,填充颜色或者以上物件的组合等等。所谓 9-patch drawables,就是将一个 drawable 按照定义的 4 个边缘的宽度大小切割成9个区域,包括4个角落,4条边缘和一个中心区域,当把这个 drawable 绘制到一个任意矩形区域时,drawable 的各个区域有不同的拉伸控制(角落不拉伸,横边横向拉伸,竖边竖向拉伸,中心区域横竖向都拉伸)。通常使用 9-patch drawable 一般是为了绘制出比较漂亮的带圆角背景,这样可以避免圆角及边缘被任意拉伸导致变形。当然,如果你的程序里面绘制的图像和目标区域大小完全一样,就不需要那么麻烦,不过以 Android 的状况来说,为了适应多种设备,最好不要事先假设目标区域的像素大小。

#p#

使用状态列表和多层叠加来制作具备复杂效果的可绘制图像

使用 Selector (state list) drawables (状态列表)来提供不同状态(normal,disabled,focused,pressed…)下的绘制图像。

使用 Layer drawables (多层叠加)来制作具备复杂效果的可绘制图像。

译者注:所谓多层叠加,使用PS来制作图标和皮肤的同学可能都清楚,比如说一个按钮的PS模板通常会包括所谓的background层定义底色,mask层定义轮廓,shine层定义前景的高亮效果。而 Android 里面允许你直接在 XML 脚本里面使用 Layer drawables 的语法来定义上述的多层叠加效果,这样可能比在PS里面直接做好要更灵活一些,并且有的层可以是来自png位图,有的层可以是直接通过 XML 脚本生成(比如纯色,过渡色等等)。

【编辑推荐】

  1. 多图详解 “Android UI”设计官方教程
  2. Android UI设计大有可为 或可超越iPhone(视频)
  3. 怎样进行Android UI元素设计
  4. 对Android UI实例全解析
责任编辑:佚名 来源: 谷奥
相关推荐

2010-09-02 14:47:40

UIAndroid

2010-12-10 10:16:21

Android 2.3

2011-01-25 09:31:01

设计元素UIwebOS

2011-02-17 13:35:12

ADT 9.0.0ADT下载ADT安装

2011-09-13 16:39:50

Android UI设

2011-05-12 08:49:58

iPhone SDKXcode

2011-04-28 11:33:33

MeeGo平板电脑

2010-06-11 14:55:20

2010-09-06 10:15:13

UI设计MeeGo

2010-09-16 15:13:30

Symbian^3Symbian

2010-12-12 09:40:00

Android UI设

2022-02-23 20:56:31

Windows 11快捷键太阳谷2

2011-05-31 13:56:55

Xcode 4

2010-07-19 10:59:26

Eclipse 3.6Tomcat 7配置教程

2010-12-09 11:22:05

Android

2010-11-29 09:46:35

Dalvik系统架构Android

2011-06-01 16:12:11

Android UI

2012-03-01 20:14:25

Android UI

2012-07-17 09:04:56

Office 15

2011-05-28 12:19:33

设计技巧UIAndroid
点赞
收藏

51CTO技术栈公众号