版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。
轉(zhuǎn)載請注明出處:http://blog.csdn.net/zhaokaiqiang1992
Android的屏幕適配一直以來都在折磨著我們這些開發(fā)者,本篇文章以Google的官方文檔為基礎(chǔ),全面而深入的講解了Android屏幕適配的原因、重要概念、解決方案及最佳實踐,我相信如果你能認(rèn)真的學(xué)習(xí)本文,對于Android的屏幕適配,你將有所收獲!
使用wrap_contentmatch_parentweight
在我們學(xué)習(xí)如何進行屏幕適配之前,我們需要先了解下為什么Android需要進行屏幕適配。
由于Android系統(tǒng)的開放性,任何用戶、開發(fā)者、OEM廠商、運營商都可以對Android進行定制,修改成他們想要的樣子。
但是這種“碎片化”到底到達什么程度呢?
在2012年,OpenSignalMaps(以下簡稱OSM)發(fā)布了第一份Android碎片化報告,統(tǒng)計數(shù)據(jù)表明,
2012年,支持Android的設(shè)備共有3997種。
2013年,支持Android的設(shè)備共有11868種。
2014年,支持Android的設(shè)備共有18796種。
下面這張圖片所顯示的內(nèi)容足以充分說明當(dāng)今Android系統(tǒng)碎片化問題的嚴(yán)重性,因為該圖片中的每一個矩形都代表著一種Android設(shè)備。
而隨著支持Android系統(tǒng)的設(shè)備(手機、平板、電視、手表)的增多,設(shè)備碎片化、品牌碎片化、系統(tǒng)碎片化、傳感器碎片化和屏幕碎片化的程度也在不斷地加深。而我們今天要探討的,則是對我們開發(fā)影響比較大的——屏幕的碎片化。
下面這張圖是Android屏幕尺寸的示意圖,在這張圖里面,藍色矩形的大小代表不同尺寸,顏色深淺則代表所占百分比的大小。
而與之相對應(yīng)的,則是下面這張圖。這張圖顯示了IOS設(shè)備所需要進行適配的屏幕尺寸和占比。
當(dāng)然,這張圖片只是4,4s,5,5c,5s和平板的尺寸,現(xiàn)在還應(yīng)該加上新推出的iphone6和plus,但是和Android的屏幕碎片化程度相比而言,還是差的太遠(yuǎn)。
詳細(xì)的統(tǒng)計數(shù)據(jù)請到這里查看
現(xiàn)在你應(yīng)該很清楚為什么要對Android的屏幕進行適配了吧?屏幕尺寸這么多,為了讓我們開發(fā)的程序能夠比較美觀的顯示在不同尺寸、分辨率、像素密度(這些概念我會在下面詳細(xì)講解)的設(shè)備上,那就要在開發(fā)的過程中進行處理,至于如何去進行處理,這就是我們今天的主題了。
但是在開始進入主題之前,我們再來探討一件事情,那就是Android設(shè)備的屏幕尺寸,從幾寸的智能手機,到10寸的平板電腦,再到幾十寸的數(shù)字電視,我們應(yīng)該適配哪些設(shè)備呢?
其實這個問題不應(yīng)該這么考慮,因為對于具有相同像素密度的設(shè)備來說,像素越高,尺寸就越大,所以我們可以換個思路,將問題從單純的尺寸大小轉(zhuǎn)換到像素大小和像素密度的角度來。
下圖是2014年初,友盟統(tǒng)計的占比5%以上的6個主流分辨率,可以看出,占比最高的是480*800,320*480的設(shè)備竟然也占據(jù)了很大比例,但是和半年前的數(shù)據(jù)相比較,中低分辨率(320*480、480*800)的比例在減少,而中高分辨率的比例則在不斷地增加。雖然每個分辨率所占的比例在變化,但是總的趨勢沒變,還是這六種,只是分辨率在不斷地提高。
所以說,我們只要盡量適配這幾種分辨率,就可以在大部分的手機上正常運行了。
當(dāng)然了,這只是手機的適配,對于平板設(shè)備(電視也可以看做是平板),我們還需要一些其他的處理。
好了,到目前為止,我們已經(jīng)弄清楚了Android開發(fā)為什么要進行適配,以及我們應(yīng)該適配哪些對象,接下來,終于進入我們的正題了!
首先,我們先要學(xué)習(xí)幾個重要的概念。
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?
什么是dp、dip、dpi、sp、px?他們之間的關(guān)系是什么?
什么是mdpi、hdpi、xdpi、xxdpi?如何計算和區(qū)分?
在下面的內(nèi)容中我們將介紹這些概念。
屏幕尺寸指屏幕的對角線的長度,單位是英寸,1英寸=2.54厘米
比如常見的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
屏幕分辨率是指在橫縱向上的像素點數(shù),單位是px,1px=1個像素點。一般以縱向像素*橫向像素,如1960*1080。
屏幕像素密度是指每英寸上的像素點數(shù),單位是dpi,即“dot per inch”的縮寫。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān),在單一變化條件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。
px我們應(yīng)該是比較熟悉的,前面的分辨率就是用的像素為單位,大多數(shù)情況下,比如UI設(shè)計、Android原生API都會以px作為統(tǒng)一的計量單位,像是獲取屏幕寬高等。
dip和dp是一個意思,都是Density Independent Pixels的縮寫,即密度無關(guān)像素,上面我們說過,dpi是屏幕像素密度,假如一英寸里面有160個像素,這個屏幕的像素密度就是160dpi,那么在這種情況下,dp和px如何換算呢?在Android中,規(guī)定以160dpi為基準(zhǔn),1dip=1px,如果密度是320dpi,則1dip=2px,以此類推。
假如同樣都是畫一條320px的線,在480*800分辨率手機上顯示為2/3屏幕寬度,在320*480的手機上則占滿了全屏,如果使用dp為單位,在這兩種分辨率下,160dp都顯示為屏幕一半的長度。這也是為什么在Android開發(fā)中,寫布局的時候要盡量使用dp而不是px的原因。
而sp,即scale-independent pixels,與dp類似,但是可以根據(jù)文字大小首選項進行放縮,是設(shè)置字體大小的御用單位。
其實之前還有個ldpi,但是隨著移動設(shè)備配置的不斷升級,這個像素密度的設(shè)備已經(jīng)很罕見了,所在現(xiàn)在適配時不需考慮。
mdpi、hdpi、xdpi、xxdpi用來修飾Android中的drawable文件夾及values文件夾,用來區(qū)分不同像素密度下的圖片和dimen值。
那么如何區(qū)分呢?Google官方指定按照下列標(biāo)準(zhǔn)進行區(qū)分:
名稱像素密度范圍
mdpi120dpi~160dpi
hdpi160dpi~240dpi
xhdpi240dpi~320dpi
xxhdpi320dpi~480dpi
xxxhdpi480dpi~640dpi
在進行開發(fā)的時候,我們需要把合適大小的圖片放在合適的文件夾里面。下面以圖標(biāo)設(shè)計為例進行介紹。
在設(shè)計圖標(biāo)時,對于五種主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)應(yīng)按照 2:3:4:6:8 的比例進行縮放。例如,一個啟動圖標(biāo)的尺寸為48x48 dp,這表示在 MDPI 的屏幕上其實際尺寸應(yīng)為 48x48 px,在 HDPI 的屏幕上其實際大小是 MDPI 的 1.5 倍 (72x72 px),在 XDPI 的屏幕上其實際大小是 MDPI 的 2 倍 (96x96 px),依此類推。
雖然 Android 也支持低像素密度 (LDPI) 的屏幕,但無需為此費神,系統(tǒng)會自動將 HDPI 尺寸的圖標(biāo)縮小到 1/2 進行匹配。
下圖為圖標(biāo)的各個屏幕密度的對應(yīng)尺寸
屏幕密度圖標(biāo)尺寸
mdpi48x48px
hdpi72x72px
xhdpi96x96px
xxhdpi144x144px
xxxhdpi192x192px
使用wrap_content、match_parent、weight
要確保布局的靈活性并適應(yīng)各種尺寸的屏幕,應(yīng)使用 “wrap_content” 和 “match_parent” 控制某些視圖組件的寬度和高度。
使用 “wrap_content”,系統(tǒng)就會將視圖的寬度或高度設(shè)置成所需的最小尺寸以適應(yīng)視圖中的內(nèi)容,而 “match_parent”(在低于 API 級別 8 的級別中稱為 “fill_parent”)則會展開組件以匹配其父視圖的尺寸。
如果使用 “wrap_content” 和 “match_parent” 尺寸值而不是硬編碼的尺寸,視圖就會相應(yīng)地僅使用自身所需的空間或展開以填滿可用空間。此方法可讓布局正確適應(yīng)各種屏幕尺寸和屏幕方向。
下面是一段示例代碼
是在橫縱屏切換的時候的顯示效果,我們可以看到這樣可以很好的適配屏幕尺寸的變化。
weight是線性布局的一個獨特的屬性,我們可以使用這個屬性來按照比例對界面進行分配,完成一些特殊的需求。
但是,我們對于這個屬性的計算應(yīng)該如何理解呢?
首先看下面的例子,我們在布局中這樣設(shè)置我們的界面
我們在布局里面設(shè)置為線性布局,橫向排列,然后放置兩個寬度為0dp的按鈕,分別設(shè)置weight為1和2,在效果圖中,我們可以看到兩個按鈕按照1:2的寬度比例正常排列了,這也是我們經(jīng)常使用到的場景,這是時候很好理解,Button1的寬度就是1/(1+2) = 1/3,Button2的寬度則是2/(1+2) = 2/3,我們可以很清楚的明白這種情景下的占比如何計算。
但是假如我們的寬度不是0dp(wrap_content和0dp的效果相同),則是match_parent呢?
下面是設(shè)置為match_parent的效果
我們可以看到,在這種情況下,占比和上面正好相反,這是怎么回事呢?說到這里,我們就不得不提一下weight的計算方法了。
android:layout_weight的真實含義是:如果View設(shè)置了該屬性并且有效,那么該 View的寬度等于原有寬度(android:layout_width)加上剩余空間的占比。
從這個角度我們來解釋一下上面的現(xiàn)象。在上面的代碼中,我們設(shè)置每個Button的寬度都是match_parent,假設(shè)屏幕寬度為L,那么每個Button的寬度也應(yīng)該都為L,剩余寬度就等于L-(L+L)= -L。
Button1的weight=1,剩余寬度占比為1/(1+2)= 1/3,所以最終寬度為L+1/3*(-L)=2/3L,Button2的計算類似,最終寬度為L+2/3(-L)=1/3L。
這是在水平方向上的,那么在垂直方向上也是這樣嗎?
下面是測試代碼和效果
如果是垂直方向,那么我們應(yīng)該改變的是layout_height的屬性,下面是0dp的顯示效果
下面是match_parent的顯示效果,結(jié)論和水平是完全一樣的
雖然說我們演示了match_parent的顯示效果,并說明了原因,但是在真正用的時候,我們都是設(shè)置某一個屬性為0dp,然后按照權(quán)重計算所占百分比。
在開發(fā)中,我們大部分時候使用的都是線性布局、相對布局和幀布局,絕對布局由于適配性極差,所以極少使用。
由于各種布局的特點不一樣,所以不能說哪個布局好用,到底應(yīng)該使用什么布局只能根據(jù)實際需求來確定。我們可以使用 LinearLayout 的嵌套實例并結(jié)合 “wrap_content” 和 “match_parent”,以便構(gòu)建相當(dāng)復(fù)雜的布局。不過,我們無法通過 LinearLayout 精確控制子視圖的特殊關(guān)系;系統(tǒng)會將 LinearLayout 中的視圖直接并排列出。
如果我們需要將子視圖排列出各種效果而不是一條直線,通常更合適的解決方法是使用 RelativeLayout,這樣就可以根據(jù)各組件之間的特殊關(guān)系指定布局了。例如,我們可以將某個子視圖對齊到屏幕左側(cè),同時將另一個視圖對齊到屏幕右側(cè)。
下面的代碼以官方Demo為例說明。
在上面的代碼中我們使用了相對布局,并且使用alignXXX等屬性指定了子控件的位置,下面是這種布局方式在應(yīng)對屏幕變化時的表現(xiàn)
在小尺寸屏幕的顯示
在平板的大尺寸上的顯示效果
雖然控件的大小由于屏幕尺寸的增加而發(fā)生了改變,但是我們可以看到,由于使用了相對布局,所以控件之前的位置關(guān)系并沒有發(fā)生什么變化,這說明我們的適配成功了。
上面所提到的靈活布局或者是相對布局,可以為我們帶來的優(yōu)勢就只有這么多了。雖然這些布局可以拉伸組件內(nèi)外的空間以適應(yīng)各種屏幕,但它們不一定能為每種屏幕都提供最佳的用戶體驗。因此,我們的應(yīng)用不僅僅只實施靈活布局,還應(yīng)該應(yīng)針對各種屏幕配置提供一些備用布局。
如何做到這一點呢?我們可以通過使用配置限定符,在運行時根據(jù)當(dāng)前的設(shè)備配置自動選擇合適的資源了,例如根據(jù)各種屏幕尺寸選擇不同的布局。
很多應(yīng)用會在較大的屏幕上實施“雙面板”模式,即在一個面板上顯示項目列表,而在另一面板上顯示對應(yīng)內(nèi)容。平板電腦和電視的屏幕已經(jīng)大到可以同時容納這兩個面板了,但手機屏幕就需要分別顯示。因此,我們可以使用以下文件以便實施這些布局:
res/layout/main.xml,單面板(默認(rèn))布局:
請注意第二種布局名稱目錄中的 large 限定符。系統(tǒng)會在屬于較大屏幕(例如 7 英寸或更大的平板電腦)的設(shè)備上選擇此布局。系統(tǒng)會在較小的屏幕上選擇其他布局(無限定符)。
在版本低于 3.2 的 Android 設(shè)備上,開發(fā)人員遇到的問題之一是“較大”屏幕的尺寸范圍,該問題會影響戴爾 Streak、早期的 Galaxy Tab 以及大部分 7 英寸平板電腦。即使這些設(shè)備的屏幕屬于“較大”的尺寸,但很多應(yīng)用可能會針對此類別中的各種設(shè)備(例如 5 英寸和 7 英寸的設(shè)備)顯示不同的布局。這就是 Android 3.2 版在引入其他限定符的同時引入“最小寬度”限定符的原因。
最小寬度限定符可讓您通過指定某個最小寬度(以 dp 為單位)來定位屏幕。例如,標(biāo)準(zhǔn) 7 英寸平板電腦的最小寬度為 600 dp,因此如果您要在此類屏幕上的用戶界面中使用雙面板(但在較小的屏幕上只顯示列表),您可以使用上文中所述的單面板和雙面板這兩種布局,但您應(yīng)使用 sw600dp 指明雙面板布局僅適用于最小寬度為 600 dp 的屏幕,而不是使用 large 尺寸限定符。
res/layout/main.xml,單面板(默認(rèn))布局:
也就是說,對于最小寬度大于等于 600 dp 的設(shè)備,系統(tǒng)會選擇 layout-sw600dp/main.xml(雙面板)布局,否則系統(tǒng)就會選擇 layout/main.xml(單面板)布局。
但 Android 版本低于 3.2 的設(shè)備不支持此技術(shù),原因是這些設(shè)備無法將 sw600dp 識別為尺寸限定符,因此我們?nèi)孕枋褂?large 限定符。這樣一來,就會有一個名稱為 res/layout-large/main.xml 的文件(與 res/layout-sw600dp/main.xml 一樣)。但是沒有太大關(guān)系,我們將馬上學(xué)習(xí)如何避免此類布局文件出現(xiàn)的重復(fù)。
最小寬度限定符僅適用于 Android 3.2 及更高版本。因此,如果我們?nèi)孕枋褂门c較低版本兼容的概括尺寸范圍(小、正常、大和特大)。例如,如果要將用戶界面設(shè)計成在手機上顯示單面板,但在 7 英寸平板電腦、電視和其他較大的設(shè)備上顯示多面板,那么我們就需要提供以下文件:
res/layout/main.xml: 單面板布局
res/layout-large: 多面板布局
res/layout-sw600dp: 多面板布局
后兩個文件是相同的,因為其中一個用于和 Android 3.2 設(shè)備匹配,而另一個則是為使用較低版本 Android 的平板電腦和電視準(zhǔn)備的。
要避免平板電腦和電視的文件出現(xiàn)重復(fù)(以及由此帶來的維護問題),您可以使用別名文件。例如,您可以定義以下布局:
res/layout/main.xml,單面板布局
res/layout/main_twopanes.xml,雙面板布局
然后添加這兩個文件:
res/values-large/layout.xml:
@layout/main_twopanes
res/values-sw600dp/layout.xml:
@layout/main_twopanes
后兩個文件的內(nèi)容相同,但它們并未實際定義布局。它們只是將 main 設(shè)置成了 main_twopanes 的別名。由于這些文件包含 large 和 sw600dp 選擇器,因此無論 Android 版本如何,系統(tǒng)都會將這些文件應(yīng)用到平板電腦和電視上(版本低于 3.2 的平板電腦和電視會匹配 large,版本高于 3.2 的平板電腦和電視則會匹配 sw600dp)。
某些布局會同時支持橫向模式和縱向模式,但我們可以通過調(diào)整優(yōu)化其中大部分布局的效果。在新聞閱讀器示例應(yīng)用中,每種屏幕尺寸和屏幕方向下的布局行為方式如下所示:
小屏幕,縱向:單面板,帶徽標(biāo)
小屏幕,橫向:單面板,帶徽標(biāo)
7 英寸平板電腦,縱向:單面板,帶操作欄
7 英寸平板電腦,橫向:雙面板,寬,帶操作欄
10 英寸平板電腦,縱向:雙面板,窄,帶操作欄
10 英寸平板電腦,橫向:雙面板,寬,帶操作欄
電視,橫向:雙面板,寬,帶操作欄
因此,這些布局中的每一種都定義在了 res/layout/ 目錄下的某個 XML 文件中。為了繼續(xù)將每個布局分配給各種屏幕配置,該應(yīng)用會使用布局別名將兩者相匹配:
既然我們已定義了所有可能的布局,那就只需使用配置限定符將正確的布局映射到各種配置即可。
現(xiàn)在只需使用布局別名技術(shù)即可做到這一點:
res/values/layouts.xml:
@layout/onepane_with_barfalse
res/values-sw600dp-land/layouts.xml:
@layout/twopanestrue
res/values-sw600dp-port/layouts.xml:
@layout/onepanefalse
res/values-large-land/layouts.xml:
@layout/twopanestrue
res/values-large-port/layouts.xml:
@layout/twopanes_narrowtrue
支持各種屏幕尺寸通常意味著您的圖片資源還必須能適應(yīng)各種尺寸。例如,無論要應(yīng)用到什么形狀的按鈕上,按鈕背景都必須能適應(yīng)。
如果在可以更改尺寸的組件上使用了簡單的圖片,您很快就會發(fā)現(xiàn)顯示效果多少有些不太理想,因為系統(tǒng)會在運行時平均地拉伸或收縮您的圖片。解決方法為使用自動拉伸位圖,這是一種格式特殊的 PNG 文件,其中會指明可以拉伸以及不可以拉伸的區(qū)域。
.9的制作,實際上就是在原圖片上添加1px的邊界,然后按照我們的需求,把對應(yīng)的位置設(shè)置成黑色線,系統(tǒng)就會根據(jù)我們的實際需求進行拉伸。
下圖是對.9圖的四邊的含義的解釋,左上邊代表拉伸區(qū)域,右下邊代表padding box,就是間隔區(qū)域,在下面,我們給出一個例子,方便大家理解。
先看下面兩張圖,我們理解一下這四條線的含義。
上圖和下圖的區(qū)別,就在于右下邊的黑線不一樣,具體的效果的區(qū)別,看右邊的效果圖。上圖效果圖中深藍色的區(qū)域,代表內(nèi)容區(qū)域,我們可以看到是在正中央的,這是因為我們在右下邊的是兩個點,這兩個點距離上下左右四個方向的距離就是padding的距離,所以深藍色內(nèi)容區(qū)域在圖片正中央,我們再看下圖,由于右下邊的黑線是圖片長度,所以就沒有padding,從效果圖上的表現(xiàn)就是深藍色區(qū)域和圖片一樣大,因此,我們可以利用右下邊來控制內(nèi)容與背景圖邊緣的padding。
如果你還不明白,那么我們看下面的效果圖,我們分別以圖一和圖二作為背景圖,下面是效果圖。
我們可以看到,使用wrap_content屬性設(shè)置長寬,圖一比圖二的效果大一圈,這是為什么呢?還記得我上面說的padding嗎?
這就是padding的效果提現(xiàn),怎么證明呢?我們再看下面一張圖,給圖一添加padding=0,這樣背景圖設(shè)置的padding效果就沒了,是不是兩個一樣大了?
ok,我想你應(yīng)該明白右下邊的黑線的含義了,下面我們再看一下左上邊的效果。
下面我們只設(shè)置了左上邊線,效果圖如下
上面的線沒有包住圖標(biāo),下面的線正好包住了圖標(biāo),從右邊的效果圖應(yīng)該可以看出差別,黑線所在的區(qū)域就是拉伸區(qū)域,上圖黑線所在的全是純色,所以圖標(biāo)不變形,下面的拉伸區(qū)域包裹了圖標(biāo),所以在拉伸的時候就會對圖標(biāo)進行拉伸,但是這樣就會導(dǎo)致圖標(biāo)變形。注意到下面紅線區(qū)域了嘛?這是系統(tǒng)提示我們的,因為這樣拉伸,不符合要求,所以會提示一下。