Android佈局規範

文章轉載禁止用於商業用途,且不能帶有虛擬貨幣、積分、註冊等附加條件。轉載須註明出處莫高雷草原以及作者@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 分割線高度
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章