漲姿勢(shì)了，原來(lái)Android屏幕適配還可以這么玩
為什么要屏幕適配?
碎片化
- 品牌機(jī)型碎片化
- 屏幕尺寸碎片化
- 操作系統(tǒng)碎片化
為了保證用戶獲得一致的用戶體驗(yàn)效果，使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果，則需要我們進(jìn)行屏幕適配。
基礎(chǔ)概念
屏幕尺寸
屏幕尺寸是指屏幕對(duì)角線的長(zhǎng)度，單位是英寸，1 inch=2.54 cm
屏幕分辨率
手機(jī)在橫向和縱向上的像素點(diǎn)數(shù)總和，單位是像素(pixel)，1px = 1像素點(diǎn)，舉個(gè)栗子，1080x1920，即寬度方向上有1080個(gè)像素點(diǎn)，在高度方向上有1920個(gè)像素點(diǎn)。
屏幕像素密度
每英寸像素點(diǎn)個(gè)數(shù)，單位是dpi，dots per inch。為簡(jiǎn)便起見(jiàn)，Android 將所有屏幕密度分組為六種通用密度： 低、中、高、超高、超超高和超超超高。
- ldpi(低)~120dpi
- mdpi(中)~160dpi
- hdpi(高)~240dpi
- xhdpi(超高)~320dpi
- xxhdpi(超超高)~480dpi
- xxxhdpi(超超超高)~640dpi
dpi_example
屏幕密度無(wú)關(guān)像素dp(dip)
Density Independent Pixels，即密度無(wú)關(guān)像素。
- 160dpi, 1dp = 1px
- 240dpi, 1dp = 1.5px
- 320dpi, 1dp = 2px
- 480dpi, 1dp = 3px
- 640dpi, 1dp = 4px
- 使用px在低、中、高屏幕密度下的效果
density-test-bad
- 使用dp在低、中、高屏幕密度下的效果
dimen_example2
獨(dú)立比例像素sp
Scale Independent Pixels, 即sp或sip。
Android開(kāi)發(fā)時(shí)用此單位設(shè)置文字大小，可根據(jù)字體大小***項(xiàng)進(jìn)行縮放，推薦使用12sp、14sp、18sp、22sp作為字體設(shè)置的大小，不推薦使用奇數(shù)和小數(shù)，容易造成精度的丟失問(wèn)題,小于12sp的字體會(huì)太小導(dǎo)致用戶看不清。
屏幕適配之圖片適配
在設(shè)計(jì)圖標(biāo)時(shí)，對(duì)于5種主流的像素密度(mdpi,hdpi,xhdpi,xxhdpi和xxxdpi)應(yīng)按照2:3:4:6:8的比例進(jìn)行縮放。例如一個(gè)啟動(dòng)圖片ic_launcher.png,它在各個(gè)像素密度文件夾下大小為：
- ldpi(低)
- mdpi(中)48*48
- hdpi(高)72*72
- xhdpi(超高)96*96
- xxhdpi(超超高)144*144
- xxxhdpi(超超超高)192*192
存在的問(wèn)題
- 每套分辨率出一套圖，為美工或者設(shè)計(jì)增加了許多工作量
- 對(duì)Android工程文件的apk包變的很大
解決方法
Android SDK加載圖片流程
- Android SDK會(huì)根據(jù)屏幕密度自動(dòng)選擇對(duì)應(yīng)的資源文件進(jìn)行渲染加載，比如說(shuō)，SDK檢測(cè)到你手機(jī)的分辨率是xhdpi，會(huì)優(yōu)先到xhdpi文件夾下找對(duì)應(yīng)的圖片資源;
- 如果xhdpi文件夾下沒(méi)有圖片資源，那么就會(huì)去分辨率高的文件夾下查找，比如xxhdpi，直到找到同名圖片資源，將它按比例縮小成xhpi圖片;
- 如果往上查找圖片還是沒(méi)有找到，那么就會(huì)往低分辨率的文件夾查找，比如hdpi，直到找到同名圖片資源，將它按比例放大成xhpi圖片。
根據(jù)加載圖片的流程，可以得出理論上提供一套圖片就可以了。
那么應(yīng)該提供哪種分辨率規(guī)格呢?
原則上越高越好，同時(shí)結(jié)合當(dāng)前主流分辨率屏幕
自動(dòng)拉伸圖片
ninepatch_raw
ninepatch_examples
屏幕適配之布局適配
布局參數(shù)
使用wrap_content, match_parent, layout_weight。
weight的使用
weight_examples
- 當(dāng)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>
當(dāng)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的計(jì)算
寬度 = 原來(lái)寬度 + 權(quán)重比值 * 剩余寬度
- 當(dāng)layout_width為0dp，layout_weight分別是1和2
***個(gè)按鈕：寬度 = 0 + 1/3 * 屏寬 = 1/3屏寬
第二個(gè)按鈕：寬度 = 0 + 2/3 * 屏寬 = 2/3屏寬
- 當(dāng)layout_width為match_parent, layout_weight分別是1和2
***個(gè)按鈕：寬度 = 屏寬 + 1/3 (屏寬 - 2 屏寬) = 2/3屏寬
第二個(gè)按鈕：寬度 = 屏寬 + 2/3 (屏寬 - 2 屏寬) = 1/3屏寬
布局使用
使用相對(duì)布局，禁用絕對(duì)布局。
限定符
尺寸限定符
- 在手機(jī)較小的屏幕上，加載layout文件夾布局
- 在平板電腦和電視的屏幕(>7英寸)上， 加載layout-large文件夾的布局
- Android3.2版本之前
最小寬度限定符
- 在手機(jī)較小的屏幕上，加載layout文件夾布局
- 標(biāo)準(zhǔn)7英寸平板(其最小寬度為 600 dp)，加載layout-sw600dp文件夾的布局
- 在Android3.2版本及之后版本
布局別名
- 適配手機(jī)的單面板(默認(rèn))布局：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
***的兩個(gè)文件的xml內(nèi)容是完全相同的，這會(huì)帶來(lái)：文件名的重復(fù)從而帶來(lái)一些列后期維護(hù)的問(wèn)題，修改一個(gè)文件，可能忘記修改另外一個(gè)。于是為了要解決這種重復(fù)問(wèn)題，我們引入了布局別名。
- 適配手機(jī)的單面板(默認(rèn))布局：res/layout/activity_main.xml
- 適配尺寸>7寸平板的雙面板布局：res/layout/activity_twopanes.xml
- resalues/layout.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <item name="main" type="layout">@layout/activity_main</item>
- </resources>
- resalues-large/layout.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <item name="main" type="layout">@layout/activity_twopanes</item>
- </resources>
- resalues-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)
dimen_example2
即使使用dp，依然不能解決屏幕分辨率的適配問(wèn)題，我們可以針對(duì)不同的屏幕創(chuàng)建不同的dimen值。
- resalues/dimens.xml
- <resources>
- <dimen name="button_length_1">180dp</dimen>
- <dimen name="button_length_2">160dp</dimen>
- </resources>
- resalues-480x800/dimens.xml
- <resources>
- <dimen name="button_length_1">113dp</dimen>
- <dimen name="button_length_2">100dp</dimen>
- </resources>
屏幕適配之百分比布局
- 官方文檔
- Github Sample
- <?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>
屏幕適配之自適應(yīng)用戶界面
newsreader_land
newsreader_port
當(dāng)NewsReader在橫屏?xí)r是雙面板，左側(cè)是HeadLinesFragment, 右側(cè)是ArticleFragment, 點(diǎn)擊新聞標(biāo)題, 切換ArticleFragment的內(nèi)容。當(dāng)NewsReader在豎屏?xí)r是單面板，只有個(gè)HeadLinesFragment, 點(diǎn)擊新聞標(biāo)題，跳轉(zhuǎn)到ArticleActivity去顯示新聞內(nèi)容。所以，要實(shí)現(xiàn)這樣的橫豎屏適配，只是通過(guò)布局是完成不了的，不同業(yè)務(wù)邏輯的處理，還需要寫(xiě)代碼來(lái)完成，這就是我們的自適應(yīng)用戶界面。
使用布局別名
- resalues/layouts.xml
- <resources>
- <item name="main_layout" type="layout">@layout/onepane_with_bar</item>
- <bool name="has_two_panes">false</bool>
- </resources>
- resalues-sw600dp-land/layouts.xml
- <resources>
- <item name="main_layout" type="layout">@layout/twopanes</item>
- <bool name="has_two_panes">true</bool>
- </resources>
- resalues-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則是雙面板
單雙面板的不同業(yè)務(wù)邏輯
- 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);
- }
- }
