primers

Screen adaptation is an android development/interview issue. This article will screen adaptation of the knowledge of the main points presented to the reader.

The body of the outline

  • Why android needs to do screen adaptation
  • Basics (very important)
  • Screen adaptation guide

Please see the full PDF version (more complete project downloads). To be continued. The source code. Github. You can click about me to contact me for the full PDF



The body of the

Why android needs to do screen adaptation

Key words: Android fragmentation

Since the launch of Android, Google has opened the Android system, and various manufacturers have their own policies, leading to no unified standard of screen size, a variety of screen aspect ratio, screen density is also the capital of each manufacturer to compete, which makes it extremely difficult for Android developers to adapt a set of code to all devices. Although Google has come up with dp units to replace PX, there are still areas where DP doesn’t fit perfectly. This is where we need to use other means to complete the adaptation.

Q: With regard to screen adaptation, why do we still need to adapt dp units? A: Although DP can solve the adaptation problem in most cases, it cannot be adapted for a small number of models. The reason is that the DP unit provided by Google is unreliable in the current Android market environment. Dp during coding is transformed into PX during operation, and px at this time cannot accurately compare with the original design of UI.

The most intuitive manifestation is: the same 300DP can occupy the full width on mobile phone A, but it can not occupy the full width on mobile phone B, or will exceed the full width. As for why dp is unreliable? This will be explained later.

Basics (very important)

The following concepts are very basic, but also very important. The lack of a link in basic knowledge makes it difficult to understand the complex strategy behind.

1. The pixels

A pixel is a physical concept, and in technical terms, it’s like this: As pixels, is the number of CCD/CMOS glazing electric induction element, A sensor through the photosensitive, photoelectric signal conversion, steps such as A/D conversion, form A point on the output of the photo, if we enlarged image several times, will find that these continuous tone is actually composed of many small square points of similar color, These dots are the smallest units of image, called pixels. In short, a pixel is the smallest component of a phone’s screen.

Simply put, a pixel is the smallest unit of color on a screen. On all devices, 1px is the same. UI little sister drawing will generally take PX as the unit.

2. The resolution

For example, 19201080 resolution means that the screen of the current device is composed of 1080 pixels horizontally and 1920 pixels vertically.

3. Screen size

The diagonal length of the screen. Generally measured in inches, common screen sizes are 4.7, 5.5, and 6.0.

4. Screen pixel density

Definition: How many pixels exist in a square inch area. The same 1920*1080 resolution, there are two mobile phones, one is 4.7 inches, the other is 6.0 inches, the two pixel density is not the same. Unit of screen density: dots per inch (DPI). Standard screen resolution: 160dpi. That’s 160 pixels per square inch. (mdpi).

5. The relationship between screen size, resolution and pixel density

Pixel density can be calculated from screen size and resolution. The calculation formula is:



As shown below:



6. Density-independent pixel units (DP, or DIP)

Density -independent pixel. Using DP as the length unit ensures a very similar effect on phones with different screen pixel densities. For example, if you want to draw a line half the width of the screen on a 480×800 phone, you can set the line to 240px, but on a 320×480 screen, you only need 160px, but you can use 160DP to make the line half the full width on both screens.

If you have a mobile phone with a screen density of 160dpi, 1px=1dp on it; For a 320dPI phone, 1px = 0.5dp. In short, the rule is: the higher the screen pixel density (DPI), the more PX 1DP represents.

Here’s why dp is sometimes unreliable.

If UI small sister with 320*480 DPI160 screen as a standard, draw a length of 160px line, the length of the screen is half the width, this time, you directly use 160DP, generally can complete adaptation. But if this layout is running at 320×480 resolution, but the screen density is a little less than 160dpi, then the 160DP you write in the layout is actually more than 160px, not half the screen width, but a little more than 160px.

7. Independent proportional pixels (SP)

Scale-independent Pixel (SP or SIP) is specifically used for font size representation. It is recommended to use even numbers above 12sp as font sizes. Do not use odd numbers, or floating-point decimals, because accuracy can be lost.

Q: What is the difference between SP and DP? A: Normally, dp and SP have similar effects, but there is one thing. If the user adjusts the font of the phone, for example, from standard to super large, then 1DP is equal to 1px, but 1SP is changed from 1px to 3px (just for example, don’t be serious). Therefore, when the user adjusts the font, the same layout may have the same window size, but the text size changes.

Screen adaptation guide

1. Layout fit

Use multiple layouts to accommodate different screens. This method must understand the concept of layout qualifiers. As shown in figure:



Developer. The android. Google. Cn/training/mu…





Layout alias

This applies when multiple qualified layouts. XML references the same sub-layout, which may or may not have the same content. At this point, you can save effort by using layout aliases.




Program evaluation:

2. Code adaptation

We use Java code to get the width and height of the screen, dynamically specifying the width and height of the control. How to get the screen width and height

Code adaptation, generally used to dynamically create controls, or custom view to draw their own graphics. Special mention of interface adaptation: when you go to the background image request, we can put in the parameters of the width of the screen, or the width of the control, to get the image we want, after the image returned directly can display the best, without our app code more manipulation.

Solution evaluation: This is slightly better than the next best thing, but the control size goes directly into the code, which still makes the code less elegant.

3. Layout component adaptation

Try to solve all the problems directly with a layout, which is called layout component adaptation. This is the best policy. It includes the following measures:

  • Use the pixel density-independent unit DP sp
  • Eliminate absolute layouts in favor of relative and linear layouts
  • Use wrapContent Matchparent and linear layout weights
  • Use minWidth, minHeight,lines and other attributes
  • Use multiple sets of defined dimensions in dimens

Possible plane pilot

Q: In the same layout file, I can use linear layout or relative layout to achieve the purpose, so how to choose? A: With A relative layout, it is very likely that the first measurement will be “unsatisfactory” and the second will be measured. Linear layouts are preferred if both work, both have the same layout level, and no weights are used in linear layouts (weights may also trigger a second measurement). Otherwise, choose relative layout.

conclusion

Screen adaptation, the work is not difficult, but the interview will be asked. There are two perfect adaptations currently in the mainstream: Toutiao (which directly changes density in DisplayMetrics) and multiple dimens adaptations, each of which has its own advantages. Continue this story in the next article.

Please see the full PDF version (more complete project downloads). To be continued. The source code. Github. You can click about me to contact me for the full PDF