Android px, dp, sp的區別

Android自興起以來,開發者不斷增加,與此同時市場上參差不齊的設備也不斷增加,隨之而來的則是開發者需要適配衆多機型而帶來的困擾與抱怨。並且隨着不同廠家定製化不同的ROM,Android設備的碎片化現象日益嚴重。這篇文章主要講述如何設計中嚴格遵從設計圖標準的Android頁面。

1. px, dp, sp區別

什麼是px

px就是我們通常所說的像素的單位,在css裏面,我們用px比較多。px主要指用戶在屏幕上看到的事物的實際大小單位。

什麼是dp

在看手機或者電腦參數時,我們經常說到一個關鍵詞,屏幕分辨率(resolution),分辨率被表示成每一個方向上的像素數量,比如800x480分辨率

Retina resolution

上圖中,我們可以看到15寸的retina pro分辨率是2880x1800,而60寸的HDTV分辨率卻只有1920x1080。可見如果60寸的HDTV也要達到Retina的顯示效果,其分辨率大概至少爲11520x7200。

既然已經有了分辨率的概念,那麼我們就可以瞭解 dpi(dot per inch)的概念了。dpi本意是每英寸點的數量,但是也經常和ppi(pixel per inch)混用。指每英寸的像素數量,也被我們稱爲屏幕密度,dpi越大,圖像從視覺上看起來越清晰。

Google官方對dp的解釋如下:

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application’s UI, to ensure proper display of your UI on screens with different densities.

有了密度的概念,我們可以更好的理解dp(density independent pixel)了。dp是Android中用來定義UI佈局中表達元素尺寸或位置的一個虛擬的像素單位,dp的存在是爲了頁面元素位置不受屏幕密度所影響。以設計師設計一個APP頁面爲例,設計師希望用戶視覺上看起來如此,也就是設計師設計時通常以px作爲基礎單位。而在其他不同屏幕密度的設備中,也希望能夠進行一定的伸縮,類似於維持一個相對一致的百分比。所以開發者通常需要以dp爲單位,以適應不同密度的屏幕。

所以dp和px之間有一套換算標準:px = dp * (dpi / 160)。假設在dpi爲320的屏幕上,1dp = 2px。

什麼是sp

sp是Android中專業爲字體而設置的單位。使用sp作爲字體單位不僅能夠使字體大小受屏幕密度影響,並且能夠使字體受用戶系統設置的影響。Android提供字體大小的設置選項。一旦使用sp作爲字體,根據用戶設置字體的不同,App中的字體大小也會顯示不同。但是在正常字體設置下,1dp = 1sp。

2. 設計師視角

Android的多屏適配存在這麼多的尺寸,自然需要設計師和工程師之間找到溝通的橋樑,設計師如何規範設計才能夠更加符合Android的設計標準呢。設計師與工程師對於頁面的尺寸需要有一個共識性的標準,測試人員纔可能進行更有效的測試,才不致於因爲不同機型顯示不同效果而引起不必要的工作量。

首先我們需要選擇一個相對通用的屏幕尺寸,可以參考現有的一些主流機型的尺寸。爲了便於計算,我們選擇Nexus 4作爲設計圖的原版標準。那麼所有的頁面都是基於Nexus4而產生的。Nexus4尺寸如下:

主屏尺寸4.7,主屏分辨率:1280x768像素,屏幕像素密度320ppi。

一般來說,我們選擇市場上最常見的機型來設計,這裏我們爲了計算方便,選擇320ppi的機型,設計圖中尺寸將是標準圖中的2倍。假設在設計圖中,頁面內邊距爲32px, 按鈕的高度爲96px, icon大小爲48x48。

通過px=dp*(dpi/160)的標準,設計師給開發者標註圖時可標註頁邊距爲16dp,按鈕高度爲48dp,icon則分別出四套mdpi, hdpi, xhdpi, xxhdpi標準。

3. 開發者視角

margin, padding, height, width

從開發者角度來看,對於控件的尺寸,高度等,只需要按照轉化後的dp設置即可。

android:layout_padding="16dp"

android:layout_height="48dp"

以dp爲單位能夠保證不同分辨率屏幕上顯示不同大小的字體。並且能夠保持相對大小,這樣也更符合設計的初衷。

圖片資源

對於png製作出來的圖片,一般大小固定,沒辦法像尺寸一樣自動的伸縮。所以Android會存在至少4個資源文件夾。當App運行過程中,系統能夠根據當前設備的屏幕密度,自動選擇使用哪種尺寸的圖片資源。

ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi
0.75 1 1.5 2 3 4
120 160 240 320 480 640
18x18 24x24 36x36 48x48 72x72 96x96

4. 更多

附上Android主流機型:

Android:主流機型主要爲 480x800, 480x854, 540x960, 720x1280, 800x1280 這五種。
(非主流機型還包括:240x320, 320x480, 640x960 這三種,其中兩種都與 iPhone 一致。)
iOS: 主流機型主要爲 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 這五種。
WP:主流機型主要爲 480x800,720x1280, 768x1280 這三種

Photoshop製圖時,字體大小通常是pt這個單位。pt是長度單位, 1pt = 1/72英寸, px = pt * dpi/72。

另附上豆瓣關於這些單位更具體的闡釋

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章