In Design, WebTech

Android UI设计了解与切图基础

1 Android手机目前常见的分辨率

1.1 手机常见分辨率:

4:3
VGA     640*480 (Video Graphics Array)
QVGA  320*240 (Quarter VGA)
HVGA  480*320 (Half-size VGA)
SVGA  800*600 (Super VGA)

5:3
WVGA  800*480 (Wide VGA)

16:9
FWVGA 854*480 (Full Wide VGA)
HD        1920*1080 High Definition
QHD     960*540
720p    1280*720  标清
1080p  1920*1080 高清

手机:
iphone 4/4s    960*640 (3:2)
iphone5         1136*640
小米1             854*480(FWVGA)
小米2             1280*720

1.2 分辨率对应DPI
“HVGA    mdpi”——320*480

“WVGA   hdpi “——480*800
“FWVGA hdpi “——480*854
“QHD      hdpi “——540*960
“720P     xhdpi”——1280*720
“1080P   xxhdpi “——1920*1080

 

2 屏幕适配的注意事项

2.1 基本设置

 

2.1.1 AndroidManifest.xml设置

在中Menifest中添加子元素

android:anyDensity=”true”时,应用程序安装在不同密度的终端上时,程序会分别加载xxhdpi、xhdpi、hdpi、mdpi、ldpi文件夹中的资源。

相反,如果设为false,即使在文件夹下拥有相同资源,应用不会自动地去相应文件夹下寻找资源:

1) 如果drawable-hdpi、drawable-mdpi、drawable-ldpi三个文件夹中有同一张图片资源的不同密度表示,那么系统会去加载drawable_mdpi文件夹中的资源;

2) 如果drawable-hpdi中有高密度图片,其它两个文件夹中没有对应图片资源,那么系统会去加载drawable-hdpi中的资源,其他同理;

3) 如果drawable-hdpi,drawable-mdpi中有图片资源,drawable-ldpi中没有,系统会加载drawable-mdpi中的资源,其他同理,使用最接近的密度级别。

2.1.2 横屏竖屏目录区分

1) drawable

a) drawable-hdpi该图片即适用于横屏,也适用于竖屏;

b) drawable-land-hdpi,当屏幕为横屏,且为高密度时,加载此文件夹的资源;

c) drawable-port-hdpi,当屏幕为竖屏,且为高密度时,加载此文件夹中的资源。其他同理。

2) layout

在res目录下建立layout-port和layout-land两个目录,里面分别放置竖屏和横屏两种布局文件,以适应对横屏竖屏自动切换。

2.2 多屏幕适配的4条黄金原则

1) 在layout文件中设置控件尺寸时应采用fill_parent、wrap_content、match_parent和dp;

具体来说,设置view的属性android:layout_width和android:layout_height的值时,wrap_content,match_parent或dp比px更好,文字大小应该使用sp来定义

2) 在程序的代码中不要出现具体的像素值,在dimens.xml中定义;

为了使代码简单,android内部使用pix为单位表示控件的尺寸,但这是基于当前屏幕基础上的。为了适应多种屏幕,android建议开发者不要使用具体的像素来表示控件尺寸。

3) 不使用AbsoluteLayout(android1.5已废弃) ,可以使用RelativeLayout替代;

4) 对不同的屏幕提供合适大小的图片。

不同大小屏幕用不同大小的图片,low:medium:high:extra-high图片大小的比例为3:4:6:8;举例来说,对于中等密度(medium)的屏幕你的图片像素大小为48×48,那么低密度(low)屏幕的图片大小应为36×36,高(high)的为72×72,extra-high为96×96。

2.3 使用9-patch PNG图片

使用图片资源时,如果出现拉伸,因为图片处理的原因,会变形,导致界面走形。9-patch PNG图片也是一种标准的PGN图片,在原生PNG图片四周空出一个像素间隔,用来标识PNG图片中哪些部分可以拉伸、哪些不可以拉伸、背景上的边框位置等。

“上、左”定义可拉伸区域

“右、下”定义显示区域,如果用到完整填充的背景图,建议不要通过android:padding来设置边距,而是通过9-patch方式来定义。

Android SDK中提供了编辑9-Patch图片的工具,在tools目录下draw9patch.bat,能够立刻看到编辑后的拉伸效果,也可以直接用其他图片编辑工具编辑,但是看不到效果。

2.4 不同的layout

Android手机屏幕大小不一,有480×320, 640×360, 800×480……

怎样才能让Application自动适应不同的屏幕呢?

其实很简单,只需要在res目录下创建不同的layout文件夹,比如:layout-640×360、layout-800×480……所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。

2.5 测试验证

一般使用AVD Manager创建多个不同大小的模拟器,如果条件具备,也可以直接用真机测试,这个比较靠谱。

 

另外付上关于安卓好的文章

知乎的靠谱的回答:http://www.zhihu.com/question/19793577

安卓的一些尺寸:http://chicun.in/Android.html

官方Android Design规范(会更新但是全英文):http://developer.android.com/design/index.html

Android Design精品分析(作者NovaDNG): http://www.phonekr.com/author/novadng/

 

, , ,

4 Responses to Android UI设计了解与切图基础

  1. 学的到东西的事情是锻炼,学不到的是磨练。

  2. zengda说道:

    不错,不错,看看了!

  3. BWKeys说道:

    54113131313132

澳门巴黎人2785进行回复 取消回复

邮箱地址不会被公开。 必填项已用*标注