前端之Android入門(6)-屏幕適配
前端之Android入門(6)-屏幕適配-移動閱讀二維碼

android-logo

在前幾篇文章,我們大致了解了Android開發的一些常規模式和方法,在這個過程中其實我們已經接觸到了屏幕適配方面的相關知識,但是并沒有深入地講解這些概念。這篇文章我們將分三個方面進行詳細講解。

一,Android的度量單位

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

  • px

px是Pixels的縮寫,是常用的像素單位,對應的是屏幕上的點。
移動設備的尺寸有很多種,它們的屏幕總像素也是不同的,使用px單位的組件尺寸會有不一致的情況。

我們看個例子
ep_iconep_icon1
可以看出這個加號icon在分辨率較高,尺寸較大的屏幕上反而顯得略小

  • dip/dp

dp(density-independent?pixel)是與密度無關的像素單位,也就是dip。它是基于設備屏幕物理密度的抽象單位。1dp?表示屏幕DPI為160時1px的長度。DPI?越高的屏幕,屏幕繪制1dp?需要越多的像素,反之亦然。

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

ep_icon2

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

  • sp

sp(scale-independent?pixel)是與縮放無關的像素單位。跟dp類似,唯一的不同是,該單位會受系統字體設置的影響,通常用在字體上。
Android在設計規范中規定了字體的常用大?。?br /> 圖片1
使用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

圖片2

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

從 Summary 的 XML Attributes 中可以知道這些屬性的信息概要。
QQ截圖20140704103312

幾個常用的屬性:

  1. android:foreground??設置布局的前景圖,前景圖不會被子元素覆蓋
  2. android:foregroundGravity?設置布局前景圖的位置

對于FrameLayout.LayoutParams,這里僅有android:layout_gravity屬性,可以查看前面文章:《前端之Android入門(3) – MVC模式(上)

我們可以實踐一下:
新建一個Android項目,然后在layout文件夾找到布局xml文件并寫入以下布局
QQ圖片20140704105256

運行效果如下:
QQ截圖20140704105354

更多詳細信息可以查看谷歌大神文檔:
http://developer.android.com/reference/android/widget/FrameLayout.html

Linear?Layout

圖片3

線性布局在前面有所講解,小伙伴們可以看這篇文章:《前端之Android入門(3) – MVC模式(上)

Relative?Layout

圖片4

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

從 Summary 的 XML Attributes 中可以知道這些屬性的信息概要。
{CE3AF64C-7D92-4003-9796-7A0FF122B6CD}

幾個常用的屬性:

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

在?RelativeLayout.LayoutParams,有兩類屬性,一類是子元素在父元素的對齊方式,另一類是子元素相對其他元素的位置

下面是第一類屬性的示意圖
AUPWR1H[~IO@3LR3$3QV7]T

對于第二類屬性,我們實踐一下:
新建一個Android項目,然后在layout文件夾找到布局xml文件并寫入以下布局
圖片24

然后在values文件夾找到string.xml并增加以下代碼
圖片6

運行效果如下:
圖片14

更多詳細信息可以查看谷歌大神文檔:
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

圖片7

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

XHDPI屏幕(~320DPI)
圖片8

HDPI屏幕(~240DPI)
圖片25

MDPI屏幕(~160DPI)
圖片10

通過以上可以得出:

  • 在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/文件夾就能找到制作這種圖片的工具。

圖片15

工具界面如下:
圖片16
把圖片拖拽到工具里面進行加點標記

在圖片的左邊(A區域左側)和上邊(B區域上方)進行標記,表示該區域可伸縮。
A區域:
圖片17
B區域:
圖片18

在圖片的底邊(c區域下方)和右邊(D區域右側)進行標記,表示該區域是內容。
C區域:
圖片19
D區域:
圖片20

標記完之后,文件在保存的時候會將改為.9.png格式。
使用時,在xml文件中設置android:background=”@drawable/button”。

圖片21

關于點九的文章前面有同學介紹過:《Android設計中的.9.png
當然,如果你想偷懶的話,這里有個工具可以幫你點:)
http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

四,總結

在做屏幕適配時,需要注意以下幾個點:

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

對于本節來說,是非?;A的知識,同時,這也是打造精品APP的必備知識,各位加油吧:P

附:
前端之Android入門(5) – MVC模式(下)
前端之Android入門(4) – MVC模式(中)
前端之Android入門(3) – MVC模式(上)
前端之Android入門(2) – 程序目錄及UI簡介
前端之Android入門(1) – 環境配置

 

本文鏈接:http://www.casaleticia.com/learn-android-from-zero-session-6.html
本文標簽: , , , , , , ,