Shulou(Shulou.com)06/02 Report--

Today, Xiaobian will share with you what are the relevant knowledge points of Android adaptation related content, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for everyone's reference, I hope you have gained something after reading this article, let's learn about it together.

1. Why adapt?

Let's start with a set of statistics and graphs.

[2014 Equipment Distribution Map]

[2015 Equipment Distribution Map]

[Equipment Brand Distribution]

[Screen size distribution diagram]

[System Distribution Diagram]

Comparison with iOS

From the above figures, we can see that there are many android devices, many brands, many screen size, and a large distribution of system versions, which is more fragmented. That's why android needs to be adapted. In addition, android adaptation includes system version adaptation, screen size adaptation and so on.

2. About adapting various concepts

units

--px (pixel): pixel, dot on screen, smallest independent display unit, px is an integer, no decimal. Usually square rows of pixels reference links

--in: inches, each inch is equivalent to 2.54 centimeters.

concept

--screen size(screen size): The physical size of the screen, which means diagonal length. For example, if the screen of a mobile phone is 3.5 inches, it means diagonal length is 3.5 inches, about 8.89 cm.

--Screen resolution: refers to the number of pixels on the horizontal and vertical sides of the screen, the unit is px, such as 1920*1080 3:

Screen pixel density: dpi(dots per inch), pixels per inch, such as 120dpi, 160dpi, which is related to screen size and screen resolution.

android units and conversion

dp or dip, device-independent pixels, i.e. density-independent pixels, note that it is different from dpi, based on 160dpi, 1dip=1px screen password, density = dpi / 160, so if the screen density is 1, then 1dp = 1px, if it is 2, then 1dp = 2px 3: sp(scale-independent pixels), the recommended unit of font, you can scale according to the text ** item, the official recommended minimum use value is 12sp, followed by try to use even values.

*dpi

mdpi → [120dpi ~ 160dpi]

hdpi → [160dpi ~ 240dpi]

xdpi → [240dpi ~ 320dpi]

xxdpi → [320dpi ~ 480dpi]

xxxdpi → [480dpi ~ 640dpi]

case

For example, a mobile phone screen resolution of 480*800 , screen size 3.7in, its dpi is what, in the layout width setting 320dp, the width is how many pixels?

Theoretical calculation value: First calculate the diagonal pixel number 480 480 + 800 800 = 933933, then calculate the pixel number per inch 933/3.7 = 252dpi, and finally calculate the dpi of 252. Calculate the pixel value corresponding to 320dp: first calculate the screen density, the screen density value is equivalent to the pixel value corresponding to 1dp: 320 (252/160) = 504px, (the mobile phone screen is only 480px, and the calculated width is actually wider than the screen. If it is true, it means that if it is set to 320dp on the appeal screen, part of it is outside the screen)

Note: The DPI calculated on the phone is the theoretical value, in fact, there are only 120(low), 160(medium), 240(high), 320(xhigh) and so on, so the actual calculation formula is: 320 (240 /160)=480px, which is the same as the screen width, indicating that the appeal screen is set to 320dp, which just occupies the entire screen.

3. How do you know?

The above is only to know why to adapt, and various concepts, then how to adapt? Here we mainly look at mobile phones, not tablet adaptation.

graph cut rule

From the above concept we know that 1dp= 1px at 160dpi, so when designing icons, the scale value of (mdpi, hdpi, xhpi, xxhpi, xxhpi) is 2:3:4:6:8. For example, system icon, mdpi is 4848, xdpi is 7272, scale value is 1.5. As you can see from the res structure above, there is a mipmap- * folder, which is a new folder added to the system to hold system icons.

size of various icons

Here are the official recommended icon size

Width Value Settings

Let's start by looking at how we set up a view with a width of 320dp in an interface.

As you can see from the picture, different screens show different effects (ignoring the tablet), some phones occupy the entire screen width, while some phones do occupy only part of the screen width. Therefore, when the visual picture is displayed, for example, the size of 800 * 480 is displayed, and the label occupies the whole screen width of 240dp, then the real effect displayed will be inconsistent on each mobile phone.

Therefore, in development, match_parent can be used to set the full screen. If it is other size, adaptive or weight can be used to set the width and height occupied by view.

qualifier

We can see from the above that *dpi is used as a qualifier, and there are other qualifiers such as large qualifier, sw qualifier, etc., which will not be expanded one by one.

9 photos

Figure.9 shows the system adding a transparent edge of one pixel around the image. The image must have.9 as the descriptor. For example, if a picture is used as the background, if it is not a.9 picture, then if the content area is larger than the icon, the picture will be stretched. All four corners of the image below are stretched.

The following figure sets the stretch area of the image, you can see that the four corners of the image are not stretched, so the final visual effect is much better.

Mark position: mark adjacent two sides. You cannot mark only one side or opposite two sides. If you mark only two sides, the stretch area will be the intersection part. The text area will be controlled by the right and bottom. If you do not mark, the whole width will be covered.

At the same time, it should be noted that the image can be labeled in sections, but the final stretching effect of the image is related to the labeled pixels. For example, if the same side is labeled up and down and the ratio of upper and lower pixels is 3:1, the final stretching ratio is also 3:1.

4. More Tips

A: The same image size in hdpi, xhdpi, etc. should be proportional so that it can be displayed consistently at different resolutions on the same screen. Notice 2:3:4:6:8 above.

b: For the same type, the image size should be consistent. It is possible that multiple people make multiple modules, resulting in a difference of 1 or 2 pixels between the removed images of the same type (a resource library can be established to reverse check the existing icon size).

c: The same picture problem, different people do different modules, many icons are the same, due to different development, will lead to the same picture in a package, which will lead to package size growth.

d: If you can use solid color pictures, let the developer try to use color values without cutting pictures.

e: Compared with png image, jpg size will be much smaller, if there is a large image and no fuzzy gradient requirements, try to use jpg format.

f: Many simple pictures can be implemented in code, such as circles, rectangles, etc., which can be implemented by code and reduce the size of the package.

g: If the size of the bag is too large, try to ensure that the picture of higher size exists, so that the mobile phone with low screen density can also display very clear picture, but if there is only small picture, it will be enlarged and stretched, which will cause the picture to be deformed or unclear.

h: .9 Note that the stretching area and the content area are marked, and the padding outside the picture can be marked directly on the picture. (If the distance between the top and bottom of the content area is not equal, filling multiple lines of text will cause the text to be out of the center. In this case, you can directly leave padding on the picture)

i: .9 pictures can only be stretched but not compressed, compression will lead to picture deformation, so in the process of drawing to determine the minimum size of the picture,(for example, given a rectangular area with a certain height, put a.9 picture with an initial height greater than the rectangle, will lead to picture compression).

j: . 9 Pictures are generally only small size, unless the border has gradient elements, only do multiple size.

k: For picture annotation, art needs to convert the unit, px is converted to the corresponding dp, and the developer can directly use the value.

l: About font, font size sp, but if the font is presented in a rectangular box with a fixed height, and then the font size can be adjusted on the mobile phone, it may not be displayed completely (the external picture showing the font, background, etc. Try not to write dead height).

m: When marking pictures, if an icon occupies the whole width, you can not mark the icon width size, but only need to mark the size from the frame. The development will adopt self-adaptation. If the width is determined, it can only occupy half the width on some screens.

The above is all the contents of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.