Android UI design: pixel dip dpi sp density

 

1. px (pixels) pixels-is a pixel, which is the actual pixel unit on the screen.

Dip or dp (device independent pixels) device independent pixels, related to the device screen.

Sp (scaled pixels-best for text size): similar to dp, it mainly deals with the font size.

Dpi (dot per inch): screen pixel density, how many pixels per inch

There is a member with the same name in the android api. The method is as follows:

 
2. dpi indicates the pixel density of the screen. That is, the number of pixels on the 1 inch.


 
3. sp is mainly used for font display because it is a magnified pixel.


 
4. dp is not related to density. sp is not only related to density, but also to scale.

If the screen density is 160, dp and sp are the same as px. 1dp = 1sp = 1px

 

However, if px is used as the unit, if the screen size remains unchanged (assumed to be 3.2), the screen density is changed to 320.

 

The original TextView width is set to 320 PX, And the 3.2-inch screen with a density of 160 is half shorter than the 3.2-inch screen with a density.

 

However, if it is set to 160dp or 160sp, the system will automatically set the width attribute value to 320px.

 

That is, 160*320/160. Among them, 320/160 can be called the density proportion factor.

 
 
5. pixel and dip Calculation formula: pixel value = (dpi/160) * dip Value

* Convert the cell phone resolution from dp to px (pixel)
*/
Public static int dip2px (Context context, float dpValue ){
Final float scale = context. getResources (). getDisplayMetrics (). density;
Return (int) (dpValue * scale + 0.5f );
}

/**
* Convert pixel to dp based on the resolution of the mobile phone
*/
Public static int px2dip (Context context, float pxValue ){
Final float scale = context. getResources (). getDisplayMetrics (). density;
Return (int) (pxValue/scale + 0.5f );

 

6. pixel density and resolution are two different concepts

The resolution is the total pixel, and the pixel density is the pixel per unit length.

HVGA screen density = 160; QVGA screen density = 120; WVGA screen density = 240; WQVGA screen density = 120
 
VGA: Video Graphics Array, that is, display the drawing matrix, equivalent to 640 × 480
 
HVGA: Half-size VGA; that is, Half of VGA, resolution: 480 × 320;
 
QVGA: Quarter VGA; that is, 1/4 of VGA, resolution: 320 × 240;
 
WVGA: Wide Video Graphics Array; that is, expanded VGA with a resolution of 800x480 pixels;
 

WQVGA: Wide Quarter VGA;

 

That is: Expanded QVGA, resolution is higher than QVGA, lower than VGA, generally: 400 × 240,480 × 272