文章轉載禁止用於商業用途,且不能帶有虛擬貨幣、積分、註冊等附加條件。轉載須註明出處莫高雷草原以及作者@JiongBull。
Android佈局規範
單位
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 | 分割線高度 |