Turn: Screen fit

Turn from: here

As is known to all, the Android model has a variety of sizes, so screen adaptation becomes an important part of Android development. Android Screen Adapter Maybe some developers will encounter this problem, today to share the next screen adaptation, you will find that the Android screen can be very easy to match.

Basic concepts

Android screen adaptation must be understood some concepts, this part may be more boring, but as the saying goes, "工欲善其事, must first sharp weapon", translation comes to be "What kind of gun, decide what kind of bird you play", once these concepts you understand mastered, screen adaptation you naturally feel much simpler.

• Px

is the abbreviation for the English word pixel, which means pixels, dots on the screen. The resolution we usually refer to as 480x800 is the pixel.

In the field of design, pixels are the smallest unit used to calculate digital imagery. The images displayed in the computer are not composed of contiguous lines, but are made up of a number of invisible dots. If you enlarge the image several times, you will find that these continuous tones are actually composed of a number of small dots of similar color, which are the smallest unit "pixels" that make up the image. Since it is the smallest independent display unit, PX is an integer and does not appear to be 0.5px. Such as:

Look at this brightly coloured LED light (original size)

Can you imagine this is what he really is? (after zooming in)

• Inch

Represents inches, which is the physical size of the screen. Equal to 2.54 centimeters per inch. For example, we often say that the size of the mobile phone screen, 5 (English), 4 (English) inches refers to this unit. These dimensions are the diagonal length of the screen. If the phone's screen is 4 inches, the diagonal length of the phone's screen (viewable area) is 4 X 2.54 = 10.16 centimeters.

• Dpi

DPI is the abbreviation for dots per inch, in dots, which contains the number of pixels per inch. such as the 320x480 resolution of the phone, 2 inches wide, 3 inches high, the number of pixels per inch is 320/2=160dpi (landscape) or 480/3=160dpi (portrait), 160 is the dpi of the phone, landscape and portrait of this value is the same, The reason is that most phone screens use a square pixel point.

• Density

Screen density, density and dpi are density = dpi/160

• Dp

Also known as dip, device independent pixel, devices independent pixels abbreviation, Android Special Unit, on screen density dpi = 160 screen, 1DP = 1px.

• Sp

and DP very similar, generally used to set the font size, and DP is the difference is that it can be based on the user's font size preference to zoom.

Android drawable

When we create a new Android project, we should be able to see many drawable folders that correspond to different dpi

• DRAWABLE-LDPI (dpi=120, density=0.75)

• DRAWABLE-MDPI (dpi=160, Density=1)

• DRAWABLE-HDPI (dpi=240, density=1.5)

• DRAWABLE-XHDPI (dpi=320, density=2)

• DRAWABLE-XXHDPI (dpi=480, density=3)

Some of the most Android tutorials on the market are teaching for each DPI is a set of picture resources, this is a solution, but also a very stupid method, for art or design to add a lot of work not to say, but also will make your APK package is very big. So is there any good way to ensure that the screen is adaptable, but also to minimize the use of design resources, and preferably only a set of DPI image resources? Here's how to summarize the project.

First of all, it must be clear that an automatic rendering concept, the Android SDK will automatically screen size to select the corresponding resource file for rendering, such as the SDK detects that your phone DPI is 160 will take precedence to the drawable-mdpi folder to find the corresponding image resources, attention is only a priority, Suppose your phone dpi is 160, but you only have the corresponding picture resource file under the Xhpdi folder, the program can run as normal. So theoretically only need to provide a specification of the picture resources is OK, if only to provide ldpi specifications of the picture, for large-resolution phone if the picture will not be clear, so need to provide a set of the maximum DPI you need to support the picture, so that even if the user's phone resolution is very small, So the picture shrinking is still very clear.

XHDPI become the first choice

Above said that only need to provide a large set of DPI picture is OK, now the market resolution of the largest mobile phone can reach 1080x1920 resolution, such as nexus5,dpi belongs to xxhdpi, but after all, not universal, At present, the most popular high-end machine in the market resolution is more concentrated in the 720x1080 range, that is, more concentrated in the xhdpi, so the current look at XHPDI specifications of the image became the first choice. Of course, with the development of technical specifications, the future may be the market xxdpi mobile phones will become more and more common, but this is something.

What about design resource constraints?

In today's app development, there will basically be iOS and Android versions, some companies to keep the different versions of the app to interact with each other, and some of the company's design resources may be more nervous, in these cases, iOS and Android version is basically a designer-led, In most cases, designers may be more likely to design on the iphone, including late-transduction and the like. At this time, as an Android developer, do you also ask the designer to cut a single set of picture resources for Android? This will break your designers down and let's tell a better way to summarize the project.

It is believed that designers will generally use the latest IPhone5 (5s and 5 size and resolution are the same) to do the prototype design, and iPhone5 screen resolution of 640x1164, screen size of 4 inches, according to the Pythagorean theorem (a^2 + b^2 = c^2) 640^2+1164^2= 1764496, and then open the square root of the screen to find the resolution of the diagonal: 1328, divided by 4 can be obtained iphone5 dpi:1328/4≈332 can be seen IPhone5 screen dpi is about 320, just belong to XHDPI, So you can be very proud like your designers say not specifically for the Android side transduction, directly to the iphone's set of cut picture resources into the drawable-xhdpi folder is OK.

Wrap_content VS DP

Wrap_content and DP are often used in Android development, and then they are related.

Assuming you read this article are unified with XHDPI resources, then you use wrap_content completely no problem, Android will automatically for other specifications of the DPI screen adaptation, such as you put a 120x120px-size picture in xhdpi, Then on the hdpi screen is only 120/2*1.5=90px size, but if you accidentally also put the picture into the mdpi, this time with the wrap_content display will have a problem, specifically see the following example:

For example, if you just drop the test picture in the drawable_xhdpi folder, xhdpi device will go to xhdpi folder to find the test picture and directly display, and MDPI device first will go to mdpi folder to find the test picture, but did not find, Finally found under the Xhdpi folder, and then automatically based on the density calculation and zoom display, the actual size of the display is 120/2=60px, so the overall display scale will look more normal

• mdpi

• xhdpi

But if you put the same picture in the MDPI folder, then the MDPI device will go directly to the MDPI folder to find the test picture, and directly display, and this time the display will not scale, the actual display size is 120x120, on the mdpi screen will look larger,

Through the whole process above, we should understand the entire process of Android loading resources, Wrap_content can also use DP to replace, take the above example, in the xhdpi folder put a 120x120 pixel test picture, The width of the high directly in addition to the density to derive the DP value, that is, in this case the following code is equivalent.

 <imageview android:layout_width= "Wrap_ Content "android:layout_height=  "wrap_content" android:src=< span class= "s2" > "@drawable/test" />         

<ImageView    android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/test" />

Summarize

I believe that through the above explanation, some basic concepts in the Android UI have a good understanding of the actual development work there are some efficient methods can be consulted, should be able to deal with most of the screen adaptation work. However, there are still some special adaptation requirements in the project that cannot be met and will be explained in the future for some special needs.

Turn: Screen fit