屏幕適配全攻略 · java/android朝圣之路

**一、重要概念** 屏幕尺寸：指平米的對角線的長度，單位是英寸，1英寸=2.54厘米，它對我們屏幕適配不是很重要。屏幕分辨率：指在橫縱向上的像素點數，單位是px,1px = 1個像素點，一般以縱向像素*橫向像素，如1920*1080. 屏幕像素密度：指每英寸上的像素點數，單位是dpi，即“dot per inch”的縮寫，像素密度與屏幕尺寸和分辨率有關像素密度計算：對角線分辨率-->對角線分辨率除以屏幕尺寸-->像素密度例：Nexus 5 屏幕尺寸是4.95，分辨率是1920*1080，則dpi=（√（1920*1920+1080*1080））/4.94=445 px:構成圖像的最小單位使用android原生api返回的都是這個單位，如獲取安卓屏幕的寬和高<br> dp、dip：Density Independent Pixels的縮寫，即密度無關像素，以160dpi（像素密度）為基準，1dip = 1px sp:Scale-Independent Pixels 可以根據文字大小首選項進行縮放谷歌開發官方推薦使用12sp或以上大小單位，否則可能用戶看不清楚首選字體大小為12sp，14sp，18sp，22sp。不要使用基數小數，以免造成精度丟失安卓屏幕密度劃分：mdpi、hdpi、xdpi、xxdpi 設計文檔：[http://www.apkbus.com/design/style/iconography.html](http://www.apkbus.com/design/style/iconography.html) 在設計圖標時，對于五種主流的像素密度（MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI）應按照 2:3:4:6:8 的比例進行縮放。例如，一個啟動圖標的尺寸為48x48 dp，這表示在 MDPI 的屏幕上其實際尺寸應為 48x48 px，在 HDPI 的屏幕上其實際大小是 MDPI 的 1.5 倍 (72x72 px)，在 XDPI 的屏幕上其實際大小是 MDPI 的 2 倍 (96x96 px)，依此類推。 **二、解決方案，支持各種屏幕尺寸** 1、wrap_content(包住內容) match_content匹配父容器的大小,weight:權重，同時用了wrap_content 權重大的先學會拉伸。 layout_weight只能在線程布局里使用計算的寬度= 原來寬度 + 剩余空間所占百分比的寬度假設屏幕寬度為L Button1 2/3L = L + (L - 2L)* 1/3 = 2/3L 用0dp 1/3L = 0 + L *1/3 Button2 1/3L = L + (L- 2L)*2/3 = 1/3L 2、使用large限定符 ~~~ res/layout/main.xml 單面板 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout> res/layout-large/main.xml 雙面板 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="400dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout> ~~~ 3、布局別名 ~~~ 使用布局別名 res/layout/main.xml: 單面板布局 res/layout-large/main.xml: 多面板布局 res/layout-sw600dp/main.xml: 多面板布局 res/layout/main.xml 單面板布局 res/layout/main_twopanes.xml 雙面板布局 setContentView(R.layout.main); 默認布局 res/values/layout.xml: <resources> <item name="main" type="layout">@layout/main</item> </resources> Android3.2之前的平板布局 res/values-large/layout.xml: <resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources> Android3.2之后的平板布局 res/values-sw600dp/layout.xml: <resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources> ~~~ 4、屏幕寬度限定符 ~~~ res/layout/main.xml，單面板（默認）布局： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout> res/layout-sw600dp/main.xml，雙面板布局： Small Width 最小寬度 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="400dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout> ~~~ 5、屏幕方向限定符 ~~~ 使用屏幕方向限定符 res/values-sw600dp-land/layouts.xml: <resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources> res/values-sw600dp-port/layouts.xml: <resources> <item name="main" type="layout">@layout/main</item> </resources> 小屏幕，縱向： 1.單面板小屏幕，橫向：單面板 7 英寸平板電腦，縱向： 2.單面板，帶操作欄 7 英寸平板電腦，橫向： 3.雙面板，寬，帶操作欄 10 英寸平板電腦，縱向： 4.雙面板，窄，帶操作欄 10 英寸平板電腦，橫向：雙面板，寬，帶操作欄電視，橫向：雙面板，寬，帶操作欄 1.res/layout/onepane.xml:(單面板) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout> 2.res/layout/onepane_with_bar.xml:(單面板帶操作欄) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:gravity="center" android:layout_height="50dp"> <ImageView android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/logo" android:paddingRight="30dp" android:layout_gravity="left" android:layout_weight="0" /> <View android:layout_height="wrap_content" android:id="@+id/view1" android:layout_width="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/categorybutton" android:background="@drawable/button_bg" android:layout_height="match_parent" android:layout_weight="0" android:layout_width="120dp" style="@style/CategoryButtonStyle"/> </LinearLayout> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout> 3.res/layout/twopanes.xml:(雙面板，寬布局) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="400dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout> 4.res/layout/twopanes_narrow.xml:(雙面板，窄布局) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="200dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout> 1.res/values/layouts.xml: <resources> <item name="main_layout" type="layout">@layout/onepane_with_bar</item> <bool name="has_two_panes">false</bool> </resources> 2.res/values-sw600dp-land/layouts.xml: <resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources> 3.res/values-sw600dp-port/layouts.xml: <resources> <item name="main_layout" type="layout">@layout/onepane</item> <bool name="has_two_panes">false</bool> </resources> 4.res/values-large-land/layouts.xml: <resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources> 5.res/values-large-port/layouts.xml: <resources> <item name="main_layout" type="layout">@layout/twopanes_narrow</item> <bool name="has_two_panes">true</bool> </resources> ~~~ 6、.9圖的使用目錄為：sdk->tools->draw9patch.bat 主要是通過在這四條邊畫一個像素長度的點或線，來控制想要進行拉伸或者添加間隔的操作。左邊和上邊的線控制的是拉伸區域(Stretchable area)，這兩條線的中心交集區域就是要進行的拉伸區域；而右邊和下邊的兩條線控制的是間隔區域(Padding box)，這兩條邊是可選的，這個區域用來寫內容 **三、解決方案，支持各種屏幕密度** 1.使用非密度制約像素 android:layout_alignParentRight="true" 2.提供備用位圖多提供幾張圖片。使用和目標文件夾相符的文件夾，占用內存小，因為圖標放大的時候內存也會增加。 3、代碼適配 dp和px的關系: dp = px/設備密度 ~~~ public?static?int?dp2px(Context?ctx,?float?dp)?{?? ????????float?density?=?ctx.getResources().getDisplayMetrics().density;?? ????????int?px?=?(int)?(dp?*?density?+?0.5f);//?四舍五入?? ?? ????????return?px;?? ????}?? ?? ????public?static?float?px2dp(Context?ctx,?int?px)?{?? ????????float?density?=?ctx.getResources().getDisplayMetrics().density;?? ????????float?dp?=?px?/?density;?? ?? ????????return?dp;?? ????} ~~~ **四、實施自適應用戶界面流自適應** 平板和手機設備：重復使用活動中的片段，用一個標志位，處理屏幕方向變化。