1. 程式人生 > >UI設計師給的px尺寸單位,安卓如何換算成dp?

UI設計師給的px尺寸單位,安卓如何換算成dp?

很多UI工程師為了適配IOS,常常拿IOS手機作用參考模型,設計出來的UI稿只有PX標註的。他們也不懂Android的dp和sp單位是怎麼回事。這個時候我們Android工程師如果不注意怎麼轉換的話,就可能開發出很難看的介面。

那麼如何才能正確的將UI稿的上的px轉換成android的dp單位呢?這個取決於UI設計師的設計稿基於什麼裝置。

一般安卓開發者只要適配一款主流裝置,比如Nexues5,其它大部分手機都可以適配。如果要精確適配,就要針對不同解析度進行單獨適配。為了簡單起見,我們只需要適配主流裝置就可以了。

首先,我們要知道UI設計師的設計稿是基於什麼裝置設計的。知道了什麼裝置,這個裝置的dpi也就知道了。那麼px與dp之間換算就很簡單:px=(dpi/160)dp

要注意的是這個公式中dpi並不是我們自己計算出來的(螢幕對角線的相像數除以對角線長度),而是手機廠家ROM中設定density(density=dpi/160),android通過java程式碼可以直接獲取:

//以下是獲取density,density=densityDpi/160
 context.getResources().getDisplayMetrics().density;
//以下是獲取densityDpi,就是我們常說的dpi:畫素密度
 context.getResources().getDisplayMetrics().densityDpi;

而實際情況下,設計師常常並沒有針對安卓裝置單獨做一套設計稿,而是選擇了iphone手機作為參考機型。他們以為適配了IOS就等於適配了安卓。標註尺寸單位都是px。設計帥常常拿iphone6(s)或者是iphone6(s) plus作為參考機型,一個4.7寸一個5.5寸。比如是4.7英寸的iphone6,它的解析度是1334x750(dpi是326),而安卓裝置最接近這個數值的解析度是1280*720,對應這個解析度的dpi一般是320,跟iphone 6(s)很接近,那麼UI使用的iphone6(s)設計稿就對應安卓1280x720(dpi是320)的裝置,所以我們就用320這個dpi進行換算。再比如是5.5英寸的iphone6 plus,它的解析度是1920x1080(dpi是480),而安卓裝置剛好也有很多同等的解析度,對應這個解析度的dpi一般是480,而iphone6 plus的dpi也是480,所以我們用480的dpi進行換算。

舉個例子,設計師基於iphone6的設計稿標註20px,換算成dp就是20x/(320/160)=20/2=10。也就是除以2得到dp。如果設計師基於iphone6 plus的設計稿標註120px,那麼dp就是120x/(480/160)=30/3=40。也就是除以3得到dp。

一般我們看UI稿的尺寸就可以推測出它的參考機型,比如UI稿的尺寸是1334x750,那肯定是iphone6(s)一類的機型,或者是1920x1080,那就是iphone6(s) plus一類的機型。如果UI稿的尺寸匹配不到一款主流的機型,那就是UI設計師不合格啦!

還有一種方法,程式設計師不需換算,UI設計師可以直接在設計工具中將px單位轉換成dp單位,標註圖上顯示的就是dp單位,比如PxCook這個工具已經支援這個功能。

以上是一般性的適配方法,如果廠商生產的手機很奇葩,比如1280*720的解析度dpi不是320,而是相差很大,比如是400,那麼Android開發者就需要進行單獨適配了。