Overview of dp, px, and sp concepts in Android

Overview of dp, px, and sp concepts in Android

Today, I started my App development again. Because I have been working on sdks, there are very few UI interfaces involved. When I started my Android Application, I didn't perform dp, px, sp and other concepts have a deep understanding, only know the conversion between them, and write a conversion tool class. It has been more than a year since I started Android. Now I have started App development again. I decided that I didn't have to come across a concept and I had to get it through. Let's go to the topic:

First, let's take a look at their basic concepts:

Px: The pixel of the screen.
Dp: an abstract unit based on density. If a screen of DPI is displayed, 1dp = 1px.
Dip: equivalent to dp
Sp: similar to dp, but scaled based on the user's font size preferences (sp is recommended as the unit of text, and dip is used for others)

Through the above knowledge, we can see that only the relationship between px and dp can be understood here. Next we will focus on the relationship between them:

The following is an overview of the relationship between dip and px:

1). px (pixels) pixels:

A pixel is usually regarded as the minimum Complete sampling of the image. This is usually used, especially for web development. The page basically uses pixels as the unit.

2). dip or dp (device independent pixels ):

Device Independent pixels-this is related to device hardware. Generally, to support multiple resolutions on mobile phones, such as WVGA and HVGA

And QVGA both use dip as the unit of length

Next, let's take a look at the relationship between the cell phone screen type, density, and resolution.

QVGA screen density = 120 QVGA (240*320)
HVGA screen density = 160 HVGA (320*480)
WVGA screen density = 240 WVGA (480*800)
WQVGA screen density = 120 WQVGA (240*400)

Note: The density value indicates the number of display points per inch, and the resolution is two concepts.

The screen resolution information varies with the density. Take the WVGA (density = 240) of Dip * 800dip as an example.

1. When density = 120

Conversion: conversion coefficient = 120/240

The actual screen resolution is 240px * 400px (two points correspond to one resolution)

The height of the status bar is 19px or 25dip.

The screen width is 400px or 800dip, and the working area height is 211px or 480dip.

Screen width: Px or dip, working area Height: 381px or 775dip

2. When density = 160

Conversion: conversion coefficient = 160/240

The actual screen resolution is 320px * 533px (three points correspond to two resolutions)

The height of the status bar is 25px or 25dip.

The screen width is 533px or 800dip, and the working area height is 295px or 480dip.

Screen width: 320px or 480dip, working area Height: 508px or 775dip

3. When density = 240

Conversion: conversion coefficient = 240/240

The actual screen resolution is 480px * 800px (one point for one resolution)

The height of the status bar and title bar is 38px or 25dip.

The screen width is PX or dip, and the working area height is PX or dip.

Screen width 480px or 480dip, working area height 762px or 775dip

We usually define multiple Adaptation Resource folders (values-XXX, drawable-XXX, etc.) in the project)

Drawable-ldpi: A mobile phone device with a screen density of 120

Drawable-mdpi: A mobile phone device with a screen density of 160 (this is baseline, others are based on this, on this device, 1dp = 1px)

Drawable-hdpi: A mobile phone device with a screen density of 240

Drawable-xhdpi: A mobile phone device with a screen density of 320

Drawable-xxhdpi: A mobile phone device with a screen density of 480

(The same is true for values. Of course, the effects of values and values-hdpi are the same. The effects of drawable and drawable-hdpi are the same, therefore, we usually store the same values in these two folders. If both of them have the same value, the adaptation is better)

In the apk Resource Package

Resources that use the hdpi label when the screen density is 240

Resources that use the mdpi label when the screen density is 160

Ldpi tag resources when screen density = 120

Resources that use the xhdpi label when the screen density is 320

Resources that use the xxhdpi label when the screen density is 480

Resources without any tags are shared at various resolutions.

Therefore, the Unit dip should be used as much as possible during layout, with less px

Formula for converting dp to px:
Pixs = dips * (densityDpi/160 ).
Dips = (pixs * 160)/densityDpi

However, when converting the code, we also need an offset value: 0.5f.

Private static final float scale = mContext. getResources (). getDisplayMetrics (). density; private static final float scaledDensity = mContext. mContext. getResources (). getDisplayMetrics (). scaledDensity;/*** convert dp to px * @ param dipValue * @ return */public static int dip2px (float dipValue) {return (int) (dipValue * scale + 0.5f );} /*** convert px to dp * @ param pxValue * @ return */public static int px2dip (float pxValue) {return (int) (pxValue/scale + 0.5f );} /*** convert sp to px * @ param spValue * @ param type * @ return */public static float sp2px (float spValue, int type) {switch (type) {case CHINESE: return spValue * scaledDensity; case NUMBER_OR_CHARACTER: return spValue * scaledDensity * 10.0f/18366f; default: return spValue * scaledDensity ;}}

We can see that scale is the global variable defined in DisplayMetrics. In fact, this value is the current mobile phone's density/160, scaleDensity is used to convert between px and sp and scale. Another point is that there will be an offset value for conversion here.

This unit of dp may be unfamiliar to web developers, because px (pixels) is generally used)
However, after the android app and game are started, it is basically converted to the unit of dp, because it can support mobile phones with multiple resolutions.

We have seen the relationship and transformation between px and dp. Let's take a look at the application scenarios, that is why we use the conversion between them, we generally define the size in xml in the unit of dp, but sometimes we need to set some spacing and location in the Code:

The following code

android.view.ViewGroup.LayoutParams.heightandroid.view.ViewGroup.LayoutParams.width

The above two attributes are measured in pixels. However, to be compatible with mobile phones with multiple resolutions, we need to use dip. In this case, we can call the following code for conversion.

int heightPx= DisplayUtil.dip2px(this, 33);mTabHost.getTabWidget().getChildAt(i).getLayoutParams().height = heightPx;

Of course, we sometimes get the values in the demen. xml file in the values folder in the Code. The Code is as follows:

Float height = this. getResources (). getDimension (R. dimen. height); txt. height = px2dip (int) height); // convert height to px

I don't know if he gets dimens. the dp value defined in the xml file, so the conversion operation is also performed manually here, but the display effect is different from our expectation, and then the value is printed for a moment, it is double, that is, the value obtained through the getDimension method is dimen. the values defined in the xml file are twice that. This is not scientific. Then I searched and found three similar methods,

GetDimension

GetDimensionPixelOffset

GetDimensionPixelSize

Their functions are different:

Let's look at their differences through an example:

Dimen. xml:

 
  16dp
   
 
  16px
   
 
  16sp
  

Code:

float a1=getResources().getDimension(R.dimen.activity_vertical_margin1);  int a2=getResources().getDimensionPixelOffset(R.dimen.activity_vertical_margin1);  int a3=getResources().getDimensionPixelSize(R.dimen.activity_vertical_margin1);  float b1=getResources().getDimension(R.dimen.activity_vertical_margin2);  int b2=getResources().getDimensionPixelOffset(R.dimen.activity_vertical_margin2);  int b3=getResources().getDimensionPixelSize(R.dimen.activity_vertical_margin3);  float c1=getResources().getDimension(R.dimen.activity_vertical_margin3);  int c2=getResources().getDimensionPixelOffset(R.dimen.activity_vertical_margin3);  int c3=getResources().getDimensionPixelSize(R.dimen.activity_vertical_margin3);  Log.i("test", "getDimension= "+a1+", getDimensionPixelOffset="+a2+",getDimensionPixelSize="+a3);  Log.i("test", "getDimension= "+b1+", getDimensionPixelOffset="+b2+",getDimensionPixelSize="+b3);  Log.i("test", "getDimension= "+c1+", getDimensionPixelOffset="+c2+",getDimensionPixelSize="+c3);   

For device 1 (1280*720,160 dpi, density = 1.0 ):

Print result:

For device 2 (480*800,240 dpi, density = 1.5 ):

Print result: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD48cD48aW1nIHNyYz0 = "http://www.2cto.com/uploadfile/Collfiles/20141028/2014102809110571.png" alt = ""/>

It can be seen that the functions of getDimension and getDimensionPixelOffset are similar. They both obtain the value of a dimen. If the unit is dp or sp, multiply it by density. If the unit is px, do not multiply; the difference between the two functions is that one returns float and the other returns int.
GetDimensionPixelSize is multiplied by denstiy regardless of whether it is written as dp, sp, or px.

Therefore, we do not need to convert the value obtained using the getDimension method ~~

Summary: The dp and px related knowledge is introduced here. This is very confusing and will be encountered during the interview and written examination. Therefore, it is better to clarify these concepts ~~

(PS: Actually, I still don't remember it ~~)