Like attention, no more lost, your support means a lot to me!

🔥 Hi, I’m Chouchou. GitHub · Android-Notebook has been included in this article. Welcome to grow up with Chouchou Peng. (Contact information at GitHub)

preface

  • Android screen adaptation is a cliche, and one that has been overstated. Although the overall complexity of this problem is not high, but involves more concepts, easy to confuse;
  • In this article, I will summarize the screen adaptation principles & solutions (nothing new in the content, probably mainly for yourself). Please be sure to like and follow if you can help, it really means a lot to me.

Related articles

  • The Android | cliche! Screen adaptation principle & plan summary notes”
  • The Android | so-accurately weighed various! Tell me about the whole process of loading picture”

directory

1. Concepts related to screens

Hint: a lot of articles on the Internet are confusing and painful to read! I hope Chouchou’s summary can be more rigorous.

  • Hardware/physical parameters:

  • Software Concepts:

Tip: PPI and DPI are easily confused, the former is a hardware physical parameter, while the latter is a software concept. The biggest difference is that DPI can be artificially corrected. For example, a mobile phone with a PPI of 430 or 450 May be assigned a DPI of 480.

  • Density qualifier:

2. Why screen adaptation?

  • Cause 1: The device is fragmented

The root cause of screen adaptation is device fragmentation (due to the inherent openness of Android system), mainly manifested as: system fragmentation & screen size fragmentation & screen pixel density fragmentation.

Citing the blog.csdn.net/jiashuai94/… – the jiashuai94

  • Cause 2: The screen width DP is inconsistent with the design width DP

The UI design is usually designed to be 360DP wide, but the actual screen width is not necessarily 360DP. At this point, the same 360 DP size is the full width size on this phone, but not on the other phone.

3. Toutiao adaptation scheme

3.1 Key Points

  • 1, select wide or high dimension fit (most choose wide)

  • 2. Modify DisplayMetrics#density

  • 3. Modify DisplayMetrics#scaledDensity

  • 4. Monitor font size changes in system Settings

Resources: A Very Low-cost Android Screen Adaptation by Bytedance Technology team

3.2 to evaluate

  • Advantages: very low invasion, stable effect

4. Width and height qualifier adaptation scheme

4.1 Key Points

  • 1. Provide a folder for each resolution that needs to be adapted
School Exercises - - School Exercises - - School Exercises - - school Exercises... ├ ─ ─ values - 1920 x1080 ├ ─ ─ x1440 values - 2560Copy the code
  • 2. Select a baseline resolution

For example, choose 480 x 320 as the base resolution, and complete the width and height to obtain the following dimensions:

<dimen name="x1">1px</dimen>
<dimen name="x2">2px</dimen>
...
<dimen name="x320 ">320 px</dimen>

<dimen name="y1">1px</dimen>
<dimen name="y2">2px</dimen>
...
<dimen name="y480 ">480px</dimen>
Copy the code

Note: the units are px

  • 3. Calculate the size of other resolutions in proportion

Using 480 x 320 as the base resolution, scale the size in different resolution folders, for example 800 x 480:

<dimen name="x1">1.5px</dimen> 480/320 = 1.5 </dimen> 1.5*2 = 3... <dimen name="x320 ">480 px</dimen> 1.5*320 = 480Copy the code

4.2 to evaluate

  • Fatal faults: Low error tolerance, must be accurate to match
  • Risk point: increase package size

5. SmallestWidth qualifier adaptation scheme

Tip: The minimum width is the smallest of the two sides of the screen, not the width in the sensory sense.

5.1 Key Points of the Solution

  • 1. Provide a folder for each minimum width that needs to be adapted
Flag school ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag School ── Values Flag SchoolCopy the code
  • 2. Select the minimum width of a baseline

For example, select 360DP as the minimum width and make the whole width 360 to get the following dimensions:

<dimen name="x1">1dp</dimen>
<dimen name="x2">2dp</dimen>
...
<dimen name="dp_360 ">360dp</dimen>
Copy the code

Note: the units are dp

  • 3. Calculate the dimensions under other minimum widths proportionally

With 360DP as the minimum width, scale the size in folders with different minimum widths, for example, SW480DP:

<dimen name="x1">1.333dp</dimen> 480/360 <dimen name="x2">2.666dp</dimen> <dimen name="dp_360 ">480dp</dimen>Copy the code

5.2 to evaluate

  • Risk point: increase package size
  • Disadvantage: can not automatically support vertical screen switching adaptation
  • Deficiency: SP also needs a size increase

6. Summary

Every solution is not perfect, you should pay attention to your focus, to determine which of the advantages and disadvantages can be compromised, which is not acceptable, to choose the most appropriate solution.

The resources

  • Device Compatibility — Android Developers
  • UI Optimization (PART 1) by Shaowen Zhang, Geek Time
  • Android Screen Adaptation — Carson_Ho
  • Stable and Efficient UI adaptation for Android now. By Rudin Wu
  • The smallestWidth qualifier Adaptation Scheme by JessYan
  • “A Very Low-cost Android Screen adaptation” by Bytedance Technology team

Recommended reading

  • Cryptography | is Base64 encryption algorithm?
  • Operating system | interruption & system call is analysed
  • Interview questions | back algorithm framework to solve problems
  • The interview questions | list questions summary algorithm
  • Computer network | graphic DNS & HTTPDNS principle
  • Logic | “I know you don’t know!” 10 Logic Interview Questions (part 1)
  • Say from Android Android | : text to TextView process
  • Android | food tasteless! App Startup may be easier than you think
  • Android | enough is enough! How does Glide arrange the life cycle clearly

Thank you! Your “like” is the biggest encouragement for me! Welcome to attentionPeng XuruiThe lot!