Android布局规范

文章转载禁止用于商业用途,且不能带有虚拟货币、积分、注册等附加条件。转载须注明出处莫高雷草原以及作者@JiongBull


布局规范


单位

1. 尺寸

除了在代码中会使用到像素单位的尺寸外,在布局文件中必须使用dp单位的尺寸。由于部分机型用户可以调整手机字体大小,为了避免字体大小的调整影响到布局结构,字号的单位也要求使用dp单位的尺寸。

我们适配三种像素密度的屏幕(hdpi、xhdpi、xxhdpi),他们的比例系数也是为1.5 : 2 : 3,也就是3 : 4 : 6,对于设计师来说,大致可以理解为在1080P屏幕上10dp表示30px,在720P屏幕上10dp表示20px,在480P屏幕上表示15px。

2. 色彩

色彩使用ARGB模式,用32位表示,例如#AABBCCDD,其中AA表示透明度,BB表示红色,CC表示绿色,DD表示蓝色。

注意:遵从设计规范,色值需要全部为大写。


图片

1. 分辨率

需要三种规格尺寸的图片,比例系数为1.5 : 2 : 3,也就是3 : 4 : 6。

例如logo的图片:

像素密度 比例系数 logo分辨率
hdpi 1.5 72 * 72
xhdpi 2.0 96 * 96
xxhdpi 3.0 144 * 144

注意:对于9-patch,也需要三种规格尺寸。

2. 状态

有些图片是有状态的,例如按钮、单选框、复选框等,我们对有状态的图片进行命名时会在图片名称后面后缀对应的状态字符串。

状态 后缀
默认  
按下 _p
选中 _c
不可用 _d

3. 大小


预定义色值

应用中出现的色值不应过多,这样应用才会显得简洁干净,风格统一。

下面的表格列举了应用中使用的预定义色值、名称和描述:

名称 色值 描述
blue_1 #0099FF 藍色
blue_2 #3366FF 藍色
gray_1 #F4F4F4 灰色
gray_2 #E6E6E6 灰色
gray_3 #E0E0E0 灰色
gray_4 #C7C7CC 灰色
gray_5 #666666 灰色
gray_6 #333333 灰色
white #FFFFFF 白色
black #000000 黑色

预定义字号

统一的字号标准可以使应用风格更加统一,在不同的设备上做到一致的用户体验。

下面的表格列举了应用中使用的预定义字号、名称和描述:

名称 w320dp大小 w360dp大小
text_size_1 11.8dp 13.3dp
text_size_2 14.2dp 16dp
text_size_3 17.2dp 19.3dp
text_size_4 24dp 27dp
text_size_5 48.9dp 56dp

预定义尺寸

预定义的尺寸对开发过程来说是非常方便的,可以节省很多在命名和计算过程上消耗的时间。

下面的表格列举了应用中使用的预定义尺寸、名称和描述:

名称 w320dp大小 w360dp大小
dimen_1 0.9dp 1dp
dimen_2 1.8dp 2dp
dimen_4 3.6dp 4dp
dimen_6 5.3dp 6dp
dimen_8 7.1dp 8dp
dimen_10 8.9dp 10dp
dimen_12 10.7dp 12dp
dimen_16 14.2dp 16dp
dimen_24 21.3dp 24dp
dimen_32 28.4dp 32dp
dimen_48 42.7dp 48dp
dimen_64 56.9dp 64dp
dimen_96 85.3dp 96dp
dimen_128 113.4dp 128dp

其他常用尺寸

名称 w320dp大小 w360dp大小 描述
actionbar_height 44.4dp 50dp 操作栏高度
actionbar_icon_width 44.4dp 50dp 操作栏图标宽度
actionbar_icon_height 44.4dp 50dp 操作栏图标高度
tab_host_height 49.2dp 55.3dp 选项栏高度
btn_width_1 100dp 112.5dp 小按钮宽度
btn_width_2 249.9dp 281.1dp 大按钮宽度
btn_height 249.9dp 36dp 大按钮宽度
item_height_1 43.8dp 49.3dp 项目高度
item_height_2 64dp 72dp 项目高度
item_height_3 73.3dp 81.3dp 项目高度
item_icon_width 35.6dp 40dp 项目图标宽度
item_icon_height 35.6dp 40dp 项目图标高度
corner_1 2.9dp 3.3dp 圆角弧度
corner_2 10dp 11.3dp 圆角弧度
divider_height 0.6dp 0.7dp 分割线高度

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。