The UI Designer should not know the android screen knowledge, uiandroid

The UI Designer should not know the android screen knowledge, uiandroid

Provided by Beijing shangxuetang

Many designers and engineers were confused by the various screens of Android devices. I did both the UI design and the android interface layout. I was just familiar with this content, I have also made related lectures within the company. Here, I will reorganize this part of knowledge and share it with you!

1Understand several concepts

(1) Resolution. Resolution refers to the number of pixel points on the mobile phone screen, which is generally described as the "width x height" of the screen. The common resolutions of Android phone screens include 480x800, 720x1280, and 1080x1920. 720 × 1280 indicates that the screen has 720 pixels in the width direction and 1280 pixels in the height direction.

 

(2) screen size. The screen size is the physical size of the diagonal line of the mobile phone, in inches (inch. For example, a mobile phone named "5-inch big screen mobile phone" refers to the diagonal line size, 5-inch x 2. 54 cm/inch = 12.7 cm.

(3) density (dpi, dots per inch; or PPI, pixels per inch ). As the name suggests, the number of pixel points per inch. The higher the value, the more delicate the display. If we know that the resolution of a mobile phone is 1080 × 1920 and the screen size is 5 inch, Can you calculate the screen density? Haha, the hook theorem of middle school comes in handy! Through the width of 1080 and the height of 1920, according to the stock theorem, we can conclude that the number of degrees on the diagonal line is about 2203. Dividing 2203 by 5 is the density of the screen, and the calculation result is 440. The screen of 440dpi is already quite delicate.

 

2, Actual density and system Density

We have not found that the words "actual density" and "system density" are used in other words. Let me define them for the time being.

The "actual density" is the density calculated by ourselves. This density represents the real smoothness of the screen. For example, the actual density is the actual density in the above example, this screen has 440 pixels per inch. The screen density of 5 inch 1080x1920 is 440, while that of 4.5 inch with the same resolution is 490. In this case, there will be many numbers in the screen density, showing serious fragmentation. The density is the basis for scaling and displaying the interface on the android screen. How does Android adapt to so many screens?

In fact, each Android phone screen has an initial fixed density, which is 120, 160, 240, 320, or 480. We call it "system density ". Do you find the rule? There is a double relationship between values. In general, the screen of 240x320 is low density 120 dpi, that is, ldpi; the screen of 320x480 is medium density 160 dpi, that is, mdpi; the screen of 480x800 is high density 240 dpi, that is, hdpi; the 720x1280 screen is ultra-high density 320 dpi, that is, xhdpi; the 1080x1920 screen is ultra-high density 480 dpi, that is, xxhdpi.

Android scales the interface elements based on the system density rather than the actual density.

 

3, An important unitDp

Dp can also be written as dip, that is, density-independent pixel. You can imagine that dp is more similar to a physical size. For example, an image with a width and a height of 320 dp is "as big as" on a 480x480 and 800 x mobile phones. In fact, their pixel values are not the same. Dp is exactly the same size. No matter what the screen density is, the elements with the same dp size on the screen always look about big.

In addition, the text size is sp, short for scale-independentpixel. In this way, when you adjust the font size in the system settings, the text in the application will become larger and smaller.

 

4,DpAndPxConversion

In Android, a medium-density mobile phone screen with a system density of 320 DPI is a benchmark screen, that is, a 480 × mobile phone screen. In this screen, 1dp = 1px.

100dp is 100px in 320 × 480 (mdpi, 160 dpi. So how much px is 100dp on a 480 × 800 (hdpi, 240 dpi) mobile phone? We know that 100dp looks almost big on two mobile phones. Based on the relationship between 160 and 240, we can know that in 480 × 800, 100dp actually covers 150px. Therefore, if you provide a PX image for the mdpi mobile phone, the image will be stretched to px on the hdpi mobile phone, but they are all 100dp.

The ratio of density to density seems to be calculated without 160dpi and 240dpi, but with 320px and 480px. However, the zooming ratio calculated by width is not applicable to ultra-high-density xhdpi and ultra-high-density xxhdpi. That is, how much px is 1dp in 720 × 1280? If 720/320 is used, you will get 1dp = 2.25px, which is incorrect. The conversion between dp and px is subject to the System density. The system density of 720 × 1280 is 320,320 × 480 and the system density is 160,320/160 = 2. In 720 × 1280, 1dp = 2px. Similarly, 1dp = 3px in 1080 × 1920.

You can remember the following ratio. The conversion between dp and px is very easy!

Ldpi: mdpi: hdpi: xhdpi: xxhdpi = 3: 4: 6: 8: 12. We found that the relationship between numbers is two times. The calculation is based on mdpi. For example, in 720 × 1280 (xhdpi), how much px is 1dp equal? Mdpi is 4, and xhdpi is 8 to 2 times, that is, 1dp = 2px. The opposite calculation is more important. For example, you have used PhotoShop to create an interface in the canvas of 720 × 1280. The distance between the two elements is 20 PX. How much dp should we mark? 2 times the relationship, that is, 10dp!

 

When the font size of the Android system is set to "normal", the size conversion of sp and px is the same as that of dp and px. For example, if the size of a text in a 720x1280 PS canvas is 24px, the engineer is told that the text size is 12sp.

5InXdhpiMiddle plot

Which screen do I use to map so many screens on Android phones? There is no need to provide a set of materials for mobile phones of different density. In most cases, one set is enough.

The resolution of the mobile phone is 1080x1920. You can select this size, but the image size will increase the size of the application installation package. The larger the size, the higher the memory occupied by the image. If you are not designing a ROM, but creating an application, I suggest you use PS to plot it in a canvas of 720 × 1280. This dimension combines aesthetics, economics, and simplicity of computing. Aesthetics refers to the use of this size, which is perfect in 720 × 1280, and clear in 1080 × 1920. economy means that, the size of the exported image at this resolution is moderate, the memory consumption is not too high, and the image file size is moderate, and the installation package is not too large. The computation is simple, that is, 1dp = 2px. How good is the computation!

Make sure that the interface engineer is placed in the resource folder of drawable-xhdpi.

6, Screen width and height differences

To plot in 720 × 1280, consider backward compatibility with different screens. Through calculation, we can know that the screen width of 320x480 and 480x800 is 320dp, while the screen width of 720x1280 and 1080x1920 is 360dp. There is a 40dp gap between them, which has a great impact on the design of 40dp. For example, the distance between a butterfly image and the screen's left and right margins is different from that of a DP wide screen.

Not only is there a difference in width, but the difference in height is more obvious. For tool applications such as weather, because the interface is generally exclusive, the ratio difference between screens must be considered.

 

To eliminate these proportional differences, you can add a layout file. In general, the layout file is placed in the layout folder, if you want to adjust the 360dp screen separately, you can do a single layout file in the layout-w360dp; however, preferably the default screen layout for 360dp (more mainstream), and then separately layout the screen for 320dp, put the layout file in the layout-w320dp; if you want to adjust a special resolution, then you can place the layout file in a folder marked with a resolution, such as layout-854 × 480.

7, Several resource folders

Make an image in 720 × 1280 and put it in the resource folder of drawable-xhdpi so that it can be correctly displayed. I personally think it is enough to provide only one set of materials. I can test whether the application runs smoothly on low-end mobile phones. If it is slow, I can provide some mdpi image materials as needed, because images in xhdpi run on the mdpi mobile phone, they occupy memory.

Take the application icon as an example. The size of the xhdpi icon is 96px. If you want to provide the mdpi icon separately, the size of the icon is 48px and put it in the resource folder of drawable-mdpi. The image size in each resource folder also complies with the rule of ldpi: mdpi: hdpi: xhdpi: xxhdpi = 3: 4: 6: 8: 12.

If you make a 2x7 splitting material into a 9.png image, what if you want to make the thin lines 2px in different density instead of being scaled by Android? You can put the split line material in drawable-nodpi. The images in this resource folder will be displayed according to the actual pixel size, instead of being scaled by Android based on the density. In mdpi, the line is 2px (2dp), and in xhdpi, the line is 2px (1dp ).

The above is a preliminary summary of the android screen. I don't know if you are suddenly enlightened or confused after reading it? This article is intended for practical purposes and avoids in-depth analysis. If you have any questions, leave a message.

Finally, many of my friends asked me about the Android tablet design. The most talked about is the 1280x800 resolution. This resolution is usually 10.1-inch medium density screen, directly create a canvas of 1280x800 in PS, extract the extracted materials, and put them in drawable-mdpi. In addition, 1dp = 1px in the medium density flat, which is better than the conversion unit.

 

Beijing shangxuetao-cctv advertising partners, professional IT training institutions, best-of-mouth java training, iOS training, android training, hadoop big data training, web Front-end training institutions, 0 Yuan admission, payment after employment, with an average employment salary of more than 9500