Why screen adaptation

Px, DP and SP are commonly used for font size during Android development. But since PX is the unit of pixels, such as we usually say mobile phone resolution such as 1920 by 1080 are px units. Now the Android screen resolution is fragmented into 720×1280, 1080×1920, and 2280×1080. As a result, for example, 187px will display the same size on models with different resolutions, which is definitely not the effect we want, so it is difficult for us to achieve the effect by using px units. So why does dp work?

Using px units from left to right are 480 x 800, 1080 x 1920, and 1440 x 2560

The dp units are 480 * 800, 1080 * 1920, and 1440 * 2560 from left to right

The total screen width is 320DP, 415DP and 411DP respectively

So what is DP?

Dp refers to device-independent pixels. Dp controls represent different real pixels in phones of different resolutions and sizes. For example, in a phone with a lower resolution, 1DP May be 1px, while in a phone with a higher resolution, 1DP May be 2px. It can be similar in size in different phones.

How do WE calculate dp to px

Dp in Android will be converted to PX before rendering.

  • px = density * dp;

  • density = dpi / 160;

  • px = dp * (dpi / 160);

The DPI is calculated based on the actual screen resolution and size, which may vary from device to device.

Since the density is not fixed, the density of each device with a different resolution must be different, which will result in the total DP corresponding to the width/height of each device will be different. Assume that the density of 480 * 800 resolution is 1.5. Density is 2.6 for 1080 * 1920 and 3.5 for 1440 * 2560. Then their corresponding width dp = (width px)/density, respectively 320dp, 415dp, 411dp. It can be seen that when the unit is DP, the gap between the three devices is not very large, but it certainly cannot meet our requirements for screen adaptation. Here’s a look at three mature screen adaptation options that are common on Android and the pros and cons of each.

Screen adaptation scheme

1.1 Width and height qualifier adaptation

Set a benchmark resolution, that is, the resolution corresponding to the design drawing. Other resolutions are calculated according to this benchmark resolution. In folders of different sizes, write corresponding DIMens files according to this size.

For example, the base resolution of our design is 375 * 667

  • The width is 375. The width of any resolution is rounded into 375 parts, ranging from x1 to x375

  • The height is 667, and the height of any resolution is rounded into 667 parts, with values y1-Y667

So for dimens files with 1080*1920 resolution,

  • X1 = (1080/375) * 1 = 2.88 px

  • X2 = (1080/375) * 2 = 5.76 px

  • Y1 = (1920/667) * 1 = 2.87 px

  • Y2 = (1920/667) * 2 = 5.75 px

When the reference height in the code is Y_187, we will find the corresponding height in the CORRESPONDING XML file according to the current device resolution when the APP runs. Then we can fill in the corresponding DIMens reference according to the size on the design draft, which basically solves our adaptation problem and greatly improves the efficiency of our UI development.

Validation protocols

Simply verify whether this scheme can achieve the effect of adaptation through calculation. For example, there is a 187DP wide View on the design drawing.

480 * 800

  • Width ratio of design drawing: 187DP / 375DP = 0.498

  • The actual 480 * 800 width ratio = 187 * 1.28px / 480 = 0.498

1080 * 1920

  • Width ratio of design drawing: 187DP / 375DP = 0.498

  • The actual width ratio at 1080 * 1920 = 187 * 2.88px / 1080 = 0.498

  • Calculation height same

A fatal flaw in this solution is that it requires a precise hit to fit. For example, a 1920×1080 phone must find the 1920×1080 qualifier, otherwise it will have to use the same default Dimens file. With the default size, the UI is likely to be distorted or, in short, poorly fault-tolerant.

1.2 smallestWidth adaptation

SmallestWidth adaptation, or SW qualifier adaptation. Android will recognize the minimum dp size of the available height and width of the screen (in fact, the width of the phone) and then go to the resource file to find the resource file under the corresponding qualifier folder.

This mechanism is the same as the width and height qualifier adaptation mentioned above, in that the system selects corresponding files according to specific rules.

The smallestWidth qualifier screen adaptation scheme can be thought of as an upgraded version of this scheme. The smallestWidth qualifier screen adaptation scheme simply changes the value in the dimens.xml file from PX to DP, with the same principle and usage

├ ─ ─ SRC/main │ ├ ─ ─ res │ ├ ─ ─ ├ ─ ─ values │ ├ ─ ─ ├ ─ ─ values - sw320dp │ ├ ─ ─ ├ ─ ─ values - sw360dp │ ├ ─ ─ ├ ─ ─ values - sw400dp │ ├ ─ ─ ├ ─ ─ values - sw411dp │ ├ ─ ─ ├ ─ ─ values - sw480dp │ ├ ─ ─ ├ ─ ─... │ ├── ├─ Values-SW640DP │ ├─ Values-SW640DP │ ├─ Values-SW640DP │ ├─ Values-SW640DPCopy the code

Validation protocols

For 1920 * 1080 resolution phones with a DPI of 420, we also set a View to 187dp wide

  • Density = (dpi = 420) / 160 = 2.6
  • Total screen width DP = 1080 / density = 415
  • Find 187DP = 204.45DP under values-SW410DP
  • According to the formula PX = density * dp, px = 531.57 was calculated
  • Calculate the percentage of screen width, 56.86/1080 = 0.492

For a 1440 * 2560 resolution phone with a DPI of 560, we also set a View to 187dp wide

  • Density = (dpi = 420) / 160 = 3.5
  • Total screen width dp = 1440 / density = 411
  • Find 187DP = 204.45DP under values-SW410DP
  • According to the formula PX = density * dp, px = 715.57 was calculated
  • Figure out the percentage of screen width, 715.57/1440 = 0.496

Because the folder identified is the folder of values-SW410DP, but the screen width is 415DP and 411DP, there will be a little error in the final calculated proportion, which can be ignored basically, and relatively accurate adaptation effect can be achieved

advantages

  1. Very stable, very low probability of accidents
  2. There will be no performance loss
  3. The range of adaptation can be controlled freely, and will not affect the other three libraries
  4. With the help of plug-ins, learning costs are low

disadvantages

  1. It is highly intrusive and requires references everywhere.
  2. There is still no way to cover all models of resolution, some models may be poor adaptation effect
  3. Cannot be adapted based on height
  4. Generate many files and increase the size of APP by 1~2M

1.3 Toutiao adaptation scheme

The core principle of toutiao screen adaptation solution is to calculate density according to the following formula

By default, dp = density * dp = px/density, the total width of the screen on all devices is assumed to be equal to 375dp in the design drawing.

Density = screen width px/design width (375dp)

Then, we assign density to the system through the system API, discarding the default formula for calculating density.

This can be a very clever screen adaptation, and it is so minimally invasive that it can be ignored.

Validation protocols

For the 1920 * 1080 resolution phone, we also set a View to be 187dp wide and design to be 375DP wide

  • Density = (screen width px = 1080) / 375 = 2.88
  • View width = density * 187dp = 538.56
  • Calculate the percentage of screen width, 57.6/1080 = 0.498

For 1440 * 2560 resolution mobile phone, we also set a View as 187dp wide and design drawing as 375DP wide

  • Density = (screen width px = 1440) / 375 =3.84
  • View width = density * 187dp = 718.08
  • Figure out the percentage of screen width 718.08/1440 = 0.498

It can be seen that this scheme is completely error-free and very invasive, and only the density of the system needs to be modified. Although changing the density attribute of the system has a small impact, it is generally easy to resolve.

advantages

  1. Very low cost to use, very simple operation
  2. Very low invasiveness
  3. Can adapt the control of the tripartite library and the control of the system

disadvantages

  1. It will have a global impact on the size of the controls in APP. For example, some third-party library controls may not be 375DP like ours when they are designed, which will lead to some problems such as control size distortion.

Refer to the article

SAO year your screen adaptation way should upgrade! -SmallestWidth qualifier adaptation scheme

Android screen fit terminator

Android is currently the most stable and efficient UI adaptation scheme

Spread the word

This article is published in Front of Mint Weekly. Welcome to Watch & Star.

Welcome to the discussion. Give it a thumbs up before we go. ◕ ‿ ◕. ~