1. 程式人生 > >Android UI繪製 -- 螢幕適配

Android UI繪製 -- 螢幕適配

#重要概念

螢幕尺寸

手機對角線的物理尺寸,單位英寸。 常見的有:5寸、5.5寸、6寸等

螢幕解析度

手機在橫向、縱向上的畫素點數總和,單位px。 常見的有:1080x1980、720x1280/480x800等

螢幕畫素密度

每英寸的畫素點數,單位dpi。

密度型別 代表解析度(px) 螢幕畫素密度(dpi)
低密度(ldpi) 240x320 120
中密度(mdpi) 320x480 160
高密度(hdpi) 480x800 240
超高密度(xhdpi) 720x1280 320
超超高密度(xxhdpi) 1080x1920 480

密度無關畫素

Android特有的單位,與終端上的實際物理畫素點無關。單位dp。

密度型別 代表解析度(px) 螢幕密度(dpi) 換算(px/dp) 比例
低密度(ldpi) 240x320 120 1dp=0.75px 3
中密度(mdpi) 320x480 160 1dp=1px 4
高密度(hdpi) 480x800 240 1dp=1.5px 6
超高密度(xhdpi) 720x1280 320 1dp=2px 8
超超高密度(xxhdpi) 1080x1920 480 1dp=3px 12

獨立比例畫素

Android特有的單位,可根據字型大小首選項進行縮放

dp適配方案

我們以設計圖為720x1280解析度為例(有的公司設計直接給的iPhone 6 750x1344,可近視為等同)。 在這裡插入圖片描述

如上圖,720px的設計圖,dp = px/2,也就是說;如果你測量到UI設計圖上的距離是100px,那麼你程式碼裡應該寫dp_50。 PS:這裡推薦一個小工具,PxCook。可以根據設計的psd圖做測量,Android、IOS都可以,而且會根據設計圖的解析度自動轉換(就是說 你把720x1280的設計圖丟進去,100px的距離測量出來就是50dp了哦)。 第一步:綜上,程式碼裡的距離要寫對,一般以720x1280為基準,當然也可以根據公司情況調整 第二步:在根據基準解析度在values/dimens.xml中編寫一套我們常用的dimens.xml(個別特殊需求可以再加)。 在這裡插入圖片描述 第三步:根據這個基準,製作出不同寬度的dimens.xml PS:這裡有個AS小外掛介紹下,ScreenMatch。在Setting - Plugs裡下載,可以在screenMatch.properties中進行配置,base_dp=360 配置基準的dp,預設的360就是720x1280了。然後在module中右鍵 - ScreenMatch即可自動生成其他不同寬度的dimens.xml 在這裡插入圖片描述

手機 平板 適配方案

Android 3.2 之後引入最小寬度限定符,可以用來做不同的手機 平板做適配。

//預設
res/layout/main.xml
//適配寬度大於600dp的螢幕(大概7寸的平板)
res/layout-sw600dp/main.xml

螢幕方向限定符,可以從來做不同手機 平板橫豎屏時的佈局匹配(結合最小寬度限定符)

//預設
res/values/layouts.xml
//寬度大於600dp,橫屏
res/values-sw600dp-land/layouts.xml
//寬度大於600dp,豎屏
res/values-sw600dp-port/layouts.xml

PS:最小寬度限定只能在Android3.2之後的版本使用,可以準確的為多種寬度的螢幕做適配。在Android3.2之前只有large來統一適配大於600dp的大屏手機或平板

適配細節

  • 禁用絕對佈局AbsoluteLayout
  • 合理利用"wrap_content"、“match_parent”、"weight“、“weightSum”來控制檢視元件的寬度和高度
  • 圖片適配可以採用9png方案(直接修改png圖片的字尾為.9.png,然後在AS中直接進行設定。千萬不要右鍵 Create 9-patch file,不要問我為什麼…)
  • 控制元件之間或者控制元件大小盡量設定間距,不要直接設定寬高。