日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 运维知识 > Android >内容正文

Android

Android屏幕适配全攻略(最权威的官方适配指导)(转),共大家分享。

發(fā)布時(shí)間:2024/8/26 Android 47 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Android屏幕适配全攻略(最权威的官方适配指导)(转),共大家分享。 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Android的屏幕適配一直以來都在折磨著我們這些開發(fā)者,本篇文章以Google的官方文檔為基礎(chǔ),全面而深入的講解了Android屏幕適配的原因、重要概念、解決方案及最佳實(shí)踐,我相信如果你能認(rèn)真的學(xué)習(xí)本文,對于Android的屏幕適配,你將有所收獲!

?

  • Android屏幕適配出現(xiàn)的原因
  • 重要概念
    • 屏幕尺寸
    • 屏幕分辨率
    • 屏幕像素密度
    • dpdipdpisppx
    • mdpihdpixdpixxdpi
  • 解決方案
    • 支持各種屏幕尺寸
      • 使用wrap_contentmatch_parentweight
      • 使用相對布局禁用絕對布局
      • 使用限定符
        • 使用尺寸限定符
        • 使用最小寬度限定符
        • 使用布局別名
        • 使用屏幕方向限定符
        • 使用自動(dòng)拉伸位圖
    • 支持各種屏幕密度
      • 使用非密度制約像素
      • 提供備用位圖
    • 實(shí)施自適應(yīng)用戶界面流程
      • 確定當(dāng)前布局
      • 根據(jù)當(dāng)前布局做出響應(yīng)
      • 重復(fù)使用其他活動(dòng)中的片段
      • 處理屏幕配置變化
    • 最佳實(shí)踐
      • 關(guān)于高清設(shè)計(jì)圖尺寸
      • ImageView的ScaleType屬性
      • 動(dòng)態(tài)設(shè)置
    • 更多參考資料

?

Android屏幕適配出現(xiàn)的原因

在我們學(xué)習(xí)如何進(jìn)行屏幕適配之前,我們需要先了解下為什么Android需要進(jìn)行屏幕適配。

由于Android系統(tǒng)的開放性,任何用戶、開發(fā)者、OEM廠商、運(yùn)營商都可以對Android進(jìn)行定制,修改成他們想要的樣子。

但是這種“碎片化”到底到達(dá)什么程度呢?

在2012年,OpenSignalMaps(以下簡稱OSM)發(fā)布了第一份Android碎片化報(bào)告,統(tǒng)計(jì)數(shù)據(jù)表明,

  • 2012年,支持Android的設(shè)備共有3997種。
  • 2013年,支持Android的設(shè)備共有11868種。
  • 2014年,支持Android的設(shè)備共有18796種。

下面這張圖片所顯示的內(nèi)容足以充分說明當(dāng)今Android系統(tǒng)碎片化問題的嚴(yán)重性,因?yàn)樵搱D片中的每一個(gè)矩形都代表著一種Android設(shè)備。

而隨著支持Android系統(tǒng)的設(shè)備(手機(jī)、平板、電視、手表)的增多,設(shè)備碎片化、品牌碎片化、系統(tǒng)碎片化、傳感器碎片化和屏幕碎片化的程度也在不斷地加深。而我們今天要探討的,則是對我們開發(fā)影響比較大的——屏幕的碎片化。

下面這張圖是Android屏幕尺寸的示意圖,在這張圖里面,藍(lán)色矩形的大小代表不同尺寸,顏色深淺則代表所占百分比的大小。

而與之相對應(yīng)的,則是下面這張圖。這張圖顯示了IOS設(shè)備所需要進(jìn)行適配的屏幕尺寸和占比。

當(dāng)然,這張圖片只是4,4s,5,5c,5s和平板的尺寸,現(xiàn)在還應(yīng)該加上新推出的iphone6和plus,但是和Android的屏幕碎片化程度相比而言,還是差的太遠(yuǎn)。

詳細(xì)的統(tǒng)計(jì)數(shù)據(jù)請到這里查看

現(xiàn)在你應(yīng)該很清楚為什么要對Android的屏幕進(jìn)行適配了吧?屏幕尺寸這么多,為了讓我們開發(fā)的程序能夠比較美觀的顯示在不同尺寸、分辨率、像素密度(這些概念我會(huì)在下面詳細(xì)講解)的設(shè)備上,那就要在開發(fā)的過程中進(jìn)行處理,至于如何去進(jìn)行處理,這就是我們今天的主題了。

但是在開始進(jìn)入主題之前,我們再來探討一件事情,那就是Android設(shè)備的屏幕尺寸,從幾寸的智能手機(jī),到10寸的平板電腦,再到幾十寸的數(shù)字電視,我們應(yīng)該適配哪些設(shè)備呢?

其實(shí)這個(gè)問題不應(yīng)該這么考慮,因?yàn)閷τ诰哂邢嗤袼孛芏鹊脑O(shè)備來說,像素越高,尺寸就越大,所以我們可以換個(gè)思路,將問題從單純的尺寸大小轉(zhuǎn)換到像素大小和像素密度的角度來。

下圖是2014年初,友盟統(tǒng)計(jì)的占比5%以上的6個(gè)主流分辨率,可以看出,占比最高的是480*800,320*480的設(shè)備竟然也占據(jù)了很大比例,但是和半年前的數(shù)據(jù)相比較,中低分辨率(320*480、480*800)的比例在減少,而中高分辨率的比例則在不斷地增加。雖然每個(gè)分辨率所占的比例在變化,但是總的趨勢沒變,還是這六種,只是分辨率在不斷地提高。

所以說,我們只要盡量適配這幾種分辨率,就可以在大部分的手機(jī)上正常運(yùn)行了。

當(dāng)然了,這只是手機(jī)的適配,對于平板設(shè)備(電視也可以看做是平板),我們還需要一些其他的處理。

好了,到目前為止,我們已經(jīng)弄清楚了Android開發(fā)為什么要進(jìn)行適配,以及我們應(yīng)該適配哪些對象,接下來,終于進(jìn)入我們的正題了!

首先,我們先要學(xué)習(xí)幾個(gè)重要的概念。

重要概念

什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?? 什么是dp、dip、dpi、sp、px?他們之間的關(guān)系是什么?? 什么是mdpi、hdpi、xdpi、xxdpi?如何計(jì)算和區(qū)分?

在下面的內(nèi)容中我們將介紹這些概念。

屏幕尺寸

屏幕尺寸指屏幕的對角線的長度,單位是英寸,1英寸=2.54厘米

比如常見的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

屏幕分辨率

屏幕分辨率是指在橫縱向上的像素點(diǎn)數(shù),單位是px,1px=1個(gè)像素點(diǎn)。一般以縱向像素*橫向像素,如1960*1080。

屏幕像素密度

屏幕像素密度是指每英寸上的像素點(diǎn)數(shù),單位是dpi,即“dot per inch”的縮寫。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān),在單一變化條件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

dp、dip、dpi、sp、px

px我們應(yīng)該是比較熟悉的,前面的分辨率就是用的像素為單位,大多數(shù)情況下,比如UI設(shè)計(jì)、Android原生API都會(huì)以px作為統(tǒng)一的計(jì)量單位,像是獲取屏幕寬高等。

dip和dp是一個(gè)意思,都是Density Independent Pixels的縮寫,即密度無關(guān)像素,上面我們說過,dpi是屏幕像素密度,假如一英寸里面有160個(gè)像素,這個(gè)屏幕的像素密度就是160dpi,那么在這種情況下,dp和px如何換算呢?在Android中,規(guī)定以160dpi為基準(zhǔn),1dip=1px,如果密度是320dpi,則1dip=2px,以此類推。

假如同樣都是畫一條320px的線,在480*800分辨率手機(jī)上顯示為2/3屏幕寬度,在320*480的手機(jī)上則占滿了全屏,如果使用dp為單位,在這兩種分辨率下,160dp都顯示為屏幕一般的長度。這也是為什么在Android開發(fā)中,寫布局的時(shí)候要盡量使用dp而不是px的原因。

而sp,即scale-independent pixels,與dp類似,但是可以根據(jù)文字大小首選項(xiàng)進(jìn)行放縮,是設(shè)置字體大小的御用單位。

mdpi、hdpi、xdpi、xxdpi

其實(shí)之前還有個(gè)ldpi,但是隨著移動(dòng)設(shè)備配置的不斷升級,這個(gè)像素密度的設(shè)備已經(jīng)很罕見了,所在現(xiàn)在適配時(shí)不需考慮。

mdpi、hdpi、xdpi、xxdpi用來修飾Android中的drawable文件夾及values文件夾,用來區(qū)分不同像素密度下的圖片和dimen值。

那么如何區(qū)分呢?Google官方指定按照下列標(biāo)準(zhǔn)進(jìn)行區(qū)分:

名稱像素密度范圍
mdpi120dpi~160dpi
hdpi160dpi~240dpi
xhdpi240dpi~320dpi
xxhdpi320dpi~480dpi
xxxhdpi480dpi~640dpi

在進(jìn)行開發(fā)的時(shí)候,我們需要把合適大小的圖片放在合適的文件夾里面。下面以圖標(biāo)設(shè)計(jì)為例進(jìn)行介紹。

在設(shè)計(jì)圖標(biāo)時(shí),對于五種主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)應(yīng)按照 2:3:4:6:8 的比例進(jìn)行縮放。例如,一個(gè)啟動(dòng)圖標(biāo)的尺寸為48x48 dp,這表示在 MDPI 的屏幕上其實(shí)際尺寸應(yīng)為 48x48 px,在 HDPI 的屏幕上其實(shí)際大小是 MDPI 的 1.5 倍 (72x72 px),在 XDPI 的屏幕上其實(shí)際大小是 MDPI 的 2 倍 (96x96 px),依此類推。

雖然 Android 也支持低像素密度 (LDPI) 的屏幕,但無需為此費(fèi)神,系統(tǒng)會(huì)自動(dòng)將 HDPI 尺寸的圖標(biāo)縮小到 1/2 進(jìn)行匹配。

下圖為圖標(biāo)的各個(gè)屏幕密度的對應(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)就會(huì)將視圖的寬度或高度設(shè)置成所需的最小尺寸以適應(yīng)視圖中的內(nèi)容,而 “match_parent”(在低于 API 級別 8 的級別中稱為 “fill_parent”)則會(huì)展開組件以匹配其父視圖的尺寸。

如果使用 “wrap_content” 和 “match_parent” 尺寸值而不是硬編碼的尺寸,視圖就會(huì)相應(yīng)地僅使用自身所需的空間或展開以填滿可用空間。此方法可讓布局正確適應(yīng)各種屏幕尺寸和屏幕方向。

下面是一段示例代碼

<code class="hljs xml has-numbering" ><span class="hljs-tag" ><<span class="hljs-title" >LinearLayout</span> <span class="hljs-attribute" >xmlns:android</span>=<span class="hljs-value" >"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute" >android:orientation</span>=<span class="hljs-value" >"vertical"</span> <span class="hljs-attribute" >android:layout_width</span>=<span class="hljs-value" >"match_parent"</span> <span class="hljs-attribute" >android:layout_height</span>=<span class="hljs-value" >"match_parent"</span>></span> <span class="hljs-tag" ><<span class="hljs-title" >LinearLayout</span> <span class="hljs-attribute" >android:layout_width</span>=<span class="hljs-value" >"match_parent"</span> <span class="hljs-attribute" >android:id</span>=<span class="hljs-value" >"@+id/linearLayout1"</span> <span class="hljs-attribute" >android:gravity</span>=<span class="hljs-value" >"center"</span> <span class="hljs-attribute" >android:layout_height</span>=<span class="hljs-value" >"50dp"</span>></span> <span class="hljs-tag" ><<span class="hljs-title" >ImageView</span> <span class="hljs-attribute" >android:id</span>=<span class="hljs-value" >"@+id/imageView1"</span> <span class="hljs-attribute" >android:layout_height</span>=<span class="hljs-value" >"wrap_content"</span> <span class="hljs-attribute" >android:layout_width</span>=<span class="hljs-value" >"wrap_content"</span> <span class="hljs-attribute" >android:src</span>=<span class="hljs-value" >"@drawable/logo"</span> <span class="hljs-attribute" >android:paddingRight</span>=<span class="hljs-value" >"30dp"</span> <span class="hljs-attribute" >android:layout_gravity</span>=<span class="hljs-value" >"left"</span> <span class="hljs-attribute" >android:layout_weight</span>=<span class="hljs-value" >"0"</span> /></span> <span class="hljs-tag" ><<span class="hljs-title" >View</span> <span class="hljs-attribute" >android:layout_height</span>=<span class="hljs-value" >"wrap_content"</span> <span class="hljs-attribute" >android:id</span>=<span class="hljs-value" >"@+id/view1"</span> <span class="hljs-attribute" >android:layout_width</span>=<span class="hljs-value" >"wrap_content"</span> <span class="hljs-attribute" >android:layout_weight</span>=<span class="hljs-value" >"1"</span> /></span> <span class="hljs-tag" ><<span class="hljs-title" >Button</span> <span class="hljs-attribute" >android:id</span>=<span class="hljs-value" >"@+id/categorybutton"</span> <span class="hljs-attribute" >android:background</span>=<span class="hljs-value" >"@drawable/button_bg"</span> <span class="hljs-attribute" >android:layout_height</span>=<span class="hljs-value" >"match_parent"</span> <span class="hljs-attribute" >android:layout_weight</span>=<span class="hljs-value" >"0"</span> <span class="hljs-attribute" >android:layout_width</span>=<span class="hljs-value" >"120dp"</span> <span class="hljs-attribute" >style</span>=<span class="hljs-value" >"@style/CategoryButtonStyle"</span>/></span> <span class="hljs-tag" ></<span class="hljs-title" >LinearLayout</span>></span> <span class="hljs-tag" ><<span class="hljs-title" >fragment</span> <span class="hljs-attribute" >android:id</span>=<span class="hljs-value" >"@+id/headlines"</span> <span class="hljs-attribute" >android:layout_height</span>=<span class="hljs-value" >"fill_parent"</span> <span class="hljs-attribute" >android:name</span>=<span class="hljs-value" >"com.example.android.newsreader.HeadlinesFragment"</span> <span class="hljs-attribute" >android:layout_width</span>=<span class="hljs-value" >"match_parent"</span> /></span> <span class="hljs-tag" ></<span class="hljs-title" >LinearLayout</span>></span></code><ul class="pre-numbering" ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li><li >8</li><li >9</li><li >10</li><li >11</li><li >12</li><li >13</li><li >14</li><li >15</li><li >16</li><li >17</li><li >18</li><li >19</li><li >20</li><li >21</li><li >22</li><li >23</li><li >24</li><li >25</li><li >26</li><li >27</li><li >28</li><li >29</li><li >30</li><li >31</li><li >32</li></ul>

下圖是在橫縱屏切換的時(shí)候的顯示效果,我們可以看到這樣可以很好的適配屏幕尺寸的變化。

weight是線性布局的一個(gè)獨(dú)特的屬性,我們可以使用這個(gè)屬性來按照比例對界面進(jìn)行分配,完成一些特殊的需求。

但是,我們對于這個(gè)屬性的計(jì)算應(yīng)該如何理解呢?

首先看下面的例子,我們在布局中這樣設(shè)置我們的界面

我們在布局里面設(shè)置為線性布局,橫向排列,然后放置兩個(gè)寬度為0dp的按鈕,分別設(shè)置weight為1和2,在效果圖中,我們可以看到兩個(gè)按鈕按照1:2的寬度比例正常排列了,這也是我們經(jīng)常使用到的場景,這是時(shí)候很好理解,Button1的寬度就是1/(1+2) = 1/3,Button2的寬度則是2/(1+2) = 2/3,我們可以很清楚的明白這種情景下的占比如何計(jì)算。

但是假如我們的寬度不是0dp(wrap_content和0dp的效果相同),則是match_parent呢?

下面是設(shè)置為match_parent的效果

我們可以看到,在這種情況下,占比和上面正好相反,這是怎么回事呢?說到這里,我們就不得不提一下weight的計(jì)算方法了。

android:layout_weight的真實(shí)含義是:如果View設(shè)置了該屬性并且有效,那么該 View的寬度等于原有寬度(android:layout_width)加上剩余空間的占比。

從這個(gè)角度我們來解釋一下上面的現(xiàn)象。在上面的代碼中,我們設(shè)置每個(gè)Button的寬度都是match_parent,假設(shè)屏幕寬度為L,那么每個(gè)Button的寬度也應(yīng)該都為L,剩余寬度就等于L-(L+L)= -L。

Button1的weight=1,剩余寬度占比為1/(1+2)= 1/3,所以最終寬度為L+1/3*(-L)=2/3L,Button2的計(jì)算類似,最終寬度為L+2/3(-L)=1/3L。

這是在水平方向上的,那么在垂直方向上也是這樣嗎?

下面是測試代碼和效果

如果是垂直方向,那么我們應(yīng)該改變的是layout_height的屬性,下面是0dp的顯示效果

下面是match_parent的顯示效果,結(jié)論和水平是完全一樣的

雖然說我們演示了match_parent的顯示效果,并說明了原因,但是在真正用的時(shí)候,我們都是設(shè)置某一個(gè)屬性為0dp,然后按照權(quán)重計(jì)算所占百分比。

使用相對布局,禁用絕對布局

在開發(fā)中,我們大部分時(shí)候使用的都是線性布局、相對布局和幀布局,絕對布局由于適配性極差,所以極少使用。

由于各種布局的特點(diǎn)不一樣,所以不能說哪個(gè)布局好用,到底應(yīng)該使用什么布局只能根據(jù)實(shí)際需求來確定。我們可以使用 LinearLayout 的嵌套實(shí)例并結(jié)合 “wrap_content” 和 “match_parent”,以便構(gòu)建相當(dāng)復(fù)雜的布局。不過,我們無法通過 LinearLayout 精確控制子視圖的特殊關(guān)系;系統(tǒng)會(huì)將 LinearLayout 中的視圖直接并排列出。

如果我們需要將子視圖排列出各種效果而不是一條直線,通常更合適的解決方法是使用 RelativeLayout,這樣就可以根據(jù)各組件之間的特殊關(guān)系指定布局了。例如,我們可以將某個(gè)子視圖對齊到屏幕左側(cè),同時(shí)將另一個(gè)視圖對齊到屏幕右側(cè)。

下面的代碼以官方Demo為例說明。

?

[html]?view plaincopy
  • <?xml?version="1.0"?encoding="utf-8"?>??
  • <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:layout_width="match_parent"??
  • ????android:layout_height="match_parent">??
  • ????<TextView??
  • ????????android:id="@+id/label"??
  • ????????android:layout_width="match_parent"??
  • ????????android:layout_height="wrap_content"??
  • ????????android:text="Type?here:"/>??
  • ????<EditText??
  • ????????android:id="@+id/entry"??
  • ????????android:layout_width="match_parent"??
  • ????????android:layout_height="wrap_content"??
  • ????????android:layout_below="@id/label"/>??
  • ????<Button??
  • ????????android:id="@+id/ok"??
  • ????????android:layout_width="wrap_content"??
  • ????????android:layout_height="wrap_content"??
  • ????????android:layout_below="@id/entry"??
  • ????????android:layout_alignParentRight="true"??
  • ????????android:layout_marginLeft="10dp"??
  • ????????android:text="OK"?/>??
  • ????<Button??
  • ????????android:layout_width="wrap_content"??
  • ????????android:layout_height="wrap_content"??
  • ????????android:layout_toLeftOf="@id/ok"??
  • ????????android:layout_alignTop="@id/ok"??
  • ????????android:text="Cancel"?/>??
  • </RelativeLayout>??
  • ?

    在上面的代碼中我們使用了相對布局,并且使用alignXXX等屬性指定了子控件的位置,下面是這種布局方式在應(yīng)對屏幕變化時(shí)的表現(xiàn)

    在小尺寸屏幕的顯示

    在平板的大尺寸上的顯示效果

    雖然控件的大小由于屏幕尺寸的增加而發(fā)生了改變,但是我們可以看到,由于使用了相對布局,所以控件之前的位置關(guān)系并沒有發(fā)生什么變化,這說明我們的適配成功了。

    使用限定符

    使用尺寸限定符

    上面所提到的靈活布局或者是相對布局,可以為我們帶來的優(yōu)勢就只有這么多了。雖然這些布局可以拉伸組件內(nèi)外的空間以適應(yīng)各種屏幕,但它們不一定能為每種屏幕都提供最佳的用戶體驗(yàn)。因此,我們的應(yīng)用不僅僅只實(shí)施靈活布局,還應(yīng)該應(yīng)針對各種屏幕配置提供一些備用布局。

    如何做到這一點(diǎn)呢?我們可以通過使用配置限定符,在運(yùn)行時(shí)根據(jù)當(dāng)前的設(shè)備配置自動(dòng)選擇合適的資源了,例如根據(jù)各種屏幕尺寸選擇不同的布局。

    很多應(yīng)用會(huì)在較大的屏幕上實(shí)施“雙面板”模式,即在一個(gè)面板上顯示項(xiàng)目列表,而在另一面板上顯示對應(yīng)內(nèi)容。平板電腦和電視的屏幕已經(jīng)大到可以同時(shí)容納這兩個(gè)面板了,但手機(jī)屏幕就需要分別顯示。因此,我們可以使用以下文件以便實(shí)施這些布局:

    res/layout/main.xml,單面板(默認(rèn))布局:

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:orientation="vertical"??
  • ????android:layout_width="match_parent"??
  • ????android:layout_height="match_parent">??
  • ??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="match_parent"?/>??
  • </LinearLayout>??
  • ?

    res/layout-large/main.xml,雙面板布局:

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:layout_width="fill_parent"??
  • ????android:layout_height="fill_parent"??
  • ????android:orientation="horizontal">??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="400dp"??
  • ??????????????android:layout_marginRight="10dp"/>??
  • ????<fragment?android:id="@+id/article"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.ArticleFragment"??
  • ??????????????android:layout_width="fill_parent"?/>??
  • </LinearLayout>??
  • ?

    請注意第二種布局名稱目錄中的 large 限定符。系統(tǒng)會(huì)在屬于較大屏幕(例如 7 英寸或更大的平板電腦)的設(shè)備上選擇此布局。系統(tǒng)會(huì)在較小的屏幕上選擇其他布局(無限定符)。

    使用最小寬度限定符

    在版本低于 3.2 的 Android 設(shè)備上,開發(fā)人員遇到的問題之一是“較大”屏幕的尺寸范圍,該問題會(huì)影響戴爾 Streak、早期的 Galaxy Tab 以及大部分 7 英寸平板電腦。即使這些設(shè)備的屏幕屬于“較大”的尺寸,但很多應(yīng)用可能會(huì)針對此類別中的各種設(shè)備(例如 5 英寸和 7 英寸的設(shè)備)顯示不同的布局。這就是 Android 3.2 版在引入其他限定符的同時(shí)引入“最小寬度”限定符的原因。

    最小寬度限定符可讓您通過指定某個(gè)最小寬度(以 dp 為單位)來定位屏幕。例如,標(biāo)準(zhǔn) 7 英寸平板電腦的最小寬度為 600 dp,因此如果您要在此類屏幕上的用戶界面中使用雙面板(但在較小的屏幕上只顯示列表),您可以使用上文中所述的單面板和雙面板這兩種布局,但您應(yīng)使用 sw600dp 指明雙面板布局僅適用于最小寬度為 600 dp 的屏幕,而不是使用 large 尺寸限定符。

    res/layout/main.xml,單面板(默認(rèn))布局:

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:orientation="vertical"??
  • ????android:layout_width="match_parent"??
  • ????android:layout_height="match_parent">??
  • ??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="match_parent"?/>??
  • </LinearLayout>??
  • ?

    res/layout-sw600dp/main.xml,雙面板布局:

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:layout_width="fill_parent"??
  • ????android:layout_height="fill_parent"??
  • ????android:orientation="horizontal">??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="400dp"??
  • ??????????????android:layout_marginRight="10dp"/>??
  • ????<fragment?android:id="@+id/article"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.ArticleFragment"??
  • ??????????????android:layout_width="fill_parent"?/>??
  • </LinearLayout>??
  • ?

    也就是說,對于最小寬度大于等于 600 dp 的設(shè)備,系統(tǒng)會(huì)選擇 layout-sw600dp/main.xml(雙面板)布局,否則系統(tǒng)就會(huì)選擇 layout/main.xml(單面板)布局。

    但 Android 版本低于 3.2 的設(shè)備不支持此技術(shù),原因是這些設(shè)備無法將 sw600dp 識別為尺寸限定符,因此我們?nèi)孕枋褂?large 限定符。這樣一來,就會(huì)有一個(gè)名稱為 res/layout-large/main.xml 的文件(與 res/layout-sw600dp/main.xml 一樣)。但是沒有太大關(guān)系,我們將馬上學(xué)習(xí)如何避免此類布局文件出現(xiàn)的重復(fù)。

    使用布局別名

    最小寬度限定符僅適用于 Android 3.2 及更高版本。因此,如果我們?nèi)孕枋褂门c較低版本兼容的概括尺寸范圍(小、正常、大和特大)。例如,如果要將用戶界面設(shè)計(jì)成在手機(jī)上顯示單面板,但在 7 英寸平板電腦、電視和其他較大的設(shè)備上顯示多面板,那么我們就需要提供以下文件:

    • res/layout/main.xml: 單面板布局
    • res/layout-large: 多面板布局
    • res/layout-sw600dp: 多面板布局

    后兩個(gè)文件是相同的,因?yàn)槠渲幸粋€(gè)用于和 Android 3.2 設(shè)備匹配,而另一個(gè)則是為使用較低版本 Android 的平板電腦和電視準(zhǔn)備的。

    要避免平板電腦和電視的文件出現(xiàn)重復(fù)(以及由此帶來的維護(hù)問題),您可以使用別名文件。例如,您可以定義以下布局:

    • res/layout/main.xml,單面板布局
    • res/layout/main_twopanes.xml,雙面板布局

    然后添加這兩個(gè)文件:

    res/values-large/layout.xml:

    ?

    [html]?view plaincopy
  • <resources>??
  • ????<item?name="main"?type="layout">@layout/main_twopanes</item>??
  • </resources>??
  • ?

    res/values-sw600dp/layout.xml:

    ?

    [html]?view plaincopy
  • <resources>??
  • ????<item?name="main"?type="layout">@layout/main_twopanes</item>??
  • </resources>??
  • ?

    后兩個(gè)文件的內(nèi)容相同,但它們并未實(shí)際定義布局。它們只是將 main 設(shè)置成了 main_twopanes 的別名。由于這些文件包含 large 和 sw600dp 選擇器,因此無論 Android 版本如何,系統(tǒng)都會(huì)將這些文件應(yīng)用到平板電腦和電視上(版本低于 3.2 的平板電腦和電視會(huì)匹配 large,版本高于 3.2 的平板電腦和電視則會(huì)匹配 sw600dp)。

    使用屏幕方向限定符

    某些布局會(huì)同時(shí)支持橫向模式和縱向模式,但我們可以通過調(diào)整優(yōu)化其中大部分布局的效果。在新聞閱讀器示例應(yīng)用中,每種屏幕尺寸和屏幕方向下的布局行為方式如下所示:

    • 小屏幕,縱向:單面板,帶徽標(biāo)
    • 小屏幕,橫向:單面板,帶徽標(biāo)
    • 7 英寸平板電腦,縱向:單面板,帶操作欄
    • 7 英寸平板電腦,橫向:雙面板,寬,帶操作欄
    • 10 英寸平板電腦,縱向:雙面板,窄,帶操作欄
    • 10 英寸平板電腦,橫向:雙面板,寬,帶操作欄
    • 電視,橫向:雙面板,寬,帶操作欄

    因此,這些布局中的每一種都定義在了 res/layout/ 目錄下的某個(gè) XML 文件中。為了繼續(xù)將每個(gè)布局分配給各種屏幕配置,該應(yīng)用會(huì)使用布局別名將兩者相匹配:

    res/layout/onepane.xml:(單面板)

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:orientation="vertical"??
  • ????android:layout_width="match_parent"??
  • ????android:layout_height="match_parent">??
  • ??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="match_parent"?/>??
  • </LinearLayout>??
  • ?

    res/layout/onepane_with_bar.xml:(單面板帶操作欄)

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:orientation="vertical"??
  • ????android:layout_width="match_parent"??
  • ????android:layout_height="match_parent">??
  • ????<LinearLayout?android:layout_width="match_parent"??
  • ??????????????????android:id="@+id/linearLayout1"????
  • ??????????????????android:gravity="center"??
  • ??????????????????android:layout_height="50dp">??
  • ????????<ImageView?android:id="@+id/imageView1"??
  • ???????????????????android:layout_height="wrap_content"??
  • ???????????????????android:layout_width="wrap_content"??
  • ???????????????????android:src="@drawable/logo"??
  • ???????????????????android:paddingRight="30dp"??
  • ???????????????????android:layout_gravity="left"??
  • ???????????????????android:layout_weight="0"?/>??
  • ????????<View?android:layout_height="wrap_content"??
  • ??????????????android:id="@+id/view1"??
  • ??????????????android:layout_width="wrap_content"??
  • ??????????????android:layout_weight="1"?/>??
  • ????????<Button?android:id="@+id/categorybutton"??
  • ????????????????android:background="@drawable/button_bg"??
  • ????????????????android:layout_height="match_parent"??
  • ????????????????android:layout_weight="0"??
  • ????????????????android:layout_width="120dp"??
  • ????????????????style="@style/CategoryButtonStyle"/>??
  • ????</LinearLayout>??
  • ??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="match_parent"?/>??
  • </LinearLayout>??
  • res/layout/twopanes.xml:(雙面板,寬布局)

    ?

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:layout_width="fill_parent"??
  • ????android:layout_height="fill_parent"??
  • ????android:orientation="horizontal">??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="400dp"??
  • ??????????????android:layout_marginRight="10dp"/>??
  • ????<fragment?android:id="@+id/article"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.ArticleFragment"??
  • ??????????????android:layout_width="fill_parent"?/>??
  • </LinearLayout>??


  • ?

    res/layout/twopanes_narrow.xml:(雙面板,窄布局)

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:layout_width="fill_parent"??
  • ????android:layout_height="fill_parent"??
  • ????android:orientation="horizontal">??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="200dp"??
  • ??????????????android:layout_marginRight="10dp"/>??
  • ????<fragment?android:id="@+id/article"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.ArticleFragment"??
  • ??????????????android:layout_width="fill_parent"?/>??
  • </LinearLayout>??


  • ?

    既然我們已定義了所有可能的布局,那就只需使用配置限定符將正確的布局映射到各種配置即可。

    現(xiàn)在只需使用布局別名技術(shù)即可做到這一點(diǎn):

    res/values/layouts.xml:

    ?

    [html]?view plaincopy
  • <resources>??
  • ????<item?name="main_layout"?type="layout">@layout/onepane_with_bar</item>??
  • ????<bool?name="has_two_panes">false</bool>??
  • </resources>??
  • ?

    res/values-sw600dp-land/layouts.xml:

    ?

    [html]?view plaincopy
  • <resources>??
  • ????<item?name="main_layout"?type="layout">@layout/twopanes</item>??
  • ????<bool?name="has_two_panes">true</bool>??
  • </resources>??
  • ?

    res/values-sw600dp-port/layouts.xml:

    [html]?view plaincopy
  • <resources>??
  • ????<item?name="main_layout"?type="layout">@layout/onepane</item>??
  • ????<bool?name="has_two_panes">false</bool>??
  • </resources>??
  • res/values-large-land/layouts.xml: [html]?view plaincopy
  • <resources>??
  • ????<item?name="main_layout"?type="layout">@layout/twopanes</item>??
  • ????<bool?name="has_two_panes">true</bool>??
  • </resources>??
  • res/values-large-port/layouts.xml: [html]?view plaincopy
  • <resources>??
  • ????<item?name="main_layout"?type="layout">@layout/twopanes_narrow</item>??
  • ????<bool?name="has_two_panes">true</bool>??
  • </resources>??
  • 使用自動(dòng)拉伸位圖

    支持各種屏幕尺寸通常意味著您的圖片資源還必須能適應(yīng)各種尺寸。例如,無論要應(yīng)用到什么形狀的按鈕上,按鈕背景都必須能適應(yīng)。

    如果在可以更改尺寸的組件上使用了簡單的圖片,您很快就會(huì)發(fā)現(xiàn)顯示效果多少有些不太理想,因?yàn)橄到y(tǒng)會(huì)在運(yùn)行時(shí)平均地拉伸或收縮您的圖片。解決方法為使用自動(dòng)拉伸位圖,這是一種格式特殊的 PNG 文件,其中會(huì)指明可以拉伸以及不可以拉伸的區(qū)域。

    .9的制作,實(shí)際上就是在原圖片上添加1px的邊界,然后按照我們的需求,把對應(yīng)的位置設(shè)置成黑色線,系統(tǒng)就會(huì)根據(jù)我們的實(shí)際需求進(jìn)行拉伸。

    下圖是對.9圖的四邊的含義的解釋,左上邊代表拉伸區(qū)域,右下邊代表padding box,就是間隔區(qū)域,在下面,我們給出一個(gè)例子,方便大家理解。

    先看下面兩張圖,我們理解一下這四條線的含義。

    上圖和下圖的區(qū)別,就在于右下邊的黑線不一樣,具體的效果的區(qū)別,看右邊的效果圖。上圖效果圖中深藍(lán)色的區(qū)域,代表內(nèi)容區(qū)域,我們可以看到是在正中央的,這是因?yàn)槲覀冊谟蚁逻叺氖莾蓚€(gè)點(diǎn),這兩個(gè)點(diǎn)距離上下左右四個(gè)方向的距離就是padding的距離,所以深藍(lán)色內(nèi)容區(qū)域在圖片正中央,我們再看下圖,由于右下邊的黑線是圖片長度,所以就沒有padding,從效果圖上的表現(xiàn)就是深藍(lán)色區(qū)域和圖片一樣大,因此,我們可以利用右下邊來控制內(nèi)容與背景圖邊緣的padding。

    如果你還不明白,那么我們看下面的效果圖,我們分別以圖一和圖二作為背景圖,下面是效果圖。

    我們可以看到,使用wrap_content屬性設(shè)置長寬,圖一比圖二的效果大一圈,這是為什么呢?還記得我上面說的padding嗎?

    這就是padding的效果提現(xiàn),怎么證明呢?我們再看下面一張圖,給圖一添加padding=0,這樣背景圖設(shè)置的padding效果就沒了,是不是兩個(gè)一樣大了?

    ok,我想你應(yīng)該明白右下邊的黑線的含義了,下面我們再看一下左上邊的效果。

    下面我們只設(shè)置了左上邊線,效果圖如下

    上面的線沒有包住圖標(biāo),下面的線正好包住了圖標(biāo),從右邊的效果圖應(yīng)該可以看出差別,黑線所在的區(qū)域就是拉伸區(qū)域,上圖黑線所在的全是純色,所以圖標(biāo)不變形,下面的拉伸區(qū)域包裹了圖標(biāo),所以在拉伸的時(shí)候就會(huì)對圖標(biāo)進(jìn)行拉伸,但是這樣就會(huì)導(dǎo)致圖標(biāo)變形。注意到下面紅線區(qū)域了嘛?這是系統(tǒng)提示我們的,因?yàn)檫@樣拉伸,不符合要求,所以會(huì)提示一下。

    支持各種屏幕密度

    使用非密度制約像素

    由于各種屏幕的像素密度都有所不同,因此相同數(shù)量的像素在不同設(shè)備上的實(shí)際大小也有所差異,這樣使用像素定義布局尺寸就會(huì)產(chǎn)生問題。因此,請務(wù)必使用 dp 或 sp 單位指定尺寸。dp 是一種非密度制約像素,其尺寸與 160 dpi 像素的實(shí)際尺寸相同。sp 也是一種基本單位,但它可根據(jù)用戶的偏好文字大小進(jìn)行調(diào)整(即尺度獨(dú)立性像素),因此我們應(yīng)將該測量單位用于定義文字大小。

    例如,請使用 dp(而非 px)指定兩個(gè)視圖間的間距:

    ?

    [html]?view plaincopy
  • <Button?android:layout_width="wrap_content"??
  • ????android:layout_height="wrap_content"??
  • ????android:text="@string/clickme"??
  • ????android:layout_marginTop="20dp"?/>??
  • ?

    請務(wù)必使用 sp 指定文字大小:

    ?

    [html]?view plaincopy
  • <TextView?android:layout_width="match_parent"??
  • ????android:layout_height="wrap_content"??
  • ????android:textSize="20sp"?/>??


  • ?

    除了介紹這些最基礎(chǔ)的知識之外,我們下面再來討論一下另外一個(gè)問題。

    經(jīng)過上面的介紹,我們都清楚,為了能夠規(guī)避不同像素密度的陷阱,Google推薦使用dp來代替px作為控件長度的度量單位,但是我們來看下面的一個(gè)場景。

    假如我們以Nexus5作為書寫代碼時(shí)查看效果的測試機(jī)型,Nexus5的總寬度為360dp,我們現(xiàn)在需要在水平方向上放置兩個(gè)按鈕,一個(gè)是150dp左對齊,另外一個(gè)是200dp右對齊,中間留有10dp間隔,那么在Nexus5上面的顯示效果就是下面這樣

    但是如果在Nexus S或者是Nexus One運(yùn)行呢?下面是運(yùn)行結(jié)果

    可以看到,兩個(gè)按鈕發(fā)生了重疊。

    我們都已經(jīng)用了dp了,為什么會(huì)出現(xiàn)這種情況呢?

    你聽我慢慢道來。

    雖然說dp可以去除不同像素密度的問題,使得1dp在不同像素密度上面的顯示效果相同,但是還是由于Android屏幕設(shè)備的多樣性,如果使用dp來作為度量單位,并不是所有的屏幕的寬度都是相同的dp長度,比如說,Nexus S和Nexus One屬于hdpi,屏幕寬度是320dp,而Nexus 5屬于xxhdpi,屏幕寬度是360dp,Galaxy Nexus屬于xhdpi,屏幕寬度是384dp,Nexus 6 屬于xxxhdpi,屏幕寬度是410dp。所以說,光Google自己一家的產(chǎn)品就已經(jīng)有這么多的標(biāo)準(zhǔn),而且屏幕寬度和像素密度沒有任何關(guān)聯(lián)關(guān)系,即使我們使用dp,在320dp寬度的設(shè)備和410dp的設(shè)備上,還是會(huì)有90dp的差別。當(dāng)然,我們盡量使用match_parent和wrap_content,盡可能少的用dp來指定控件的具體長寬,再結(jié)合上權(quán)重,大部分的情況我們都是可以做到適配的。

    但是除了這個(gè)方法,我們還有沒有其他的更徹底的解決方案呢?

    我們換另外一個(gè)思路來思考這個(gè)問題。

    下面的方案來自Android Day Day Up 一群的【blue-深圳】,謝謝他的分享精神

    因?yàn)榉直媛什灰粯?#xff0c;所以不能用px;因?yàn)槠聊粚挾炔灰粯?#xff0c;所以要小心的用dp,那么我們可不可以用另外一種方法來統(tǒng)一單位,不管分辨率是多大,屏幕寬度用一個(gè)固定的值的單位來統(tǒng)計(jì)呢?

    答案是:當(dāng)然可以。

    我們假設(shè)手機(jī)屏幕的寬度都是320某單位,那么我們將一個(gè)屏幕寬度的總像素?cái)?shù)平均分成320份,每一份對應(yīng)具體的像素就可以了。

    具體如何來實(shí)現(xiàn)呢?我們看下面的代碼

    ?

    [java]?view plaincopy
  • import?java.io.File;??
  • import?java.io.FileNotFoundException;??
  • import?java.io.FileOutputStream;??
  • import?java.io.PrintWriter;??
  • ??
  • public?class?MakeXml?{??
  • ??
  • ????private?final?static?String?rootPath?=?"C:\\Users\\Administrator\\Desktop\\layoutroot\\values-{0}x{1}\\";??
  • ??
  • ????private?final?static?float?dw?=?320f;??
  • ????private?final?static?float?dh?=?480f;??
  • ??
  • ????private?final?static?String?WTemplate?=?"<dimen?name=\"x{0}\">{1}px</dimen>\n";??
  • ????private?final?static?String?HTemplate?=?"<dimen?name=\"y{0}\">{1}px</dimen>\n";??
  • ??
  • ????public?static?void?main(String[]?args)?{??
  • ????????makeString(320,?480);??
  • ????????makeString(480,800);??
  • ????????makeString(480,?854);??
  • ????????makeString(540,?960);??
  • ????????makeString(600,?1024);??
  • ????????makeString(720,?1184);??
  • ????????makeString(720,?1196);??
  • ????????makeString(720,?1280);??
  • ????????makeString(768,?1024);??
  • ????????makeString(800,?1280);??
  • ????????makeString(1080,?1812);??
  • ????????makeString(1080,?1920);??
  • ????????makeString(1440,?2560);??
  • ????}??
  • ??
  • ????public?static?void?makeString(int?w,?int?h)?{??
  • ??
  • ????????StringBuffer?sb?=?new?StringBuffer();??
  • ????????sb.append("<?xml?version=\"1.0\"?encoding=\"utf-8\"?>\n");??
  • ????????sb.append("<resources>");??
  • ????????float?cellw?=?w?/?dw;??
  • ????????for?(int?i?=?1;?i?<?320;?i++)?{??
  • ????????????sb.append(WTemplate.replace("{0}",?i?+?"").replace("{1}",??
  • ????????????????????change(cellw?*?i)?+?""));??
  • ????????}??
  • ????????sb.append(WTemplate.replace("{0}",?"320").replace("{1}",?w?+?""));??
  • ????????sb.append("</resources>");??
  • ??
  • ????????StringBuffer?sb2?=?new?StringBuffer();??
  • ????????sb2.append("<?xml?version=\"1.0\"?encoding=\"utf-8\"?>\n");??
  • ????????sb2.append("<resources>");??
  • ????????float?cellh?=?h?/?dh;??
  • ????????for?(int?i?=?1;?i?<?480;?i++)?{??
  • ????????????sb2.append(HTemplate.replace("{0}",?i?+?"").replace("{1}",??
  • ????????????????????change(cellh?*?i)?+?""));??
  • ????????}??
  • ????????sb2.append(HTemplate.replace("{0}",?"480").replace("{1}",?h?+?""));??
  • ????????sb2.append("</resources>");??
  • ??
  • ????????String?path?=?rootPath.replace("{0}",?h?+?"").replace("{1}",?w?+?"");??
  • ????????File?rootFile?=?new?File(path);??
  • ????????if?(!rootFile.exists())?{??
  • ????????????rootFile.mkdirs();??
  • ????????}??
  • ????????File?layxFile?=?new?File(path?+?"lay_x.xml");??
  • ????????File?layyFile?=?new?File(path?+?"lay_y.xml");??
  • ????????try?{??
  • ????????????PrintWriter?pw?=?new?PrintWriter(new?FileOutputStream(layxFile));??
  • ????????????pw.print(sb.toString());??
  • ????????????pw.close();??
  • ????????????pw?=?new?PrintWriter(new?FileOutputStream(layyFile));??
  • ????????????pw.print(sb2.toString());??
  • ????????????pw.close();??
  • ????????}?catch?(FileNotFoundException?e)?{??
  • ????????????e.printStackTrace();??
  • ????????}??
  • ??
  • ????}??
  • ??
  • ????public?static?float?change(float?a)?{??
  • ????????int?temp?=?(int)?(a?*?100);??
  • ????????return?temp?/?100f;??
  • ????}??
  • }??
  • ?

    ?

    代碼應(yīng)該很好懂,我們將一個(gè)屏幕寬度分為320份,高度480份,然后按照實(shí)際像素對每一個(gè)單位進(jìn)行復(fù)制,放在對應(yīng)values-widthxheight文件夾下面的lax.xml和lay.xml里面,這樣就可以統(tǒng)一所有你想要的分辨率的單位了,下面是生成的一個(gè)320*480分辨率的文件,因?yàn)閷捀叻指钪罂偡謹(jǐn)?shù)和像素?cái)?shù)相同,所以x1就是1px,以此類推

    ?

    [html]?view plaincopy
  • <?xml?version="1.0"?encoding="utf-8"?>??
  • <resources><dimen?name="x1">1.0px</dimen>??
  • <dimen?name="x2">2.0px</dimen>??
  • <dimen?name="x3">3.0px</dimen>??
  • <dimen?name="x4">4.0px</dimen>??
  • <dimen?name="x5">5.0px</dimen>??
  • <dimen?name="x6">6.0px</dimen>??
  • <dimen?name="x7">7.0px</dimen>??
  • <dimen?name="x8">8.0px</dimen>??
  • <dimen?name="x9">9.0px</dimen>??
  • <dimen?name="x10">10.0px</dimen>??
  • ...省略好多行??
  • <dimen?name="x300">300.0px</dimen>??
  • <dimen?name="x301">301.0px</dimen>??
  • <dimen?name="x302">302.0px</dimen>??
  • <dimen?name="x303">303.0px</dimen>??
  • <dimen?name="x304">304.0px</dimen>??
  • <dimen?name="x305">305.0px</dimen>??
  • <dimen?name="x306">306.0px</dimen>??
  • <dimen?name="x307">307.0px</dimen>??
  • <dimen?name="x308">308.0px</dimen>??
  • <dimen?name="x309">309.0px</dimen>??
  • <dimen?name="x310">310.0px</dimen>??
  • <dimen?name="x311">311.0px</dimen>??
  • <dimen?name="x312">312.0px</dimen>??
  • <dimen?name="x313">313.0px</dimen>??
  • <dimen?name="x314">314.0px</dimen>??
  • <dimen?name="x315">315.0px</dimen>??
  • <dimen?name="x316">316.0px</dimen>??
  • <dimen?name="x317">317.0px</dimen>??
  • <dimen?name="x318">318.0px</dimen>??
  • <dimen?name="x319">319.0px</dimen>??
  • <dimen?name="x320">320px</dimen>??
  • </resources>??


  • ?

    那么1080*1960分辨率下是什么樣子呢?我們可以看下,由于1080和320是3.37倍的關(guān)系,所以x1=3.37px

    ?

    [html]?view plaincopy
  • <?xml?version="1.0"?encoding="utf-8"?>??
  • <resources><dimen?name="x1">3.37px</dimen>??
  • <dimen?name="x2">6.75px</dimen>??
  • <dimen?name="x3">10.12px</dimen>??
  • <dimen?name="x4">13.5px</dimen>??
  • <dimen?name="x5">16.87px</dimen>??
  • <dimen?name="x6">20.25px</dimen>??
  • <dimen?name="x7">23.62px</dimen>??
  • <dimen?name="x8">27.0px</dimen>??
  • <dimen?name="x9">30.37px</dimen>??
  • <dimen?name="x10">33.75px</dimen>??
  • ...省略好多行??
  • <dimen?name="x300">1012.5px</dimen>??
  • <dimen?name="x301">1015.87px</dimen>??
  • <dimen?name="x302">1019.25px</dimen>??
  • <dimen?name="x303">1022.62px</dimen>??
  • <dimen?name="x304">1026.0px</dimen>??
  • <dimen?name="x305">1029.37px</dimen>??
  • <dimen?name="x306">1032.75px</dimen>??
  • <dimen?name="x307">1036.12px</dimen>??
  • <dimen?name="x308">1039.5px</dimen>??
  • <dimen?name="x309">1042.87px</dimen>??
  • <dimen?name="x310">1046.25px</dimen>??
  • <dimen?name="x311">1049.62px</dimen>??
  • <dimen?name="x312">1053.0px</dimen>??
  • <dimen?name="x313">1056.37px</dimen>??
  • <dimen?name="x314">1059.75px</dimen>??
  • <dimen?name="x315">1063.12px</dimen>??
  • <dimen?name="x316">1066.5px</dimen>??
  • <dimen?name="x317">1069.87px</dimen>??
  • <dimen?name="x318">1073.25px</dimen>??
  • <dimen?name="x319">1076.62px</dimen>??
  • <dimen?name="x320">1080px</dimen>??
  • </resources>??
  • ?

    無論在什么分辨率下,x320都是代表屏幕寬度,y480都是代表屏幕高度。

    那么,我們應(yīng)該如何使用呢?

    首先,我們要把生成的所有values文件夾放到res目錄下,當(dāng)設(shè)計(jì)師把UI高清設(shè)計(jì)圖給你之后,你就可以根據(jù)設(shè)計(jì)圖上的尺寸,以某一個(gè)分辨率的機(jī)型為基礎(chǔ),找到對應(yīng)像素?cái)?shù)的單位,然后設(shè)置給控件即可。

    下圖還是兩個(gè)Button,不同的是,我們把單位換成了我們在values文件夾下dimen的值,這樣在你指定的分辨率下,不管寬度是320dp、360dp,還是410dp,就都可以完全適配了。

    但是,還是有個(gè)問題,為什么下面的三個(gè)沒有適配呢?

    這是因?yàn)橛捎谠谏傻膙alues文件夾里,沒有對應(yīng)的分辨率,其實(shí)一開始是報(bào)錯(cuò)的,因?yàn)槟J(rèn)的values沒有對應(yīng)dimen,所以我只能在默認(rèn)values里面也創(chuàng)建對應(yīng)文件,但是里面的數(shù)據(jù)卻不好處理,因?yàn)椴恢婪直媛?#xff0c;我只好默認(rèn)為x1=1dp保證盡量兼容。這也是這個(gè)解決方案的幾個(gè)弊端,對于沒有生成對應(yīng)分辨率文件的手機(jī),會(huì)使用默認(rèn)values文件夾,如果默認(rèn)文件夾沒有,就會(huì)出現(xiàn)問題。

    所以說,這個(gè)方案雖然是一勞永逸,但是由于實(shí)際上還是使用的px作為長度的度量單位,所以多少和google的要求有所背離,不好說以后會(huì)不會(huì)出現(xiàn)什么不可預(yù)測的問題。其次,如果要使用這個(gè)方案,你必須盡可能多的包含所有的分辨率,因?yàn)檫@個(gè)是使用這個(gè)方案的基礎(chǔ),如果有分辨率缺少,會(huì)造成顯示效果很差,甚至出錯(cuò)的風(fēng)險(xiǎn),而這又勢必會(huì)增加軟件包的大小和維護(hù)的難度,所以大家自己斟酌,擇優(yōu)使用。

    更多信息可參考鴻洋的新文章Android 屏幕適配方案

    提供備用位圖

    由于 Android 可在具有各種屏幕密度的設(shè)備上運(yùn)行,因此我們提供的位圖資源應(yīng)始終可以滿足各類普遍密度范圍的要求:低密度、中等密度、高密度以及超高密度。這將有助于我們的圖片在所有屏幕密度上都能得到出色的質(zhì)量和效果。

    要生成這些圖片,我們應(yīng)先提取矢量格式的原始資源,然后根據(jù)以下尺寸范圍針對各密度生成相應(yīng)的圖片。

    • xhdpi:2.0
    • hdpi:1.5
    • mdpi:1.0(最低要求)
    • ldpi:0.75

    也就是說,如果我們?yōu)?xhdpi 設(shè)備生成了 200x200 px尺寸的圖片,就應(yīng)該使用同一資源為 hdpi、mdpi 和 ldpi 設(shè)備分別生成 150x150、100x100 和 75x75 尺寸的圖片。

    然后,將生成的圖片文件放在 res/ 下的相應(yīng)子目錄中(mdpi、hdpi、xhdpi、xxhdpi),系統(tǒng)就會(huì)根據(jù)運(yùn)行您應(yīng)用的設(shè)備的屏幕密度自動(dòng)選擇合適的圖片。

    這樣一來,只要我們引用 @drawable/id,系統(tǒng)都能根據(jù)相應(yīng)屏幕的 dpi 選取合適的位圖。

    還記得我們上面提到的圖標(biāo)設(shè)計(jì)尺寸嗎?和這個(gè)其實(shí)是一個(gè)意思。

    但是還有個(gè)問題需要注意下,如果是.9圖或者是不需要多個(gè)分辨率的圖片,就放在drawable文件夾即可,對應(yīng)分辨率的圖片要正確的放在合適的文件夾,否則會(huì)造成圖片拉伸等問題。

    實(shí)施自適應(yīng)用戶界面流程

    前面我們介紹過,如何根據(jù)設(shè)備特點(diǎn)顯示恰當(dāng)?shù)牟季?#xff0c;但是這樣做,會(huì)使得用戶界面流程可能會(huì)有所不同。例如,如果應(yīng)用處于雙面板模式下,點(diǎn)擊左側(cè)面板上的項(xiàng)即可直接在右側(cè)面板上顯示相關(guān)內(nèi)容;而如果該應(yīng)用處于單面板模式下,點(diǎn)擊相關(guān)的內(nèi)容應(yīng)該跳轉(zhuǎn)到另外一個(gè)Activity進(jìn)行后續(xù)的處理。所以我們應(yīng)該按照下面的流程,一步步的完成自適應(yīng)界面的實(shí)現(xiàn)。

    確定當(dāng)前布局

    由于每種布局的實(shí)施都會(huì)稍有不同,因此我們需要先確定當(dāng)前向用戶顯示的布局。例如,我們可以先了解用戶所處的是“單面板”模式還是“雙面板”模式。要做到這一點(diǎn),可以通過查詢指定視圖是否存在以及是否已顯示出來。

    ?

    [java]?view plaincopy
  • public?class?NewsReaderActivity?extends?FragmentActivity?{??
  • ????boolean?mIsDualPane;??
  • ??
  • ????@Override??
  • ????public?void?onCreate(Bundle?savedInstanceState)?{??
  • ????????super.onCreate(savedInstanceState);??
  • ????????setContentView(R.layout.main_layout);??
  • ??
  • ????????View?articleView?=?findViewById(R.id.article);??
  • ????????mIsDualPane?=?articleView?!=?null?&&??
  • ????????????????????????articleView.getVisibility()?==?View.VISIBLE;??
  • ????}??
  • }??
  • ?

    ?

    請注意,這段代碼用于查詢“報(bào)道”面板是否可用,與針對具體布局的硬編碼查詢相比,這段代碼的靈活性要大得多。

    再舉一個(gè)適應(yīng)各種組件的存在情況的方法示例:在對這些組件執(zhí)行操作前先查看它們是否可用。例如,新聞閱讀器示例應(yīng)用中有一個(gè)用于打開菜單的按鈕,但只有在版本低于 3.0 的 Android 上運(yùn)行該應(yīng)用時(shí),這個(gè)按鈕才會(huì)存在,因?yàn)?API 級別 11 或更高級別中的 ActionBar 已取代了該按鈕的功能。因此,您可以使用以下代碼為此按鈕添加事件偵聽器:

    [java]?view plaincopy
  • Button?catButton?=?(Button)?findViewById(R.id.categorybutton);??
  • OnClickListener?listener?=?/*?create?your?listener?here?*/;??
  • if?(catButton?!=?null)?{??
  • ????catButton.setOnClickListener(listener);??
  • }??
  • 根據(jù)當(dāng)前布局做出響應(yīng)

    有些操作可能會(huì)因當(dāng)前的具體布局而產(chǎn)生不同的結(jié)果。例如,在新聞閱讀器示例中,如果用戶界面處于雙面板模式下,那么點(diǎn)擊標(biāo)題列表中的標(biāo)題就會(huì)在右側(cè)面板中打開相應(yīng)報(bào)道;但如果用戶界面處于單面板模式下,那么上述操作就會(huì)啟動(dòng)一個(gè)獨(dú)立活動(dòng):

    ?

    [java]?view plaincopy
  • @Override??
  • public?void?onHeadlineSelected(int?index)?{??
  • ????mArtIndex?=?index;??
  • ????if?(mIsDualPane)?{??
  • ????????/*?display?article?on?the?right?pane?*/??
  • ????????mArticleFragment.displayArticle(mCurrentCat.getArticle(index));??
  • ????}?else?{??
  • ????????/*?start?a?separate?activity?*/??
  • ????????Intent?intent?=?new?Intent(this,?ArticleActivity.class);??
  • ????????intent.putExtra("catIndex",?mCatIndex);??
  • ????????intent.putExtra("artIndex",?index);??
  • ????????startActivity(intent);??
  • ????}??
  • }??
  • ?

    ?

    同樣,如果該應(yīng)用處于雙面板模式下,就應(yīng)設(shè)置帶導(dǎo)航標(biāo)簽的操作欄;但如果該應(yīng)用處于單面板模式下,就應(yīng)使用下拉菜單設(shè)置導(dǎo)航欄。因此我們的代碼還應(yīng)確定哪種情況比較合適:

    [java]?view plaincopy
  • final?String?CATEGORIES[]?=?{?"熱門報(bào)道",?"政治",?"經(jīng)濟(jì)",?"Technology"?};??
  • ??
  • public?void?onCreate(Bundle?savedInstanceState)?{??
  • ????....??
  • ????if?(mIsDualPane)?{??
  • ????????/*?use?tabs?for?navigation?*/??
  • ????????actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS);??
  • ????????int?i;??
  • ????????for?(i?=?0;?i?<?CATEGORIES.length;?i++)?{??
  • ????????????actionBar.addTab(actionBar.newTab().setText(??
  • ????????????????CATEGORIES[i]).setTabListener(handler));??
  • ????????}??
  • ????????actionBar.setSelectedNavigationItem(selTab);??
  • ????}??
  • ????else?{??
  • ????????/*?use?list?navigation?(spinner)?*/??
  • ????????actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST);??
  • ????????SpinnerAdapter?adap?=?new?ArrayAdapter(this,??
  • ????????????????R.layout.headline_item,?CATEGORIES);??
  • ????????actionBar.setListNavigationCallbacks(adap,?handler);??
  • ????}??
  • }??
  • 重復(fù)使用其他活動(dòng)中的片段

    多屏幕設(shè)計(jì)中的重復(fù)模式是指,對于某些屏幕配置,已實(shí)施界面的一部分會(huì)用作面板;但對于其他配置,這部分就會(huì)以獨(dú)立活動(dòng)的形式存在。例如,在新聞閱讀器示例中,對于較大的屏幕,新聞報(bào)道文本會(huì)顯示在右側(cè)面板中;但對于較小的屏幕,這些文本就會(huì)以獨(dú)立活動(dòng)的形式存在。

    在類似情況下,通常可以在多個(gè)活動(dòng)中重復(fù)使用相同的 Fragment 子類以避免代碼重復(fù)。例如,在雙面板布局中使用了 ArticleFragment:

    ?

    [html]?view plaincopy
  • <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  • ????android:layout_width="fill_parent"??
  • ????android:layout_height="fill_parent"??
  • ????android:orientation="horizontal">??
  • ????<fragment?android:id="@+id/headlines"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.HeadlinesFragment"??
  • ??????????????android:layout_width="400dp"??
  • ??????????????android:layout_marginRight="10dp"/>??
  • ????<fragment?android:id="@+id/article"??
  • ??????????????android:layout_height="fill_parent"??
  • ??????????????android:name="com.example.android.newsreader.ArticleFragment"??
  • ??????????????android:layout_width="fill_parent"?/>??
  • </LinearLayout>??


  • ?

    然后又在小屏幕的Activity布局中重復(fù)使用了它 :

    ?

    [java]?view plaincopy
  • ArticleFragment?frag?=?new?ArticleFragment();??
  • getSupportFragmentManager().beginTransaction().add(android.R.id.content,?frag).commit();??
  • ?

    ?

    當(dāng)然,這與在 XML 布局中聲明片段的效果是一樣的,但在這種情況下卻沒必要使用 XML 布局,因?yàn)閳?bào)道片段是此活動(dòng)中的唯一組件。

    請務(wù)必在設(shè)計(jì)片段時(shí)注意,不要針對具體活動(dòng)創(chuàng)建強(qiáng)耦合。要做到這一點(diǎn),通常可以定義一個(gè)接口,該接口概括了相關(guān)片段與其主活動(dòng)交互所需的全部方式,然后讓主活動(dòng)實(shí)施該界面:

    例如,新聞閱讀器應(yīng)用的 HeadlinesFragment 會(huì)精確執(zhí)行以下代碼:

    ?

    [java]?view plaincopy
  • public?class?HeadlinesFragment?extends?ListFragment?{??
  • ????...??
  • ????OnHeadlineSelectedListener?mHeadlineSelectedListener?=?null;??
  • ??
  • ????/*?Must?be?implemented?by?host?activity?*/??
  • ????public?interface?OnHeadlineSelectedListener?{??
  • ????????public?void?onHeadlineSelected(int?index);??
  • ????}??
  • ????...??
  • ??
  • ????public?void?setOnHeadlineSelectedListener(OnHeadlineSelectedListener?listener)?{??
  • ????????mHeadlineSelectedListener?=?listener;??
  • ????}??
  • }??


  • ?

    然后,如果用戶選擇某個(gè)標(biāo)題,相關(guān)片段就會(huì)通知由主活動(dòng)指定的偵聽器(而不是通知某個(gè)硬編碼的具體活動(dòng)):

    ?

    [java]?view plaincopy
  • public?class?HeadlinesFragment?extends?ListFragment?{??
  • ????...??
  • ????@Override??
  • ????public?void?onItemClick(AdapterView<?>?parent,??
  • ????????????????????????????View?view,?int?position,?long?id)?{??
  • ????????if?(null?!=?mHeadlineSelectedListener)?{??
  • ????????????mHeadlineSelectedListener.onHeadlineSelected(position);??
  • ????????}??
  • ????}??
  • ????...??
  • }??


  • ?

    除此之外,我們還可以使用第三方框架,比如說使用“訂閱-發(fā)布”模式的EventBus來更多的優(yōu)化組件之間的通信,減少耦合。

    處理屏幕配置變化

    如果我們使用獨(dú)立Activity實(shí)施界面的獨(dú)立部分,那么請注意,我們可能需要對特定配置變化(例如屏幕方向的變化)做出響應(yīng),以便保持界面的一致性。

    例如,在運(yùn)行 Android 3.0 或更高版本的標(biāo)準(zhǔn) 7 英寸平板電腦上,如果新聞閱讀器示例應(yīng)用運(yùn)行在縱向模式下,就會(huì)在使用獨(dú)立活動(dòng)顯示新聞報(bào)道;但如果該應(yīng)用運(yùn)行在橫向模式下,就會(huì)使用雙面板布局。

    也就是說,如果用戶處于縱向模式下且屏幕上顯示的是用于閱讀報(bào)道的活動(dòng),那么就需要在檢測到屏幕方向變化(變成橫向模式)后執(zhí)行相應(yīng)操作,即停止上述活動(dòng)并返回主活動(dòng),以便在雙面板布局中顯示相關(guān)內(nèi)容:

    ?

    [java]?view plaincopy
  • public?class?ArticleActivity?extends?FragmentActivity?{??
  • ????int?mCatIndex,?mArtIndex;??
  • ??
  • ????@Override??
  • ????protected?void?onCreate(Bundle?savedInstanceState)?{??
  • ????????super.onCreate(savedInstanceState);??
  • ????????mCatIndex?=?getIntent().getExtras().getInt("catIndex",?0);??
  • ????????mArtIndex?=?getIntent().getExtras().getInt("artIndex",?0);??
  • ??
  • ????????//?If?should?be?in?two-pane?mode,?finish?to?return?to?main?activity??
  • ????????if?(getResources().getBoolean(R.bool.has_two_panes))?{??
  • ????????????finish();??
  • ????????????return;??
  • ????????}??
  • ????????...??
  • }??


  • ?

    通過上面幾個(gè)步驟,我們就完全可以建立一個(gè)可以根據(jù)用戶界面配置進(jìn)行自適應(yīng)的App了。

    最佳實(shí)踐

    關(guān)于高清設(shè)計(jì)圖尺寸

    Google官方給出的高清設(shè)計(jì)圖尺寸有兩種方案,一種是以mdpi設(shè)計(jì),然后對應(yīng)放大得到更高分辨率的圖片,另外一種則是以高分辨率作為設(shè)計(jì)大小,然后按照倍數(shù)對應(yīng)縮小到小分辨率的圖片。

    根據(jù)經(jīng)驗(yàn),我更推薦第二種方法,因?yàn)樾》直媛试谏筛叻直媛蕡D片的時(shí)候,會(huì)出現(xiàn)像素丟失,我不知道是不是有方法可以阻止這種情況發(fā)生。

    而分辨率可以以1280*720或者是1960*1080作為主要分辨率進(jìn)行設(shè)計(jì)。

    ImageView的ScaleType屬性

    設(shè)置不同的ScaleType會(huì)得到不同的顯示效果,一般情況下,設(shè)置為centerCrop能獲得較好的適配效果。

    動(dòng)態(tài)設(shè)置

    有一些情況下,我們需要?jiǎng)討B(tài)的設(shè)置控件大小或者是位置,比如說popwindow的顯示位置和偏移量等,這個(gè)時(shí)候我們可以動(dòng)態(tài)的獲取當(dāng)前的屏幕屬性,然后設(shè)置合適的數(shù)值

    [java]?view plaincopy
  • public?class?ScreenSizeUtil?{??
  • ??
  • ????public?static?int?getScreenWidth(Activity?activity)?{??
  • ????????return?activity.getWindowManager().getDefaultDisplay().getWidth();??
  • ????}??
  • ??
  • ????public?static?int?getScreenHeight(Activity?activity)?{??
  • ????????return?activity.getWindowManager().getDefaultDisplay().getHeight();??
  • ????}??
  • ??
  • }??
  • 轉(zhuǎn)載于:https://www.cnblogs.com/labixiaoxin/p/5057477.html

    總結(jié)

    以上是生活随笔為你收集整理的Android屏幕适配全攻略(最权威的官方适配指导)(转),共大家分享。的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。