As we all know, Android models have various sizes, so screen adaptation has become a very important part of Android development. Android screen adaptation may some developers encounter such problems. Today, I will share the screen adaptation. You will find that Android screen adaptation can be very simple.
basic concept
Some concepts that Android screen adaptation must understand Birds", once you understand and master these concepts, the screen adaptation will naturally feel much simpler.
- px
It is the abbreviation of the English word pixel, which means pixel, point on the screen. We usually refer to the resolution such as 480X800 refers to the pixel.
In the field of design, the pixel is the smallest unit used to calculate digital images. The image displayed in the computer is not composed of continuous lines, but is composed of many small dots that are invisible to the naked eye. If you magnify the image several times, you will find that these continuous tones are actually composed of many small dots with similar colors. These small dots are the smallest unit "pixels" that make up the image. Since it is the smallest independent display unit, px is an integer, and there will be no case of 0.5px. Such as:
Check out this colorful LED light (original size)
Can you imagine this is his true face? (after zooming in)
- in
Expressed in inches, it is the physical size of the screen. Each inch is equal to 2.54 centimeters. For example, we often talk about the size of the mobile phone screen, 5 (inch) inches, 4 (inch) inches refer to this unit. These dimensions are the diagonal lengths of the screen. If the screen of the mobile phone is 4 inches, it means that the diagonal length of the screen (viewable area) of the mobile phone is 4 X 2.54 = 10.16 cm.
- dpi
dpi is the abbreviation of Dots Per Inch, the number of dots per inch, that is, the number of pixels per inch. For example, a 320X480 resolution mobile phone is 2 inches wide and 3 inches high, and the number of pixels per inch is 320/2=160dpi (horizontal) or 480/3=160dpi (portrait), 160 is the dpi of this phone, This value is the same for both landscape and portrait orientations, because most mobile phone screens use square pixels.
- density
Screen density, the relationship between density and dpi is density = dpi/160
- dp
That is, dip, device independent pixels, abbreviation for device independent pixels, Android-specific units, on a screen with a screen density of dpi = 160, 1dp = 1px.
- sp
Similar to dp, it is generally used to set the font size. The difference from dp is that it can be scaled according to the user's font size preference.
Android Drawable
After we create a new Android project, we should see many drawable folders, corresponding 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)
Most of the Android tutorials on the market teach to create a set of image resources for each dpi. This is certainly a solution, but it is also a very stupid method, which adds a lot to the art or design. Not to mention the workload, it will also make your apk package very large. So is there any good way to not only ensure screen adaptation, but also minimize design resources, and at the same time, it is best to use only one set of dpi image resources? The following will explain the method summarized in the project.
First of all, you must be clear about the concept of automatic rendering. The Android SDK will automatically select the corresponding resource file for rendering. If the SDK detects that your mobile phone dpi is 160, it will give priority to the drawable-mdpi folder to find the corresponding image resources. Note that only First, assuming that your mobile phone dpi is 160, but you only have the corresponding image resource files in the xhpdi folder, the program can run normally. So in theory, it is ok to provide only one type of picture resource. If you only provide pictures of ldpi specifications, if you enlarge the picture for a large-resolution mobile phone, the picture will not be clear, so you need to provide a set of maximum size that you need to support dpi pictures, so even if the user's mobile phone resolution is small, the picture is still very clear when reduced.
xhdpi becomes the first choice
As mentioned above, you only need to provide a set of large dpi pictures. Now the maximum resolution of mobile phones on the market can reach 1080X1920 resolution. For example, Nexus5, dpi belongs to xxhdpi, but after all, it is not yet popular. Currently, the most common high-end mobile phones on the market The resolution of the machine is mostly concentrated in the range of 720X1080, that is, it is mostly concentrated in xhdpi, so at present, the picture of xhpdi specification has become the first choice. Of course, with the improvement of technical specifications and development in the future, xxdpi mobile phones may become more and more common in the market in the future, but this is another story.
What should I do if design resources are tight?
In the current App development, there are basically both iOS and Android versions. In order to keep the experience and interaction of different versions of the App consistent, some companies may have limited design resources. In these cases, the iOS and Android versions are basically a designer-led version. , and in most cases, the designer may be more based on the iPhone, including the later cuts and the like. At this time, as an Android developer, do you still ask the designer to cut a set of image resources for the Android side? This will crash your designers, so here's a better way to summarize in a project.
I believe that designers generally use the latest iPhone 5 (the size and resolution of the 5s and 5 are the same) for prototype design, and the screen resolution of the iPhone 5 is 640X1164 and the screen size is 4 inches. According to the Pythagorean theorem (a^2 + b^2 = c^2)640^2+1164^2=1764496, then take the square root of it to get the resolution of the screen diagonal: 1328, divide by 4 to get the dpi of iphone5: 1328/4≈332 It can be seen that the dpi of the iPhone5 screen is about 320, which just belongs to xhdpi, so you can be proud to say that you don't need to cut the picture for the Android side, just cut the set of the iPhone. The image resources are placed in the drawable-xhdpi folder and it is ok.
wrap_content VS dp
Both wrap_content and dp should be used frequently in Android development, and then they are somehow related.
Assuming that after reading this article, you have unified xhdpi resources, then you have no problem with wrap_content, and Android will automatically adapt to other dpi screens. For example, if you put a 120X120px image in xhdpi, then Only 120/2*1.5=90px is displayed on the hdpi screen, but if you accidentally put this image into mdpi, there will be problems with wrap_content display at this time, see the following example for details :
For example, if you only put the test image in the drawable_xhdpi folder, the xhdpi device will go to the xhdpi folder to find the test image and display it directly, while the mdpi device will first go to the mdpi folder to find the test image, but it is not found. Find it in the xhdpi folder, and then it will be automatically calculated and scaled according to density, and the actual displayed size is 120/2=60px, so the overall display ratio will look normal.
- mdpi
- xhdpi
But if you also 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 display it directly, and the display will not be scaled at this time, the actual display size is 120X120, It will look larger on the mdpi screen, as shown in the figure:
Through the whole process above, you should understand the whole process of Android loading resources, wrap_content can also be replaced by dp, take the above example, put a 120X120 pixel test image in the xhdpi folder, directly divide the width and height Density gives the value of dp, that is, the following codes are equivalent in this case.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/test" /><ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/test" />Summarize
I believe that through the above explanation, I have a good understanding of some basic concepts in Android UI, and there are some efficient methods for reference in actual development work, which 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 examples will be given for some special requirements in the future.