A very easy to use Android screen adaptation

There are so many articles about screen adaptation on the Internet, why should I talk about it? Because now the Internet is basically adapted with screen resolution qualifiers, that is, each device with screen resolution needs to define a set of dimensions. xml.xml files. Because there are too many devices with different resolutions, and some devices have virtual keys (such as Huawei mobile phones), you need to add an extra set of dimens.xml files to each device with virtual keys. You will find that the size of the dimens.xml file on the tablet has exceeded 2M! This is definitely not what we want.

What I want to say here is to use SW

I won't explain why screen adaptation is needed, and what are the concepts of dp and dpi. There are many articles on the Internet. Here I recommend some good articles:

The adaptation of screen resolution qualifiers requires the creation of values-xxx folders corresponding to various screen resolutions under the res folder, as shown in the following figure:

Then according to a reference resolution, for example, the reference resolution is 1280x720, the width is divided into 720 parts, the value is 1px~720px, the height is divided into1280px, and the value is 1px~ 1280px. The following are horizontal dimens.xml files with resolutions of 1280x720 and 1920x 1080 respectively:

Suppose the width of the last control is 720px, then the layout says Android: layout _ width = "@ dimensionn/x720". When running the program, the system will look for the corresponding dimensions.xml file according to the resolution of the device. For example, when running on a device with a resolution of 1280x720, the system will automatically find the corresponding lay_x.xml file in the values- 1280x720 folder. As can be seen from the above figure, the corresponding value of x720 is

720.px, which can disperse the screen width. Running on the equipment with the resolution of 1920x 1080, the system will automatically find the corresponding lay_x.xml file in the folder values- 1920x 1080. As can be seen from the above figure, the corresponding value of x720 is 1080.0px, which can cover the screen width. This meets the requirements of screen adaptation!

The adaptation principle of smallestWidth qualifier is the same as that of screen resolution qualifier. The system looks up the corresponding dimensions.xml.xml file according to the qualifier. For example, if the program runs on a device with a minimum width of 360dp, the system will automatically find the corresponding dimensions.xml.xml file in the values-sw360dp folder. The difference is that the screen resolution qualifier adaptation is to scale the px value equally, while the smallestWidth qualifier adaptation is to scale the dp value equally. It should be noted that "minimum width" does not distinguish between directions, that is, whichever side is smaller, regardless of width or height, is regarded as "minimum width". The following are the dimens.xml files with minimum widths of 360dp and 640dp, respectively:

screen utils——& gt； ScreenUtils

Since the principle is the same and multiple sets of dimens.xml. XML. XML files are needed, why do you choose smallestWidth qualifier adaptation?

Most UI designers only provide a few design drawings, and the corresponding acquisition methods are as follows:

Of course, these files will not be written manually, and there is already a plug-in ScreenMatch provided by Great God on the Internet to automatically generate these files. But there is something wrong with this plug-in:

Based on the above problems, I optimized the source code of the plug-in and generated a new plug-in ScreenMatch. Since the plug-in library already has the plug-in of the original author, I will not copy the wheel and upload it to the plug-in library. It can be installed directly through local installation.

To use this tool:

Then select the module under which the adaptation is performed. That is, based on the module of RES/values/dimensions.xml file as the benchmark dimension.xml file, the generated dimensions.xml files of other sizes are placed in which module. For example, select app, and then click OK, and the following interface will appear, indicating that the file was generated successfully. As shown in the figure below:

Then look at the res directory, and a bunch of dimensions.xml.xml files will be automatically generated, as shown below:

Through the above steps, the files of dimensions.xml.xml corresponding to all devices have been generated.

In step 3, the default minimum width reference value of the plug-in is 360dp, and the minimum width of the adaptation device is

320,360,384,392.7272,400,465,438+00,465,438+065,438+0.4285,432,480,533,592,600,640,662,720,760.

For example, if the minimum width of a design drawing is 375dp, the minimum width reference value needs to be changed to 375dp. If the project only needs to adapt the mobile phone, then the minimum width of the adaptation equipment should be 320,360,384,392.7272,400,410,41.4285,432,480. If you find other minimum widths of your phone, please add them yourself.

The above changes need to be modified in the configuration file, that is, the screenMatch.properties file, which is automatically generated in the project directory after performing the above step 3. As shown in the figure below:

Open the configuration file and modify the values of 1, 3 and 4 in the figure below. (All units in the drawing are differential pressure)

1: minimum width reference value, just fill in the minimum width value of the design drawing.

2: The minimum width value that the plug-in adapts by default, that is, the dimens.xml file with the following value will be generated by default.

3: Minimum width value to be modified (if it is decimal, keep 4 decimal places. For example, 392.727272 ..., take 392.7272), which dimensions.xml.xml files to generate.

4. Ignore the minimum width value that does not need to be adapted, that is, ignore the dimensions.xml.xml file generated by the plug-in by default.

After modifying the configuration file, re-execute step 3 to generate a new dimension.xml.xml file.

Sure! If your design drawing is also a standard 360dp, then you can ignore the above steps. Just copy the files dimens.xml. XML needed on my github directly into your project, and you also need a copy in the default values folder.

How many dps are marked on the design drawing, how many dps are written on the layout, which is very convenient!

Most UI designers only provide a few design drawings, and the corresponding usage methods are as follows:

Speaking of which, there are actually only two simple steps:

Many people will definitely have questions. Can you write out the width and height directly after using this adaptation scheme? That's definitely not true. If you can do some useful adaptation skills, then don't write the width and height directly. This adaptation scheme plus the following adaptation skills can make your screen adaptation more perfect.

AbsoluteLayout directly uses x and y coordinates to control the position of the control. For today's screen fragmentation, using absolute layout is disastrous for screen adaptation, so Google gave up control.

RelativeLayout or ConstraintLayout are different. Relative layout child controls are arranged in a relative position. Even if the screen size changes, the relative position of the control will not change, which has nothing to do with the screen size and is very flexible. Constraint layout is similar, by constraining some controls to determine the position between them.

Nine patch pictures are specially processed PNG pictures. You can specify which areas can be stretched and which areas cannot be stretched. For example, the background picture of chat bubbles in the chat interface needs to be made into nine pictures, because the number of words in each message is not fixed. If the background image can't be scaled with the number of words, it will lead to the distortion of the background image.

Because all kinds of screen aspect ratios are not fixed, such as 16:9, 4:3, 19.5:9 for full screen and so on. If the width and height are forced to adapt, it will only lead to layout deformation.

For example, a control with a width of 360dp and a height of 640dp will normally cover the whole screen if it is displayed on a device with a width of 360dp and a height of 640dp, but it cannot cover the height on a device with a width of 360dp and 780dp. If you cover the height and keep the width the same, there will be deformation. Therefore, this is why the screen adaptation scheme on the market at present can only be adapted in one dimension of width or height, and the other directions can be adapted by sliding or weighting.

Then why do you say that height can also adapt?

The height adaptation mentioned here refers to the adaptation of equal scaling on mobile phones with different resolutions and densities, and other screen adaptation schemes are the same.

Note: The adaptive effect of the smallestWidth qualifier is to enable devices with different resolutions and densities to scale according to the design scale. If the equipment is too different from the design, it will not achieve a good adaptation effect, and it needs to be plotted separately, as do other screen adaptation schemes.

Like the horizontal screen, the gap between the width and height of flat panel and TV and mobile phone is too big. If you want to make the flat panel and TV completely compatible, you can only ask the designer to draw a set of design drawings for the flat panel and TV, and then write a set of layout files for the flat panel and TV respectively.

Note: Similarly, the adaptive effect of the smallestWidth qualifier is to enable devices with different resolutions and densities to scale according to the design ratio. If the equipment is too different from the design, it will not achieve a good adaptation effect, and it needs to be plotted separately, as do other screen adaptation schemes.

Github address: ScreenAdaptation

References: