一直困擾設計師多年的Android 單位 dp

2021-02-14 UI頭條


本文作者：songivan

內容編輯/排版：UI君 肚臍美少年

導語：

輕鬆理解Android開發單位DP ,讓設計與開發高度匹配，整合了網上各大資料匯總一個通俗易懂的。

一直困擾設計師多年的Android 單位 dp

設計這麼多年了，相信很多設計師，一直被DP搞得暈頭轉向的，因為我們設計常用單位是PX ，設計的時候我們用這個單位，但是開發人員則用dp,如何保證設計的產品效果圖，文字能讓開發人員，準確還原，這裡我們就不得不提sp。


Android 為什麼引入dp?

是因為這個世界上存在著很多不同屏幕密度的手機，屏幕密度是什麼？就是ppi，就是單位長度裡的像素數量。

想像一下，如果這些手機的尺寸一樣，屏幕密度相差很大，那麼是不是說一個手機水平方向上像素很少，另一個手機水平方向上像素很多？那我們畫同樣pix數量的時候，它顯示的長度不就會不一樣了？

比如下圖中的兩個手機，同時設置2px長度的Button，在屏幕密度較高的手機裡就會顯示的比較小。

而同時設置的2dp長度的Button，在兩個手機上顯示的大小是一樣的。

Android常用單位：

1.屏幕尺寸in（英寸）:指實際的物理尺寸，為屏幕對角線的測量。一般講的大小單位都是英寸,比如iPhone5S的屏幕尺寸是4英寸。


2.像素(pixel):屏幕上的點，基本原色素及其灰度的基本編碼。

3.解析度(Resolution)：是指屏幕上垂直方向和水平方向上的像素個數。(比如iPhone5S的解析度是1136*640)

4.dpi（dot per inch）：就是每英寸的像素數，也叫做屏幕密度。這個值越大，屏幕就越清晰。

5. dp=dip : device independent pixels(設備獨立像素)：一種基於屏幕密度的抽象單位。在每英寸160點的顯示器上，1dp = 1px。

6. sp：Scale-independent pixels：它是安卓的字體單位，以160PPI屏幕為標準，當字體大小為 100%時，1sp=1px。

對ppi 的理解:

ppi= Pixels per inch，每英寸上的像素數數目,即「像素密度」

屏幕尺寸in（英寸）:指實際的物理尺寸，為屏幕對角線的測量。

而ppi的運算方式是：

PPI = √（長度像素數² + 寬度像素數²） / 屏幕對角線英寸數

舉個簡單的列子，iphone5的ppi是多少？

ppi=√（1136px²+ 640px²）/4 in=326ppi（視網膜Retina屏）

為解決Android設備碎片化，引入一個概念dp，一種基於屏幕密度的抽象單位。

Android把屏幕密度分為了四個廣義的大小：

低(120ppi)、中(160ppi)、高(240ppi)和超高(320ppi)

dp是(設備獨立像素)不同設備有不同的顯示效果,這個和設備硬體有關是虛擬像素，在不同的像素密度的設備上會自動適配。

在每英寸160ppi的顯示器上，1dp= 1px。

關於dp與px 單位換算:

dp=dip:device independent pixels(設備獨立像素)不同設備有不同的顯示效果,這個和設備硬體有關，一般我們為了支持WVGA、HVGA和QVGA推薦使用這個，不依賴像素。

dp是一種與密度無關的像素單位，在每英寸160點的屏幕上，1dp=1px

dp和px的換算公式 ：dp*ppi/160 =px

比如，在一個240ppi的屏幕裡,比如1dp x 240/160 = 2px。

即 1dp=1.5px，

mdpi(160ppi) 1dp = 1px ; hdpi (240ppi)1dp=1.5px;

Xhdpi(320ppi )1dp=2px; xxhdpi(480ppi )1dp=3px;

對於設計人員而已，我們要把dp轉化為px, 只是需要利用公式：

px=dp*ppi/160


mdpi: 1.0 (baseline) 1dp=px

hdpi: 1.5 1dp=1.5px

xhdpi: 2.0 1dp=2px

xxhdpi3.0 1dp=3px

把dp 轉化為px 公式為：

dp乘以每個密度下面的係數比值

常見手機解析度:


4:3

VGA 640*180(video graphics array)

QVGA 320*240(Quarter VGA)

HVGA 480*320(half-size VGA)

SVGA 800*600(Supper VGA)

5:3

WVGA 800*480(WideVGA)

16:9

FWVGA 854*480(full wide VGA)

HD 1920*1080(high definition)

QHD 960*540

720p 1280*720 標清

1080P 1920*1080 超清

Android 字體單位:


sp：Scale-independentpixels，它是安卓的字體單位，以160PPI屏幕為標準，當字體大小為 100%時，1sp=1px。

Android系統允許用戶自定義文字尺寸大小（小、正常、大、超大等等），當文字尺寸是「正常」時1sp=1dp=0.00625英寸，而當文字尺寸是「大」或「超大」時，1sp>1dp=0.00625英寸。

類似我們在windows裡調整字體尺寸以後的效果——窗口大小不變，只有文字大小改變。

默認系統字體

英文：Roboto；

中文：DroidSans Fallback

與微軟雅黑很像。

Android L 常用字體邊距規格對照表:

AndroidL 常用字體邊距規格對照表:參考資料：

參考資料：

http://www.cnblogs.com/greatverve/archive/2011/12/28/android-dip-dp-sp-pt-px.html

http://zhuanlan.zhihu.com/zhezhexiong/19565895

http://www.360doc.com/content/07/0111/10/11821_326037.shtml

End.




帶你落地遊學14天，量身定製的敘事化遊歷體驗，親臨荷蘭設計周，考察歐洲設計最前沿趨勢。

了解詳情和報名請登錄：http://youxue.ui.cn

或點擊「閱讀原文」

↓↓↓↓↓

相關焦點

  • Android APP Banner ,用這一個就夠了
    compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.0'}自定義屬性屬性名屬性意義取值open_mz_mode是否開啟魅族模式true 為魅族Banner效果，false 則普通Banner效果canLoop是否輪播true 輪播，false 則為普通ViewPagerindicatorPaddingLeft設置指示器距離左側的距離單位為
  • Android平板多屏幕適配
    (240x320ldpi、320x480mdpi、480x800hdpi等)計算過程：480x800hdpi 的最小寬度是 480hdpi，換算成 dp 就是 480hdpi*0.75=320dp。同理，240x320ldpi 最小寬度是 240ldpi，換算成 dp 單位 240ldpi/0.75=320dp。
  • Android之AppBarLayout實現懸停吸附伸縮效果
    5.setExpandedTitleMarginBottomvoid setExpandedTitleMarginBottom（int margin）以像素為單位設置底部展開的標題邊距。android:layout_height="180dp"><com.facebook.drawee.view.SimpleDraweeView    android:id="@+id/avatar_max"    android:layout_width="match_parent"    android:layout_height="170dp
  • Android Design Support Library之TabLayout
    ><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="72dp" android:layout_height="72dp" android:minWidth="56dp">
  • android之RadioButton自定義圖片
    ><selector xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_checked="false"android:drawable="@mipmap/sex_normal_radio" /><itemandroid:state_checked="true"android
  • Android實現界面切換時的共享動畫效果
    android:padding="8dp"> <ImageView android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:transitionName=
  • Android實現仿淘寶物流追蹤功能
    android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/dot_iv" android:layout_marginEnd="15dp" android:layout_marginStart
  • Android仿摩拜單車側滑菜單
    :orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="48dp"
  • Android 高新技術之SVG矢量動畫機制
    ><vector xmlns:android="http://schemas.android.com/apk/res/android"    android:width="200dp"    android:height="200dp"    android:viewportHeight="100dp"    android:viewportWidth="100dp"></vector
  • Android使用RecyclerViewHeader+ViewFlipper實現淘寶頭條滾動效果
    android:layout_height="68dp" android:background="#FFF6F6F6" android:orientation="horizontal" android:paddingBottom="6dp"
  • Android 兩種方式實現類似水波擴散效果
    ><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="65dp"/>    <solid android:color="@color/colorAccent"/></shape>
  • 厲害了,用Android自定義View實現八大行星繞太陽3D旋轉效果
    :layout_width="100dp" android:layout_height="100dp" android:background="@android:color/darker_gray" android:gravity="center" android:text="2"
  • 幫你搞懂設計中的: px,ppi;dot,dpi;sp,dp;pt
    這是初級設計師經常弄混淆的幾個概念，下面我以「基本概念，易混淆的點，從問題入手，總結」四個方面來聊一聊 Px，ppi；dot，dpi； sp，dp；pt 那些事兒。一、px，ppi；dot，dpi； sp，dp；pt 的基本概念1. px：像素1像素實際上是一個顏色點，所以又稱像素點。大量不同顏色點組成一張圖像，因此圖像的基本單位是像素px（沒有比像素更精細的單位了）。像素主要用來表示圖像大小和顯示器解析度（如1920*1080px）。
  • Android仿全歷史——全沉浸時間軸實現
    前段時間由於夏天的燥熱與自身的懶惰，一直沒有更新博客哈哈哈。今天良心發現，來更一個比較有意思的東西，如題——仿全歷史APP的全沉浸時間軸實現。這張圖呢，就是全歷史App中全古古蹟功能的界面圖。顯然，它通過沉浸狀態欄、透明背景、recyclerView的自定義Item等，實現了一個很優秀的界面效果。
  • Android Material Design系列之Navigation Drawer
    ><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com
  • Android 沉浸式狀態欄攻略 讓你的狀態欄變色吧
    " android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center" android:text
  • Android使用ViewPager + Fragment實現無限滑動效果
    ><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
  • Android帶有粘性頭部的ScrollView
    :id="@+id/stick_scroll_view"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_weight="1">        <LinearLayout            android:id="@
  • android 相對布局 絕對 - CSDN
    絕對布局，例子：<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent
  • kotlin-android-extensions插件也被廢棄了?扶我起來
    比如說這裡有一個布局文件activity_main.xml：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"