Note: The purpose of this article is to clarify some of the size relationships. If there are any misrepresentations, please point out and discuss them

In this paper, the aspect pixel ratio of the test screen is 1, and the weird screen can be analyzed by itself according to the proportion

1. Common knowledge of Popular Science

0. Test preparation

There are two real machines in hand: oppoA77(1920*1080 5.5 inches), oppo 15x (2340*1080 6.4 inches),

Add an emulator (480*320 3.5 inches) to copy OPPO R801 Auxiliary: a laptop Lenovo Y480N(768*1366 14 inches) and an iPad_Air_2(2048*1536 9.7 inches)

1. Calculate the problem in terms of pixels (by contradiction) :

If, let me say if a pixel represents n physical millimeters, when n is equal to 1

OPPO R801(480*320) is equivalent to (4.8*3.2cm). OPPO R801(480*320) is equivalent to (4.8*3.2cm). OPPO R801(480*320) is equivalent to (4.8*3.2cm)

In the same reference frame, playing OPPO 15X and OPPO R801 is the difference between playing a book and playing an eraser

Obviously I didn’t have that experience, but it just means that for two different phones, their n values are different and that means two phones: the number of pixels in a physical millimeter is different

2. The phone inch concept

Inches is a measure of the true size of a phone's screen

When we buy a phone, what we care about is how many inches it is, and then we know how to look at the resolution, what does that inch mean? 1 inch = 2.54 cm: roughly the same diameter as a dollar coin. Take six coins and compare them diagonally

Since the resolution determines the aspect ratio, it is not difficult to calculate the physical width and height of OPPO 15x and OPPO R801

\ Wide px. High px. The diagonal in The diagonal cm Physical cm wide Physical cm high
oppoR15X 1080px 2340px 6.4 in 16.256 cm 6.81 cm 14.76 cm
OPPO R801 320px 480px 3.5 in 8.89 cm 4.93 cm 7.40 cm
3. Encapsulation of screen properties

With so many properties, one by one is a bit tiring, and the calculator doesn’t burn well. Let’s encapsulate screeninfo.java

/** * Author: Zhang Feng Jiete Lie <br/> * Time: 2018/12/1 0001:8:01<br/> * Email: [email protected]<br/> * Description: */ public class ScreenInfo {public static final float INCH_TO_MM = 25.399999961392f; Public String name; Public float inchC; Public int pxW; Public int pxH; Public int pxC; Public float ppi; public float dpi; public float relW; Public float relH; Public float relC; Public ScreenInfo() {} public ScreenInfo(String name, float inchC, int pxH, int pxW) {this.name = name; this.inchC = inchC; this.pxW = pxW; this.pxH = pxH; pxC(); ppi(); dpi(); relC(); relW(); relH(); } private int pxC() { pxC = (int) Math.sqrt(pxH * pxH + pxW * pxW); return pxC; } private float ppi() { ppi = pxC() / inchC; return ppi; } private float dpi() { dpi = pxC() / inchC; return dpi; } private float relW() { relW = relC * (pxW * 1.f / pxC()); return relW; } private float relH() { relH = relC * (pxH * 1.f / pxC()); return relH; } private float relC() { relC = inchC * INCH_TO_MM; return relC; } @override public String toString() {return "ScreenInfo{" + "\nname= "" + name + "\" + "\n, screen size/in =" + inchC + "\n, Horizontal screen pixels = "+ pxW +" \ n, vertical screen pixels = "+ pxH +" \ n, diagonal screen pixels = "+ pxC +" \ n, ppi = "+ ppi +" \ n, dpi = "+ + dpi \ n", Screen diagonal physical size /mm=" + relC + "\n, screen horizontal physical size /mm=" + relW + "\n, screen vertical physical size /mm=" + relH + '}'; }}Copy the code

Ok, I know people don’t like to look at data, so I made a custom View and drew a diagram using ScreenInfo information, which felt good

Three lines of code can draw a mobile phone information map, it is not very difficult, interested can see the source code, or their own painting I was in accordance with the physical size of the painting, so in reality their relative screen size is like this!

If you want to play, other screens are available: just know the resolution and how many inches

4. The density:
What is density? ---- Closeness? When I was in school, I probably heard about linear density, surface density and body density, or population density. For example, the population density of a city: The area of Hefei is 11445.1 square kilometers, the population is 7.79 million, the population density is 680.6 people/square kilometers, that is, the average population of Hefei is 680.6 people per square kilometerCopy the code
Now think of the screen as land and the pixels as people, and these people are arranged one by one in an orderly way. How many pixels are in the 1mm length of OPPOR15X? It's obvious: 2577px/163mm = 15.809... If you take 15.8, how many pixels can you fit in a square millimeter? 15.8*15.8 = 249.64 /mm^2 about 250 /mm^2 so how many pixels in the 1mm length row of OPPOR801, obvious: 576px/163mm = 6.471... Let's take an integer of 6.5 how many pixels can fit in a square millimeter? 6.5*6.5 = 42.25 /mm^2 about 42 /mm^2 is equivalent to a piece of land of equal size, a piece of 250 people, a piece of 42 people, the magic is both sides of the land occupied so the truth is only one: two pieces of land, one is a small man, one is a giantCopy the code

Now enlarge the physical size of the screen: 1mm

I remember when I was a child, I could see pixels with the naked eye. It is because there are few pixels in 1mm, so a pixel is relatively large

You can’t see pixels on a phone anymore

5. Ppi and dip

Now we have a lot of information. What’s the use of that information?

Ppi (Pixel Per Inch) is the number of pixels Per Inch.
I think we just calculated the number of pixels per millimeter. Can we ask you about the number of pixels per inch? Oppo-a77 ppi: 2202px/5.5in = 400.363... oppo-a77 PPI: 2202px/5.5in = 400.363... Px /in approx. 400.4ppi oppo-r801 ppi: 576px/3.5in = 164.571... Px / 164.6 in ppiCopy the code
A more graphic metaphor for PPI:

A one-yuan coin is about 1 in diameter. Now let the one-yuan coin (including the background) and other sizes be displayed on three phones:

Oppo-r15x requires: 402*402=161604 pixels oppo-A77 requires: 400*400= 160,000 pixels oppo-R15x requires: 402*402=161604 pixels 164*164=26896 pixel points we know that pixels constitute the displayed picture, that is to say, the same picture is composed of 161604 points and 26896 points, so the effect of 26896 is naturally much worse than that of 161604. 161604 is more compact, so the visual sense is better

To analyze laptops:

Ppi = 1567/14 = 111.928… That is, there are 112 points in 1 in, and 1 in = 25.4mm

That means the size of a pixel is 25.4/112 = 0.226mm, and the visual length of the human eye is 0.1mm, so if you look up close you can see the particles

Dpi (Dot Per Inch) is the number of points Per Inch.
What is dPI? What is counting? -- DPI is called printing precision printers that spray [color liquid ink] through the nozzle into tiny particles onto the printing paper. One particle represents 1 dot. Dpi means ink drops per inch. For example, 300 dPI means 300 ink drops per inch. It can be imagined that when printing photoshop product renderings, the dpi of the picture should be adjusted to more than 300, because large posters require detailed pixel expression. Ordinary web pictures only require 72dpi, because they are only displayed on the screenCopy the code
Ppi and DPI on Android
Android is not a printer, so DPI is the same as PPI, which is the number of pixels that correspond to a 1-inch length. Maybe Google prefers to use 'dot' for screen pixels, so they use DPI instead of PPICopy the code

Who moved the size of my picture?

1. I250 * 200 imagesWhy is it drawn to the wrong size? —-Q1

Image: 250*200,300dpi,res\mipmap-xhdpi\wy_250px_200px_300dpi.jpg

Experimental images: 250*200,72dpi,res\mipmap-xhdpi\wy_250px_200px_72dpi.jpg

This is a tricky one, I expected 250px pictures to be huge on a mobile phone

Why wasn’t it what I expected? And the custom image DPI is ignored? —-Q2

2. I copied the image into drawable with full doubt

Image: 250*200,72dpi,res\ able\wy_250px_200px_72dpi.jpg

Image: 250*200,300dpi,res\drawable\wy_250px_200px_300dpi.jpg

Oppo-r15x images are scaled up to metric. Density, 3, and 1, respectively

Why is it so hard to display 250*200? —-Q3

3. With doubt, put the pictures in each mipMap folder

The test results are as follows and a simple diagram of the variation in height is drawn

It can be seen that: 1. Oppo-r15x shows the original image when XXH, oppo-R801 shows the original image 2 when m. In each case, the height of OPpo-R15x is always three times that of Oppo-R801. Oppo-r15x's own DPI (PPI) is 402, which is circled in the field of XXH. Oppo-r801's own DPI (PPI) is 164, which is circled in the field of M. The dPI corresponding to XXH /m is 3Copy the code

Q3: Who moved my image size? - Mipmap's different folders, Android will treat Q2 differently: and the custom image DPI is ignored? ---- the dPI of the picture itself has no effect on the display of the screen device, only on the impact of printing Q3: Brother want to show 250*200 why so difficult? - difficult! But it's not necessary, you have to think, put a picture in all mipMap folders and all phones will say 250*200, but it's none of my business if someone hits you...Copy the code
4. What happens when I get pictures that are not in mipMap?

That’s a good question. Let’s do some code testing

As expected, the image read from the file does not go mipmap, so the original pixels are displayed

Bottom line: MiPMap scales images on different densities of devices based on their folder location.

Warp_content only when retrieving images or using them

Look at the sizes

1. The dp:

I’m sure you’ve all done this before

protected float dp(float dp) {
    return TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}
Copy the code

Let’s see what it does: applyDimension

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 * metric.xdpi * (1.0f/72); case COMPLEX_UNIT_IN: return value * metrics.xdpi; Case COMPLEX_UNIT_MM: return value * metric.xdpi * (1.0f/25.4f); } return 0; }Copy the code

Code tracking:
--> getResources().getDisplayMetrics() -->[android.content.res.Resources#getDisplayMetrics] public DisplayMetrics getDisplayMetrics() { return mResourcesImpl.getDisplayMetrics(); } -->[android.content.res.ResourcesImpl#getDisplayMetrics] DisplayMetrics getDisplayMetrics() { if (DEBUG_CONFIG) Slog.v(TAG, "Returning DisplayMetrics: " + mMetrics.widthPixels + "x" + mMetrics.heightPixels + " " + mMetrics.density); return mMetrics; } - > [now depends on: mMetrics. Density is assignment] the if (mConfiguration densityDpi! = Configuration.DENSITY_DPI_UNDEFINED) { mMetrics.densityDpi = mConfiguration.densityDpi; mMetrics.density = mConfiguration.densityDpi * DisplayMetrics.DENSITY_DEFAULT_SCALE; } to search: mConfiguration. DensityDpi = DisplayMetrics. DENSITY_DEVICE;Copy the code

Our supposed panacea DP simply took the Displaymetrics.density_device and multiplied it by 0.00625(divided by 160).

In addition, the Displaymetrics. DENSITY_DEVICE is not the true DPI (PPI) of the screen. Both 400 and 402 are considered as 480, so the calculation method of DP is also an approximate value to meet the needs of the public. Although it has certain effect, it is not perfect.

Is there really a perfect fit?

Unless you can get a 100 by 180 piece of paper to fit exactly into a 100 by 200 box without any distortion

Or have all the Android phone manufacturers produce the same percentage of phones, otherwise it will be flawed, you can’t have it both ways, but there is a normal (albeit imperfect) life in between.

I have ever wondered why the mobile phone is not round, if it is round, it does not need to be adapted. If the proportion is always the same, it may take up more space in my pocket, or watching movies, the usable area will be less... It feels so badCopy the code
Text unit: SP
-->[android.util.TypedValue#applyDimension] case COMPLEX_UNIT_SP: return value * metrics.scaledDensity; -->[android.content.res.ResourcesImpl#updateConfiguration] mMetrics.scaledDensity = mMetrics.density * (mConfiguration.fontScale ! = 0? MConfiguration. FontScale: 1.0 f); // Now move the focus to: McOnfiguration. fontScale! = 0 // If false, the value is the same as mMetrics. Density, otherwise McOnfiguration. fontScaleCopy the code

The configuration. FontScale is changed according to the system size, which defaults to 1, so it is not affected if dp and SP are mixed. However, once the user changes the system font, there is a certain amount of zoom, dp is sp, so stick to sp font, don’t look for trouble.

About the adapter

Personally, I feel that as long as multiple controls are related to the size dependency, that is, the constraint layout

Although DP is not a panacea, but also can cure and save people, so medicine can not stop, DP match_parent can not be a good thing, we should know how to use reasonable attention to the left side and the lower side, try to use the father to restrain, or run out…… But avoid as far as possible to avoid the use of very large DP (200+), the relative position between the controls can be too large DP constraints, because the larger the value of the difference between different phones more obvious.

Postscript: Jie wen standard

1. Growth record and Errata of this paper
Program source code The date of note
V0.1 – making The 2018-12-4 Sort out all that screen size stuff
2. More about me
Pen name QQ WeChat hobby
Zhang Feng Jie te Li 1981462002 zdl1994328 language
My lot My Jane books I’m the nuggets Personal website
3. The statement

1—- This article is originally written by Zhang Fengjie, please note if reproduced

2—- welcome the majority of programming enthusiasts to communicate with each other 3—- personal ability is limited, if there is something wrong welcome to criticize and testify, must be humble to correct 4—- see here, I thank you here for your love and support