android螢幕適配

標籤：

本文轉自：http://isux.tencent.com/learn-android-from-zero-session6.html一，Android的度量單位

在Android中，定義組件尺寸的單位通常有dp和sp,那麼它們跟我們經常使用的px有什麼區別呢？

• px

px是Pixels的縮寫，是常用的像素單位，對應的是螢幕上的點。
行動裝置的尺寸有很多種，它們的螢幕總像素也是不同的，使用px單位的組件尺寸會有不一致的情況。

我們看個例子

可以看出這個加號icon在解析度較高，尺寸較大的螢幕上反而顯得略小

• dip/dp

dp(density-independent pixel)是與密度無關的像素單位，也就是dip。它是基於裝置螢幕物理密度的抽象單位。1dp 表示螢幕DPI為160時1px的長度。DPI 越高的螢幕，螢幕繪製1dp 需要越多的像素，反之亦然。

我們可以將上個例子的圖片寬高設定為30dp

可以看出兩個加號icon的尺寸是一致的

• sp

sp(scale-independent pixel)是與縮放無關的像素單位。跟dp類似，唯一的不同是，該單位會受系統字型設定的影響，通常用在字型上。
Android在設計規範中規定了字型的常用大小：

使用dp/sp的好處是，無論螢幕DPI如何，組件總能表現一致。

二，Android的布局

在Android開發，為程式定義使用者介面布局有以下方法：

• 在XML 檔案定義
• 在程式碼中執行個體化布局
• 使用圖形布局工具

以上三種方法各有利弊，我們會根據需求情境來應用不同的布局方式，這裡主要講XML布局。

在XML檔案定義組件，可以方便的管理程式的UI部分，並且分離表現和行為，使得代碼容易管理閱讀和管理，而且可以為不同的螢幕定製XML檔案。
常用的布局有Frame Layout ， Linear Layout ， Relative Layout ， List View 和 Grid View。
由於List View 和 Grid View 涉及資料部分，我們放到後面再講，先從幾個簡單的開始  :)

Frame Layout

FrameLayout是最簡單的布局，添加到這個布局的元素都是層疊的，當前元素會被下一個元素覆蓋，相當於CSS中的絕對位置position:absolute。

從 Summary 的 XML Attributes 中可以知道這些屬性的資訊概要。

幾個常用的屬性:

1. android:foreground  設定布局的前景圖，前景圖不會被子項目覆蓋
2. android:foregroundGravity 設定布局前景圖的位置

對於FrameLayout.LayoutParams，這裡僅有android:layout_gravity屬性，可以查看前面文章
http://isux.tencent.com/learn-android-from-zero-session3.html

我們可以實踐一下：
建立一個Android項目，然後在layout檔案夾找到布局xml檔案並寫入以下布局

運行效果如下：

更多詳細資料可以查看Google大神文檔：
http://developer.android.com/reference/android/widget/FrameLayout.html

Linear Layout

線性布局在前面有所講解，小夥伴們可以看這篇文章http://isux.tencent.com/learn-android-from-zero-session3.html

Relative Layout

相對布局可以指定元素的位置。元素的位置可定義為相鄰元素的相對位置（例如元素A在元素B的左側），也可以定義為父元素的相對位置（例如在父元素的中間或者左側）。
使用相對布局可以方便的控制元素的位置。在沒有定義時，所有的元素都是在父元素的左上方。

從 Summary 的 XML Attributes 中可以知道這些屬性的資訊概要。

幾個常用的屬性：

1. android:gravity 設定其內容（文字、視圖）在該元素內的位置
2. android:ignoreGravity  設定元素的ID使其不受gravity屬性的影響

在 RelativeLayout.LayoutParams，有兩類屬性，一類是子項目在父元素的對齊，另一類是子項目相對其他元素的位置

下面是第一類屬性的

對於第二類屬性，我們實踐一下：
建立一個Android項目，然後在layout檔案夾找到布局xml檔案並寫入以下布局

然後在values檔案夾找到string.xml並增加以下代碼

運行效果如下：

更多詳細資料可以查看Google大神文檔：
http://developer.android.com/reference/android/widget/RelativeLayout.html

三，Android的螢幕適配1.螢幕相關概念

下面介紹幾個常見的名詞

• 螢幕大小

通過查閱裝置資訊可以知道裝置的物理尺寸，也可以通過計算螢幕對角線的長度得到。
在Android的設計規範中，把螢幕分成了4類：Small，Normal，Large，Extra Large

• 螢幕密度

螢幕在物理尺寸範圍內的像素數量。也通常指DPI(dots per inch)。螢幕密度越小，所包含的像素也就越少。
在Android的設計規範中，把螢幕密度劃分為4類：Low，Medium，High，Extra High。

• 螢幕方向

螢幕方向有橫向和縱向，這兩種情況下的螢幕長寬比是不同的。

• 解析度

跟電腦解析度的概念類似，表示螢幕橫縱方向的像素數，例如480*800。
在為APP進行螢幕適配時，不能只考慮到像素，還有螢幕大小，螢幕密度等等。

• DPI

dots per inch，就是每英寸多少像素，通過下面公式可以得到。
DPI＝（√（橫向解析度^2+縱向解析度^2））/螢幕尺寸

在Android的設計規範中，DPI分成了5個檔次：MDPI，HDPI，XHDPI，XXHDPI，XXXHDPI，它們的比例是 2:3:4:6:8

可以看一下不同的尺寸單位在不同螢幕的情況：

XHDPI螢幕(~320DPI)

HDPI螢幕(~240DPI)

MDPI螢幕(~160DPI)

通過以上可以得出：

• 在MDPI的螢幕(即160DPI)，1dp 和1sp 基本等於 1px 。
• dp 和 px的換算公式：px ＝ dp*(DPI/160)。
• sp 和 px的換算公式：px ＝ sp*(DPI/160)。

2.為不同的螢幕大小提供布局

通常來說，Android通過縮放使得APP可以適應螢幕大小，但是對於一些特殊情況，我們可以提供更佳的布局使得體驗更好。例如，在大螢幕裝置，可以通過調整UI組件的位置和大小使螢幕的空間可以得到充分利用。對於小裝置，就只需要調整UI組件的大小就行。

布局常用的大小有small,normal,large和x-large，可以根據需要選擇布局的類型進行配置。
常用的布局配置如下：

• res/layout/layout.xml
• res/layout-small/layout.xml
• res/layout-large/layout.xml
• res/layout-large-land/layout.xml

3.為不同的螢幕密度提供圖片

對於android來說，可以使用的圖片類型有.png，.jpg，.gif以及.9.png(點九圖)。APP會為不同的螢幕放大或者縮小圖片。如果只為MDPI的裝置提供了圖片，那麼對於HDPI的裝置圖片會放大，對於LDPI的裝置圖片會縮小。所以最好的方式是為不同的螢幕密度提供圖片。

對於設計師來說，可以選擇320DPI作為標準對APP進行設計，然後選擇Photoshop/Illustrator這些工具，按照裝置的比例，匯出不同尺寸的圖片。例如，為標準尺寸裝置(XHDPI)設計的200×200按鈕圖，就需要為HDPI裝置匯出150×150的尺寸，為MDPI裝置匯出100×100的尺寸
然後將這些圖片放到 res/ 中對應的檔案夾，APP會根據裝置的情況選取圖片。
設定如下：

• res/drawable-xhdpi/image.png
• res/drawable-hdpi/image.png
• res/drawable-mdpi/image.png

4，點九圖

“點九”是一種特殊的PNG格式，可以對圖片指定展開地區和內容地區。在SDK裡面的 tools/檔案夾就能找到製作這種圖片的工具。

工具介面如下：

把圖片拖拽到工具裡面進行加點標記

在圖片的左邊（A地區左側）和上邊（B地區上方）進行標記，表示該地區可伸縮。
A地區：

B地區：

在圖片的底邊（c地區下方）和右邊（D地區右側）進行標記，表示該地區是內容。
C地區：

D地區：

標記完之後，檔案在儲存的時候會將改為.9.png格式。
使用時，在xml檔案中設定android:background=”@drawable/button”。

關於點九的文章前面有同學介紹過：http://isux.tencent.com/android-ui-9-png.html
當然，如果你想偷懶的話，這裡有個工具可以幫你點:)
http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

四，總結

在做螢幕適配時，需要注意以下幾個點：

1. 在定義xml布局的時候，使用dp單位，wrap_content，fill_parent(match_parent)
2. 為不同的螢幕密度提供不同的圖片
3. 對於有某些規則(漸層)的圖片使用點九圖
4. 為特殊的螢幕類型(橫豎屏)提供不同的布局

對於本節來說，是非常基礎的知識，同時，這也是打造精品APP的必備知識，各位加油吧:P

（轉）android螢幕適配