Know this before Android screen adaptation

Introduction: very fire screen adaptation scheme before don’t know everyone to try to write into the project, there should be a part of people watching, probably the reason is that there is no to the project of refactoring adaptation problems, on the other hand is the application of some adaptation scheme is not very mature, don’t want to take his project to test. Take the github open source library for example, there are few people to mention issues. Just recently I tried toutiao’s fit and… Ah ~ ~ continue to read

What are ppi and DPI? What does it matter?

Pixels per inch (PPI) refers to the number of physical Pixels per inch. Generally, when you buy a mobile phone, you will see the PPI value of the device in the parameters. The larger THE PPI value, the better the screen display effect. However, PPI is a physical concept and an objective value that will not change, which is completely different from the dPI commonly used in development.

Dots Per Inch dPI (Dots Per Inch) was first used in the printing industry to describe the number of small black Dots Per Inch. Dpi is a unit used in Android development to describe the pixel density of the screen. It is a fixed value written in the system configuration of the phone as it leaves the factory. It is generally fixed, unless you modify the value in the system file after you root the phone. You can use the DisplayMetrics class to get the DPI value during development.

Ppi has nothing to do with DPI. It is nonsense to say that PPI is equal to DPI in some documents, and there is no conversion relationship between them. Some articles say that the value of DPI depends on which DPI ppi is in, and then take the maximum value of this range, which is not based on any evidence. As for the assignment value of DPI, we can not know the mobile phone manufacturer based on what to determine.

Ppi can be calculated by the following formula. Generally speaking, ppi can be seen in the parameters of mobile phones, but this formula is not applicable to calculate DPI.

Dpi cannot be calculated using the formula above. Dpi can be obtained from the densityDpi property of the DisplayMetrics class, as well as other properties related to screen density. In general, the DisplayMetrics class has the following methods:

way1:
//content:Activity,Content,Application. DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); way2:
/ / getSystemService can through the Activity, the Content, Application, etc.
 DisplayMetrics displayMetrics = new DisplayMetrics();
 WindowManager windowManager = (WindowManager)getSystemService(Context.WINDOW_SERVICE);
 windowManager.getDefaultDisplay().getMetrics(displayMetrics);
Copy the code

Why can’t DP meet the current screen adaptation (design drawing is designed according to 1080×1920)?

Why emphasize the design drawing? Because the design drawing is carefully designed by UI designers according to the type and use scenario of the APP. Meanwhile, the design drawing directly determines the expected display effect of the APP interface and the expected size of each control. A layout written according to a set of blueprints should look exactly like the blueprints on most models. The average designer will give a set of dimensions, such as 1080 X 1920 (360DP X 640DP ratio 9:16), or IOS and Android will use a set of design (Android will generally use the IOS design). Without strict requirements, we just used DP to write the layout. Anyway, it is always 😭 now. Gradually, WE found that DP has been unable to escape the eyes of designers (the effect of many models is quite different from the design drawing).

The ppi value of Domestic Android phones is customized by the manufacturer, which is related to the hardware of the phone. The larger PPI value is, the better the display effect will be. However, PPI only describes the pixel density of the hardware of the phone, and is not used in the development. Each common size and density covers a range of actual screen sizes and densities. For example, two devices with normal screen sizes may have slightly different actual screen sizes and aspect ratios when measured manually. Similarly, for two devices with HDPI screen densities, the actual pixel densities may be slightly different. Android abstracts these differences into applications, allowing you to provide uIs designed for common sizes and densities, allowing the system to handle any final adjustments as needed. (It is possible that the dPI value of Android phone system factory Settings will also refer to this value range).

Ldpi (low) ~120Dpi MDPI (middle) ~160Dpi HDPI (High) ~240Dpi XhdPI (ultra high) ~320Dpi XXHDPI (super high) ~480Dpi XXXHDPI (Super super high) ~640Dpi small screen at least426dp x 320The normal screen of dp is at least470dp x 320Dp large screen for at least640dp x 480Dp large screen for at least960dp x 720dp
Copy the code

In order to simplify screen adaptation, dPI values for general models refer to the above range, but there are always special models that do not follow the official advice. For example, mi MIX 2 has a resolution of 2160×1080 with a screen size of 6 and a PPI of 403. The DPI obtained is 440, and the DPI of the phone with this resolution is roughly 480. Why emphasize the value of dPI? I think we all know that we always choose DP for the size of layout, because DP will change with different resolutions. The general relationship is as follows:

dpi 120 : 1dp = 0.75px;
dpi 160 : 1dp = 1px;
dpi 240 : 1dp = 1.5px;
dpi 320 : 1dp = 2px;
dpi 480 : 1dp = 3px;
dpi 640 : 1dp = 4px; Formula: px = density * dp; dp = px / density; density = dpi /160;
Copy the code

According to the above formula, DPI affects the value of DP to PX, so it can be said that DP adaptation is also dPI adaptation. For 360DP X 640DP design draft, the corresponding resolution is 1080 X 1920 and 1440 X 2560, and the value used is 1dp = 3px. For normal models, we can basically complete adaptation by using DP. However, when we encounter mobile phones with the same resolution and different DPI, such as DPI = 440 1DP = 2.75px or DPI = 420 1DP = 2.625px, we will be confused. For example, if the width of a Button is 100dp, the effect of width displayed in the model with DPI = 480 will be 300px, and the effect of width displayed in the model with DPI = 440 will be 275px. In this way, our layout will be different from the expected, which is not suitable for DP.

In addition, the mainstream mobile phones now have large screens, and the pixels in the length direction are generally larger than 1920px, roughly between 2040px and 2880px, but the width is basically 1080px. The configured mobile phones are 1440px, and more than 90% of the mainstream mobile phones in the market are 1080px wide. Such as:

Huawei: nova2s ,Mate 10Pro and so on resolution is2160X1080  dpi = 480  ;
nova 3 2340 x1080  dpi = 480; Millet: MIX.2040x1080  dpi = 480,  MIX2 2160x1080  dpi = 440 ,
Max 2160X1080  dpi = 480And so on; oppo: R11s2160x1080  dpi = 480, R15 2280x1080  dpi = 480, and so on...Copy the code

The size of the mobile phone’s DPI determines the multiple relationship between dp and PX. Currently, most models have a DPI of 480, which means that a component’s size on the design map has a margintop of 100dp = 300px, so when running on a model with a resolution of 1080X2280, the component’s position relative to the design map will be higher. This works well on 1080×1920 resolution models, and can cause a problem where the full layout is displayed on a large phone and the controls are blocked or the height ratio of the controls is inconsistent on a small screen, most notably the logo position on the opening page. This is also an adaptation problem that DP cannot solve.

Personally speaking, the adaptation width can be basically adapted with DP. After all, there are still a few models with special DPI. If you pay attention to the layout, there will be no obvious adaptation problems. Fitting height requires other, more effective fitting methods.

Three width and height qualifier, AndroidAutoLayout, smallestWidth,

Width and height qualifier adaptation and smallestWidth adaptation scheme generally have the same idea, smallestWidth is more intelligent and reliable than width and height qualifier. But these two schemes need to increase a lot of resource files, want to adapt what screen to configure the type of resource file, global adaptation. These two kinds of adaptation plan again wide height adaptation is very effective. AndroidAutoLayout has stopped maintenance, I think everyone will not give priority to this solution, not to discuss here. I think everyone is more or less known, the program is relatively simple and flexible, you can choose to width adaptation or height adaptation, the following is in the altitude of latitude above the test data:

Design:360dp X 640Dp resolution is1080 X 1920The screen height here includes the status bar. Control height is103Dp height/screen height =0.1609375The simulator1: Resolution is1080 x 2280The actual is1080 X 2136. Status bar height Wie:72The control height is103Dp height/screen height =0.1497093. After adaptation:0.1609649The simulator2: Resolution is1080 x 1920The actual is1080 X 1776. Status bar height Wie:72The control height is103Dp height/screen height =0.18133803. After adaptation:0.16035The simulator3: Resolution is480 * 800. Status bar height Wie:36Px. Smaller in size than the design drawing. Control height is103Dp height/screen height =0.19375. After adaptation:0.16125The millet4: Resolution is1080 x 1920. Status bar height Wie:60The control height is103Dp height/screen height =0.16612904. After adaptation:0.1609375. Mi MIX2: The resolution is1080 x 2160. Status bar height Wie:66Px. The height of the bottom virtual navigation key is:130The px control height is103Dp height/screen height =0.13940887. After adaptation:0.16108374. OPPO R15: resolution1080 x 2280. The size is6.28. Status bar height is:84The control height is103Dp height/screen height =0.13552631. After adaptation:0.1609649Huawei P20: The resolution is1080 x 2240. Status bar height Wie:85The control height is103Dp height/screen height =0.13770053. After adaptation:0.16087344Oppo R9s: the resolution is1080 x 1920. Status bar height Wie:54The control height is103Dp height/screen height =0.1609375. After adaptation:0.1609375.

Copy the code

With toutiao’s adaptation, the height ratio of a large-screen phone is basically the same as the height ratio in the design drawing, which makes the display much better in the real phone environment where the screen height varies greatly. Toutiao adaptation scheme is more flexible, although we re-adapt the global modification, but we can specify the specific interface is not suitable (that is, to restore the Settings to the default Settings), so that even the third-party interface as long as there is a code can choose adaptation. There is also the freedom to configure the width as the base or the height as the base to fit, but you can’t have both.

Is the adaptation plan feasible?

Then the problem comes. In daily development, if only the width is adapted, the demand is not much, but the height is indeed met, and then I found a problem when I adapted the height. When we use Toutiao adaptation scheme to adapt the height of the large-screen phone (such as 1080X2160 resolution), the calculated DPI value will be much higher than the original value. For example, the resolution of Mi MIX2 is 1080 X 2160 and the DPI value of altitude and latitude is 523, so 100DP = 317px, and the NORMAL DPI is 440 and 100DP = 275px. The height adaption has a great effect on the width direction. According to the data analysis of the following table, most of the width of the current popular models are in 1080, and most of the models with a height greater than 1920 are in the majority. Then in the large-screen mobile phones, we should choose the problem of adaptation height. Let’s first look at the next simple adaptation problem.

Requirement: Display position of logo on opening page.

Design: 1080px X 1920px 360DP X 640DP.

Logo: Size 100dp X 100dp horizontally centered, marginTop100dp. TopMargin/Screen height: 0.15635.

Test model: Mi iv (1080X1920) Vivo X21 (1080X2280).

Before real machine data adaptation:

Before adaptation: Millet4:  
10-12 10:28:25.146 12746-12746/cn.screen.adaptation E/WANG: getWidth300
10-12 10:28:25.146 12746-12746/cn.screen.adaptation E/WANG: getHeight300
10-12 10:28:25.146 12746-12746/cn.screen. Adaptation E/WANG: topMargin/screen height0.15625

VIVO X21:
10-12 10:31:15.246 23724-23724/cn.screen.adaptation E/WANG: getWidth300
10-12 10:31:15.246 23724-23724/cn.screen.adaptation E/WANG: getHeight300
10-12 10:31:15.246 23724-23724/cn.screen. Adaptation E/WANG: topMargin/screen height0.13157895We can see millet4The phone's topMargin/screen height is the same as the design. VIVO X21 is very different. The position of the logo displayed in this way will differ greatly from that in the design drawing. This gap will increase with the increase of the vertical resolution of the phone.Copy the code

After real machine adaptation:

After high adaptation: millet4:  
10-12 10:28:25.146 12746-12746/cn.screen.adaptation E/WANG: getWidth300
10-12 10:28:25.146 12746-12746/cn.screen.adaptation E/WANG: getHeight300
10-12 10:28:25.146 12746-12746/cn.screen. Adaptation E/WANG: topMargin/screen height0.15625

VIVO X21:
10-12 10:30:33.760 23502-23502/? E/WANG: getWidth356
10-12 10:30:33.760 23502-23502/? E/WANG: getHeight356
10-12 10:30:33.760 23502-23502/? E/WANG: topMargin/screen height0.15614036We can obviously see that the logo's topMargin/screen height is basically the same as the design, so that the logo on most models shows the same effect as the design draft. But you can see that the width and height of the logo have increased56Px, this is also because the value of DPI was changed when the height was adapted. If the value of DPI is too large, the global dp to PX ratio will be increased. In this way, the size of our logo and the size of other controls on the interface will have an impact.Copy the code

Conclusion:

Screen adaptation is a long way to go, we should choose our adaptation for the design draft, for the interface, for the control, good technology does not mean that it is easy to use, sometimes it will do the opposite. I still like toutiao adaptation plan, with annotations to do up forced case instant promotion, want to be the interface adaptation on the interface adaptation, want to cancel adaptation on the cancellation of adaptation, also a annotation. In addition, there is a point, adaptation scheme launched so much time is not short, there are a few developers actual combat? The so-called practice out of the truth today headlines adaptation scheme pit many, we slowly step on ~ ~ welcome everyone to put forward the article inside the mistake, we learn together!

Refer to the developer. The android. Google. Cn/guide/pract…

Welcome to: my Nuggets my book my CSDN my Github

Annotation edition Toutiao adaptation scheme (for reference study)

Five mainstream models

Note: Only part of the dPI values of the following models have been verified by the real machine, and some errors in the rest are expected to be corrected, as shown in the value of (width /density).

Huawei honor Series:

Millet:

OPPO

VIVO

meizu

The hammer