1.幾個概念
(1)屏幕尺寸:
屏幕的對角線的長度。單位英寸。1英寸=2.54釐米。(2)屏幕分辨率:
在橫縱方向上的像素點數。單位px。1px=1個像素點。一般以”縱向x橫向”像素表示,如1920x1080
(3)屏幕像素密度:
每英寸上的像素點數。單位是dpi。因此,屏幕像素密度與屏幕尺寸和屏幕分辨率有關。
例如:1920x1080像素,5.4英寸的屏幕的像素密度爲
sqrt(1920^2+1080^2)/5.4=408dpi。
2.dip或dp
dip或dp都是密度無關像素。(所以Android佈局裏面推薦使用這個作爲單位)。
以160dpi爲基準,1dip=1px。
3.sp
sp:Scale-Independent Pixels
可以根據文字大小首選項進行縮放。
推薦使用12sp,14sp,18sp,22sp四個值來定義Android文字大小。
4.mdpi、hdpi、xhdpi、xxhdpi、xxxdpi
mdpi:120dpi~160dpi
hdpi:160dpi~240dpi
xhdpi:240dpi~320dpi
xxhdpi:320dpi~480dpi
xxxhdpi:480dpi~640dpi
因此再設計圖標時,應按照2:3:4:6:8比例縮放。
例如一個啓動圖標的大小爲48x48 dp,這表示
在mdpi的屏幕上其實際尺寸應該爲(48x48 px),
在hdpi的屏幕上其實際大小是mdpi的1.5倍(72x72 px),
在xhdpi的屏幕上其實際大小是mdpi的2倍(96x96 px)。
在xxhdpi的屏幕上其實際大小是mdpi的3倍(144x144 px),
在xxxhdpi的屏幕上其實際大小是mdpi的4倍(192x192 px)。
5.wrap_content和match_parent
wrap_content:包裹內容。
match_parent:填充父容器。
6.LinearLayout和weight
weight:權重,用於線性佈局的子控件的比例。
計算公式:
計算出的寬度 = 原來寬度+(原來寬度-所佔寬度之和)*權重百分比。
例如:
水平線性佈局裏面有兩個按鈕:
button1,weight=1
button2,weight=2
如果屏幕寬度L,
那麼,對於button1,
1)如果寬度設爲0dp,
button1寬度1/3L=0+(L-0)*1/3
2)那麼寬度設爲match_parent,
button1寬度2/3L=L+(L-2L)*1/3
7.RelativeLayout
推薦使用相對佈局,而不使用絕對佈局。
相對佈局適用於子控件存在比較複雜的相對關係。
7.限定符
(1)尺寸限定符 large
注意:只在android3.2之前起作用
手機:
res/layout/main.xml
平板:
res/layout-large/main.xml
(2)最小寬度限定符 sw ( small width )
那麼android3.2之後可以使用這種方式
手機:
res/layout/main.xml
平板:
res/layout-sw600dp/main.xml
(3)屏幕方向限定符
橫屏:land
res/values-sw600dp-land/layouts.xml:
<resource>
<item name="main" type="layout">@layout/main-twopanes</item>
</resource>
豎屏:port
res/values-sw600dp-port/layouts.xml:
<resource>
<item name="main" type="layout">@layout/main</item>
</resource>
8.佈局別名
使用佈局別名比上面的限定符好用:
首先定義兩個佈局文件:
res/layout/main.xml
res/layout/main_twopanes.xml
然後定義三個屬性文件:
(i)默認佈局:
res/values/layout.xml:
<resource>
<item name="main" type="layout">@layout/main</item>
</resource>
(ii)Android3.2之前的平板佈局:
res/values-large/layout.xml:
<resource>
<item name="main" type="layout">@layout/main_twopanes</item>
</resource>
(iii)Android3.2後的佈局:
res/values-sw600dp/layout.xml:
<resource>
<item name="main" type="layout">@layout/main_twopanes</item>
</resource>
這裏佈局別名即爲“main”,那麼設置佈局的時候應該使用佈局別名:
setContentView(R.layout.main);
9.nine-patch圖
爲什麼要是用9-patch圖呢?
因爲普通圖片拉伸是成比例拉伸的,每個地方都會被拉伸。
如果想只拉伸指定部分,那麼就要使用9-patch圖片了。
工具:SDK安裝目錄下的tools目錄下的draw9patch.bat。
雙擊運行,初始界面如下:
點擊File-Open 9-patch…,選擇一張圖片。界面如下:
然後主要就是Alt和Shift兩個按鈕配合鼠標完成製作。
按住Alt鍵,鼠標點擊圖片的上邊框,出現一個黑點。這個黑點就決定了左右拉伸的範圍。也就是說,如果拉伸只會將黑點那一列的圖像進行橫向拉伸。如圖所示
如果畫錯了,可以按住Shift鍵,點擊黑點,則擦除了黑點。
然後按住Alt鍵,鼠標點擊圖片的左邊框,出現一個黑點。這個黑點就決定了上下拉伸的範圍。也就是說,如果拉伸只會將黑點那一行的圖像進行縱向拉伸。如圖所示
然後按住Alt鍵,鼠標沿着圖片下邊框拖動出黑線。這條黑線決定了圖片顯示內容的橫向區域。如圖所示
同理,按住Alt鍵,鼠標沿着圖片右邊框拖動出黑線。這條黑線決定了圖片顯示內容的縱向區域。如圖所示
到此,一張9-patch圖就製作完成了。
點擊File, 選擇save-9-patch…,選擇保存路徑即可保存。可以看到圖片的後綴名爲.9.png。如圖所示