GitHub地址

為什么要屏幕適配？

device_framentation.png

統計

碎片化

品牌機型碎片化

屏幕尺寸碎片化

操作系統碎片化

為了保證用戶獲得一致的用戶體驗效果，使得某一元素在Android不同尺寸、不同分辨率的手機上具備相同的顯示效果，則需要我們進行屏幕適配。

基礎概念

屏幕尺寸

屏幕尺寸是指屏幕對角線的長度，單位是英寸，1 inch=2.54 cm

屏幕分辨率

手機在橫向和縱向上的像素點數總和，單位是像素(pixel)，1px = 1像素點，舉個栗子，1080x1920，即寬度方向上有1080個像素點，在高度方向上有1920個像素點。

屏幕像素密度

每英寸像素點個數，單位是dpi，dots per inch。為簡便起見，Android 將所有屏幕密度分組為六種通用密度： 低、中、高、超高、超超高和超超超高。

ldpi(低)~120dpi

mdpi(中)~160dpi

hdpi(高)~240dpi

xhdpi(超高)~320dpi

xxhdpi(超超高)~480dpi

xxxhdpi(超超超高)~640dpi

dpi_example.png

屏幕密度無關像素dp(dip)

Density Independent Pixels，即密度無關像素。

160dpi, 1dp = 1px

240dpi, 1dp = 1.5px

320dpi, 1dp = 2px

480dpi, 1dp = 3px

640dpi, 1dp = 4px

使用px在低、中、高屏幕密度下的效果###

density-test-bad.png

使用dp在低、中、高屏幕密度下的效果

density-test-good.png

獨立比例像素sp

Scale Independent Pixels, 即sp或sip。

Android開發時用此單位設置文字大小，可根據字體大小首選項進行縮放，推薦使用12sp、14sp、18sp、22sp作為字體設置的大小，不推薦使用奇數和小數，容易造成精度的丟失問題,小于12sp的字體會太小導致用戶看不清。

屏幕適配之圖片適配

screens-densities.png

在設計圖標時，對于5種主流的像素密度(mdpi,hdpi,xhdpi,xxhdpi和xxxdpi)應按照2:3:4:6:8的比例進行縮放。例如一個啟動圖片ic_launcher.png,它在各個像素密度文件夾下大小為：

ldpi(低)

mdpi(中)48*48

hdpi(高)72*72

xhdpi(超高)96*96

xxhdpi(超超高)144*144

xxxhdpi(超超超高)192*192

存在的問題

每套分辨率出一套圖，為美工或者設計增加了許多工作量

對Android工程文件的apk包變的很大

解決方法

Android SDK加載圖片流程

Android SDK會根據屏幕密度自動選擇對應的資源文件進行渲染加載，比如說，SDK檢測到你手機的分辨率是xhdpi，會優先到xhdpi文件夾下找對應的圖片資源；

如果xhdpi文件夾下沒有圖片資源，那么就會去分辨率高的文件夾下查找，比如xxhdpi，直到找到同名圖片資源，將它按比例縮小成xhpi圖片；

如果往上查找圖片還是沒有找到，那么就會往低分辨率的文件夾查找，比如hdpi，直到找到同名圖片資源，將它按比例放大成xhpi圖片。

根據加載圖片的流程，可以得出理論上提供一套圖片就可以了。

那么應該提供哪種分辨率規格呢？###

原則上越高越好，同時結合當前主流分辨率屏幕

自動拉伸圖片

ninepatch_raw.png

ninepatch_examples.png

屏幕適配之布局適配

布局參數

使用wrap_content, match_parent, layout_weight。

weight的使用

weight_examples.png

當layout_width為0dp，layout_weight分別是1和2

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="weight = 1"/>

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="2"

android:text="weight = 2"/>

當layout_width為match_parent,layout_weight分別為1和2

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="weight = 1"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="2"

android:text="weight = 2"/>

weight的計算

寬度 = 原來寬度 + 權重比值 * 剩余寬度

當layout_width為0dp，layout_weight分別是1和2

第一個按鈕：寬度 = 0 + 1/3 * 屏寬 = 1/3屏寬

第二個按鈕：寬度 = 0 + 2/3 * 屏寬 = 2/3屏寬

當layout_width為match_parent, layout_weight分別是1和2

第一個按鈕：寬度 = 屏寬 + 1/3 * (屏寬 - 2 * 屏寬) = 2/3屏寬

第二個按鈕：寬度 = 屏寬 + 2/3 * (屏寬 - 2 * 屏寬) = 1/3屏寬

布局使用

使用相對布局，禁用絕對布局。

限定符

尺寸限定符

在手機較小的屏幕上，加載layout文件夾布局

在平板電腦和電視的屏幕(>7英寸)上， 加載layout-large文件夾的布局

Android3.2版本之前

最小寬度限定符

在手機較小的屏幕上，加載layout文件夾布局

標準7英寸平板(其最小寬度為 600 dp)，加載layout-sw600dp文件夾的布局

在Android3.2版本及之后版本

布局別名

適配手機的單面板(默認)布局：res/layout/activity_main.xml

適配尺寸>7寸平板的雙面板布局(Android 3.2前)：res/layout-large/activity_main.xml

適配尺寸>7寸平板的雙面板布局(Android 3.2后)：res/layout-sw600dp/activity_main.xml

最后的兩個文件的xml內容是完全相同的，這會帶來：文件名的重復從而帶來一些列后期維護的問題，修改一個文件，可能忘記修改另外一個。于是為了要解決這種重復問題，我們引入了布局別名。

適配手機的單面板(默認)布局：res/layout/activity_main.xml

適配尺寸>7寸平板的雙面板布局：res/layout/activity_twopanes.xml

res/values/layout.xml

@layout/activity_main

res/values-large/layout.xml

@layout/activity_twopanes

res/values-sw600dp/layout.xml

@layout/activity_twopanes

setContentView(R.layout.main);

屏幕方向限定符

res/layout-land

res/layout-port

res/layout-sw600dp-land

res/layout-sw600dp-port

屏幕適配之dimen適配

Nexus 4 (4.7英寸 768x1280:xhdpi)

dimen_example1.png

Nexus S (4英寸 480x800:hdpi)

dimen_example2.png

即使使用dp，依然不能解決屏幕分辨率的適配問題，我們可以針對不同的屏幕創建不同的dimen值。

res/values/dimens.xml

180dp

160dp

res/values-480x800/dimens.xml

113dp

100dp

屏幕適配之百分比布局

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="30%"

app:layout_widthPercent="30%"/>

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:text="20%"

app:layout_widthPercent="20%"/>

屏幕適配之自適應用戶界面

newsreader_land.png

newsreader_port.png

當NewsReader在橫屏時是雙面板，左側是HeadLinesFragment, 右側是ArticleFragment, 點擊新聞標題, 切換ArticleFragment的內容。當NewsReader在豎屏時是單面板，只有個HeadLinesFragment, 點擊新聞標題，跳轉到ArticleActivity去顯示新聞內容。所以，要實現這樣的橫豎屏適配，只是通過布局是完成不了的，不同業務邏輯的處理，還需要寫代碼來完成，這就是我們的自適應用戶界面。

使用布局別名

res/values/layouts.xml

@layout/onepane_with_bar

false

res/values-sw600dp-land/layouts.xml

@layout/twopanes

true

res/values-sw600dp-port/layouts.xml

@layout/onepane

false

判斷是單面板還是雙面板

View articleView = findViewById(R.id.article);

mIsDualPane = articleView != null && articleView.getVisibility() == View.VISIBLE;//如果能夠找到ArticleFragment則是雙面板

單雙面板的不同業務邏輯

public void onHeadlineSelected(int index) {

mArtIndex = index;

if (mIsDualPane) {

// display it on the article fragment

mArticleFragment.displayArticle(mCurrentCat.getArticle(index));

}

else {

// use separate activity

Intent i = new Intent(this, ArticleActivity.class);

i.putExtra("catIndex", mCatIndex);

i.putExtra("artIndex", index);

startActivity(i);

}

}

參考

本文部分文字和圖片直接摘錄自以下內容：

總結

以上是生活随笔為你收集整理的android屏幕适配流程,Android屏幕适配姿势的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。