android app界面設(shè)計規(guī)范(dpi,dp,px等)

基本定義

PPI(Pixels per inch):每英寸所擁有的像素數(shù),即像素密度钠绍。
DPI(dots per inch):即每英寸上舆声,所能印刷的網(wǎng)點數(shù)花沉,一般稱為像素密度柳爽。ppi計算公式:ppi = 屏幕對角線像素數(shù)/屏幕對角線英寸數(shù),通過勾股定理計算屏幕對角線像素數(shù)碱屁。
Screen Size(屏幕尺寸):手機屏幕尺寸大小磷脯,如3英寸、4英寸娩脾、4.3英寸赵誓、5.7英寸,指的是對角線的長度柿赊。
DIP(device independent pixel):即dip/dp俩功,設(shè)備獨立像素。 1px = 1dpdensity(由dpi決定)
Resolution(分辨率):指手機屏幕垂直和水平方向上的像素個數(shù)碰声。eg分辨率480
800诡蜓,指該設(shè)備垂直方向有800個像素點,水平方向有480個像素點胰挑。
px(Pixel像素):相同像素的ui蔓罚,在不同分辨率的設(shè)備上效果不同椿肩。在小分辨率設(shè)備上會放大導(dǎo)致失真,大分辨率上被縮小豺谈。

ppi計算公式.png

安卓常見DPI

Android Design里把主流設(shè)備的 dpi 歸成了四個檔次:120 dpi郑象、160 dpi、240 dpi茬末、320 dpi厂榛,具體見如下表格。
實際開發(fā)當(dāng)中团南,我們經(jīng)常需要對這幾個尺寸進行相互轉(zhuǎn)換(比如先在某個分辨率下完成設(shè)計噪沙,然后縮放到其他尺寸微調(diào)后輸出),一般按照 dpi 之間的比例即 2:1.5:1:0.75 來給界面中的元素來進行尺寸定義吐根。
也就是說如果以 160 dpi 作為基準(zhǔn)的話正歼,只要尺寸的 DP 是 4 的公倍數(shù),XHDPI 下乘以 2,HDPI 下乘以 1.5须鼎,LDPI 下乘以 0.75 即可滿足所有尺寸下都是整數(shù) pixel 类茂。但假設(shè)以 240 dpi 作為標(biāo)準(zhǔn),那需要 DP 是 3 的公倍數(shù)萄唇,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 术幔,LDPI 下除以 2另萤。而以 LDPI 和 XHDPI 為基準(zhǔn)就更復(fù)雜了。同時第一款A(yù)ndroid設(shè)備(HTC的T-Mobile G1)是屬于160dpi的诅挑。鑒于以上各種原因四敞,標(biāo)準(zhǔn)dpi=160

dpi density 分辨率
ldpi 120dpi 0.75 240*320px
mdpi 160dpi 1 320*480px
hdpi 240dpi 1.5 480*800px
xhdpi 320dpi 2 720*1280px
xxhdpi 480dpi 3 1080*1920px

dp的官方說明

谷歌官方對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.

簡單來說,以160dpi的設(shè)備為準(zhǔn)拔妥,該設(shè)備上1dp = 1px忿危;如果屏幕密度大,1dip代表的px就多没龙,比如在320dpi的屏幕上铺厨,1dip=2px(即1dp代表2個像素)。在app開發(fā)時硬纤,最好用dp來做界面的布局解滓,以保證適配不同屏幕密度的手機。

dp和px的換算公式:

px = dp * (dpi / 160)

我的理解筝家,該公式表示px的數(shù)值等于dp的數(shù)值*(設(shè)備dpi/160)
注意洼裤,px、dp是單位肛鹏,但density沒單位逸邦。

dp與px的換算代碼實現(xiàn)

/** * 根據(jù)手機的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素) */ 
public static int dip2px(Context context, float dpValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (dpValue * scale + 0.5f*(dip>=0?1:-1));); 
} 
/** * 根據(jù)手機的分辨率從 px(像素) 的單位 轉(zhuǎn)成為 dp */ 
public static int px2dip(Context context, float pxValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
   return (int) (pxValue / scale + 0.5f*(dip>=0?1:-1));); 
} 

//dp轉(zhuǎn)px恩沛。第二種方案,根據(jù)源碼與第一種方案差+-0.5f缕减,不明緣由
public static int dip2px(Context context, float dpVal) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
}

//sp轉(zhuǎn)px
public static int sp2px(Context context, float spVal) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                spVal, context.getResources().getDisplayMetrics());
}

getResources().getDisplayMetrics().densityDpi 就是屏幕密度雷客。
getResources().getDisplayMetrics().density 也可以理解為1dip相當(dāng)于多少個px啦。

applyDimension的源碼如下桥狡,可參考:

   /**
     * Converts an unpacked complex data value holding a dimension to its final floating 
     * point value. The two parameters <var>unit</var> and <var>value</var>
     * are as in {@link #TYPE_DIMENSION}.
     *  
     * @param unit The unit to convert from.
     * @param value The value to apply the unit to.
     * @param metrics Current display metrics to use in the conversion -- 
     *                supplies display density and scaling information.
     * 
     * @return The complex floating point value multiplied by the appropriate 
     * metrics depending on its unit. 
     */
    public static float applyDimension(int unit, float value,
                                       DisplayMetrics metrics)
    {
        switch (unit) {
        case COMPLEX_UNIT_PX:
            return value;
        case COMPLEX_UNIT_DIP:
            return value * metrics.density;
        case COMPLEX_UNIT_SP:
            return value * metrics.scaledDensity;
        case COMPLEX_UNIT_PT:
            return value * metrics.xdpi * (1.0f/72);
        case COMPLEX_UNIT_IN:
            return value * metrics.xdpi;
        case COMPLEX_UNIT_MM:
            return value * metrics.xdpi * (1.0f/25.4f);
        }
        return 0;
    }

安卓app圖標(biāo)設(shè)計

android的尺寸眾多搅裙,建議使用分辨率為720x1280 的尺寸設(shè)計。這個尺寸 720x1280中顯示完美裹芝,在 1080x1920 中看起來也比較清晰部逮;切圖后的圖片文件大小也適中,應(yīng)用的內(nèi)存消耗也不會過高嫂易。

image.png

app啟動圖標(biāo)為48*48dp兄朋,對應(yīng)各dpi設(shè)備,圖像資源像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|4848px|7272px|9496px|144px144px|

操作欄圖標(biāo)為32*32dp怜械,對應(yīng)各dpi設(shè)備颅和,圖像資源像素如下:其中圖形區(qū)域尺寸是24*24dp,可參考平時ui切圖會有部分留白缕允。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|3232px|4848px|6464px|96px96px|

通知欄圖標(biāo)為24*24dp峡扩,對應(yīng)各dpi設(shè)備,圖標(biāo)像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|2424px|3636px|4848px|72px72px|

某些場景需要用到小圖標(biāo)障本,大小應(yīng)當(dāng)是16*16dp教届,其中圖形區(qū)域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|1616px|2424px|3232px|48px48px|

常用圖標(biāo)像素轉(zhuǎn)換表.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末驾霜,一起剝皮案震驚了整個濱河市案训,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌寄悯,老刑警劉巖萤衰,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件堕义,死亡現(xiàn)場離奇詭異猜旬,居然都是意外死亡,警方通過查閱死者的電腦和手機倦卖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進店門洒擦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人怕膛,你說我怎么就攤上這事熟嫩。” “怎么了褐捻?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵掸茅,是天一觀的道長椅邓。 經(jīng)常有香客問我,道長昧狮,這世上最難降的妖魔是什么景馁? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮逗鸣,結(jié)果婚禮上合住,老公的妹妹穿的比我還像新娘。我一直安慰自己撒璧,他們只是感情好透葛,可當(dāng)我...
    茶點故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著卿樱,像睡著了一般僚害。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上繁调,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天贡珊,我揣著相機與錄音,去河邊找鬼涉馁。 笑死门岔,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的烤送。 我是一名探鬼主播寒随,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼帮坚!你這毒婦竟也來了妻往?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤试和,失蹤者是張志新(化名)和其女友劉穎讯泣,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體阅悍,經(jīng)...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡好渠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了节视。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拳锚。...
    茶點故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖寻行,靈堂內(nèi)的尸體忽然破棺而出霍掺,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布杆烁,位于F島的核電站牙丽,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏兔魂。R本人自食惡果不足惜剩岳,卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望入热。 院中可真熱鬧拍棕,春花似錦、人聲如沸勺良。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尚困。三九已至蠢箩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間事甜,已是汗流浹背谬泌。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留逻谦,地道東北人掌实。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像邦马,于是被迫代替她去往敵國和親贱鼻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,573評論 2 353

推薦閱讀更多精彩內(nèi)容