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

基本定義

PPI(Pixels per inch):每英寸所擁有的像素?cái)?shù),即像素密度。
DPI(dots per inch):即每英寸上,所能印刷的網(wǎng)點(diǎn)數(shù),一般稱為像素密度。ppi計(jì)算公式:ppi = 屏幕對(duì)角線像素?cái)?shù)/屏幕對(duì)角線英寸數(shù),通過勾股定理計(jì)算屏幕對(duì)角線像素?cái)?shù)。
Screen Size(屏幕尺寸):手機(jī)屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是對(duì)角線的長(zhǎng)度。
DIP(device independent pixel):即dip/dp,設(shè)備獨(dú)立像素。 1px = 1dpdensity(由dpi決定)
Resolution(分辨率):指手機(jī)屏幕垂直和水平方向上的像素個(gè)數(shù)。eg分辨率480
800,指該設(shè)備垂直方向有800個(gè)像素點(diǎn),水平方向有480個(gè)像素點(diǎn)。
px(Pixel像素):相同像素的ui,在不同分辨率的設(shè)備上效果不同。在小分辨率設(shè)備上會(huì)放大導(dǎo)致失真,大分辨率上被縮小。

ppi計(jì)算公式.png

安卓常見DPI

Android Design里把主流設(shè)備的 dpi 歸成了四個(gè)檔次:120 dpi、160 dpi、240 dpi、320 dpi,具體見如下表格。
實(shí)際開發(fā)當(dāng)中,我們經(jīng)常需要對(duì)這幾個(gè)尺寸進(jìn)行相互轉(zhuǎn)換(比如先在某個(gè)分辨率下完成設(shè)計(jì),然后縮放到其他尺寸微調(diào)后輸出),一般按照 dpi 之間的比例即 2:1.5:1:0.75 來給界面中的元素來進(jìn)行尺寸定義。
也就是說如果以 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ù)雜了。同時(shí)第一款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的官方說明

谷歌官方對(duì)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.

簡(jiǎn)單來說,以160dpi的設(shè)備為準(zhǔn),該設(shè)備上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2個(gè)像素)。在app開發(fā)時(shí),最好用dp來做界面的布局,以保證適配不同屏幕密度的手機(jī)。

dp和px的換算公式:

px = dp * (dpi / 160)

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

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

/** * 根據(jù)手機(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ù)手機(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)于多少個(gè)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è)計(jì)

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

image.png

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

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

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

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

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

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

某些場(chǎng)景需要用到小圖標(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)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容