GitHub地址
為什么要屏幕適配?
統計
碎片化
- 品牌機型碎片化
- 屏幕尺寸碎片化
- 操作系統碎片化
為了保證用戶獲得一致的用戶體驗效果,使得某一元素在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
屏幕密度無關像素dp(dip)
Density Independent Pixels,即密度無關像素。
- 160dpi, 1dp = 1px
- 240dpi, 1dp = 1.5px
- 320dpi, 1dp = 2px
- 480dpi, 1dp = 3px
- 640dpi, 1dp = 4px
使用px在低、中、高屏幕密度下的效果###
使用dp在低、中、高屏幕密度下的效果
獨立比例像素sp
Scale Independent Pixels, 即sp或sip。
Android開發時用此單位設置文字大小,可根據字體大小首選項進行縮放,推薦使用12sp、14sp、18sp、22sp作為字體設置的大小,不推薦使用奇數和小數,容易造成精度的丟失問題,小于12sp的字體會太小導致用戶看不清。
屏幕適配之圖片適配
在設計圖標時,對于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圖片。
根據加載圖片的流程,可以得出理論上提供一套圖片就可以了。
那么應該提供哪種分辨率規格呢?###
原則上越高越好,同時結合當前主流分辨率屏幕
自動拉伸圖片
屏幕適配之布局適配
布局參數
使用wrap_content, match_parent, layout_weight。
weight的使用
-
當layout_width為0dp,layout_weight分別是1和2
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="weight = 1"/> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" android:text="weight = 2"/> </LinearLayout>
-
當layout_width為match_parent,layout_weight分別為1和2
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="weight = 1"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="2" android:text="weight = 2"/> </LinearLayout>
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
<?xml version="1.0" encoding="utf-8"?> <resources> <item name="main" type="layout">@layout/activity_main</item> </resources>
-
res/values-large/layout.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <item name="main" type="layout">@layout/activity_twopanes</item> </resources>
-
res/values-sw600dp/layout.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <item name="main" type="layout">@layout/activity_twopanes</item> </resources>
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)
- Nexus S (4英寸 480x800:hdpi)
即使使用dp,依然不能解決屏幕分辨率的適配問題,我們可以針對不同的屏幕創建不同的dimen值。
-
res/values/dimens.xml
<resources> <dimen name="button_length_1">180dp</dimen> <dimen name="button_length_2">160dp</dimen> </resources>
-
res/values-480x800/dimens.xml
<resources> <dimen name="button_length_1">113dp</dimen> <dimen name="button_length_2">100dp</dimen> </resources>
屏幕適配之百分比布局
-
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentRelativeLayout 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"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:text="30%" app:layout_widthPercent="30%"/> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:text="20%" app:layout_widthPercent="20%"/> </android.support.percent.PercentRelativeLayout>
屏幕適配之自適應用戶界面
當NewsReader在橫屏時是雙面板,左側是HeadLinesFragment, 右側是ArticleFragment, 點擊新聞標題, 切換ArticleFragment的內容。當NewsReader在豎屏時是單面板,只有個HeadLinesFragment, 點擊新聞標題,跳轉到ArticleActivity去顯示新聞內容。所以,要實現這樣的橫豎屏適配,只是通過布局是完成不了的,不同業務邏輯的處理,還需要寫代碼來完成,這就是我們的自適應用戶界面。
使用布局別名
-
res/values/layouts.xml
<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
<resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources>
-
res/values-sw600dp-port/layouts.xml
<resources> <item name="main_layout" type="layout">@layout/onepane</item> <bool name="has_two_panes">false</bool> </resources>
判斷是單面板還是雙面板
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);
}
}
參考
本文部分文字和圖片直接摘錄自以下內容: