React Native mobile development practices-4-Android adaptation principle, react-4-android

React Native mobile development practices-4-Android adaptation principle, react-4-android

Open Android Studio, and select Open an existing AndroidStudio project from the menu to Open the Android folder of the ch04 project, as shown in Figure 5.8.

 

Figure 5.8 Android native project structure

From the Android project structure, you may feel vaguely that Android adaptation is based on folders. Screens of different resolutions and sizes automatically adapt to the layout or resource files in the corresponding folders. However, to better understand Android adaptation, it is necessary to first understand some basic concepts of Android adaptation:

 

• Screen size: the number of inches on the diagonal line of the phone screen.
• Screen Resolution: screen resolution refers to the number of screens in width and height.
• Screen pixel density: the number of pixels per inch on the diagonal line of the mobile phone screen.

 

In addition, the commonly used unit of size for coding is:

 

• Px: pixel.
• Dp (dip abbreviation): indicates that the size of a 1-pixel screen with a density of 160 is 1 dp. On a screen with a density of 320, 1 pixel corresponds to 0.5dp, and so on. On a screen with a density of 160, 1 inch has 160 pixels.
• Px size = 1/160 inch. Therefore, dp is a physical size independent of pixels. Therefore, the size of 100dp is displayed on different mobile phones, and the physical size looks basically the same.
• Sp (Scale-independentPixel) is an abstract pixel unrelated to scaling. Sp is similar to dp, but the only difference is that the Android system allows users to customize the text size (small, normal, large, and super large). When the text size is "normal, 1sp = 1dp = 0.00625 inch, and 1sp> 1dp = 0.00625 inch when the text size is "large" or "super large.

 

When creating a project, different mipmap or layout folders are automatically created (different images are provided at different pixel density ), the suffix of the folder indicates the pixel density (dp) range of the layout or resource. For the relationship, see 5.1.

Table 5.1 correspondence between suffix naming of Android folders and the pixel density (dp) Range

Suffix	Pixel density (dp) Range
Mdpi	120dp ~ 160dp
Hdpi	160dp ~ 240dp
Xhdpi	240dp ~ 320dp
Xxhdpi	320dp ~ 480dp
Xxxhdpi	480dp ~ 640dp

For the above-mentioned mipmap folder in the Android project, the Android adaptation mechanism is as follows: the system will first find the corresponding image under the mipmap directory that matches the suffix with the device, when it cannot be found, it will go to the "higher" level directory to find it. If it still cannot be found, it will go back to the level 2 to find it, and so on.

For example, if you run the Android App on a mobile phone with a density of xxhdpi, you will first find the image resources in the drawable-xxhdpi directory, and then find the drawable-xxxhdpi again if no image resources are found, if there is no higher than drawable-xxxhdpi, you can find drawable-xhdpi if you cannot find it, and then drawable-hdpi until you find the corresponding image resource, the system scales the image according to its density and then displays it on the screen. Therefore, if the directory of the image is incorrect, the image may become blurred due to scaling.

Similarly, layout directories used to store layout files are also adapted through extensions, but layout folders usually add device resolutions as suffixes, such as layout-1280x720, layout-1920x1080, and layout-land-1280x720.

The above adaptation method is similar to the Size Class in iOS development: used for classification adaptation.

 

 

Learn With Me, React Native mobile development practices