Copyright Notice:

This account published articles are from the public account, Chengxiang Moying (cxmyDev), chengxiang Moying all rights reserved.

Every week will be uniformly updated here, if you like, you can follow the public account to get the latest article.

Shall not be reproduced without permission.

I. UI adaptation for multiple models

UI adaptation is one of the most important things in Android development. Generally develop new features, have a new page, the final development is completed before release, need to let the designer to review the UI effect.

And sometimes, obviously we have achieved a satisfactory effect on a standard 3x mobile phone, but when we change to another mobile phone, the effect is not so satisfactory.

The traditional approach is to take the wrong phone, adapt it individually to see if there is anything wrong with the layout that makes it look wrong, and then correct it. But there are always situations where we can’t get the real thing.

This article introduces a command that can modify the parameters of your current device to simulate the display effect of the target device, allowing you to independently verify the effects of multiple models of UI.

2. WM Command

2.1 What is WM command

All you really need is a single WM command, which can be manipulated by the ADB shell.

The WM command is mainly used to help us modify some screen parameters. Take a look at its documentation first. Use the ADB shell WM command to view the wm documentation

/wm-doc.png

As can be seen, the WM command can help us modify the size, density and other parameters of the current device, which determine the display effect of the current device.

2.2 The command of WM

As can be seen from the above document, it actually supports a lot of commands, but some are not useful at all, is the need for system permission, so normally we can not use it. So, here are a few more useful commands.

The following examples were run on a standard density 3 device with a screen pixel of 1080px by 1920px.

1, wm size

The wm size command is used to query and change the size of the current device. If you want to change the size of the device, you can use the unit px or dp (default px) and use x to connect the device.

/wm-size.png

In this example, several things are done:

  1. usewm sizeCommand to view the size of the current device.
  2. usewm sizeCommand to change the current size to 1000×2000.
  3. Again usingwm sizeCommand to view the size of the current device.
  4. Finally usingwm size resetCommand to restore the screen size.
  5. Then usewm sizeCommand to view the restored size.

These steps cover all the steps of using the WM Size command, which allows you to view the current screen size, modify the screen size and restore it.

2, wm density

The WM density command is used to view and modify the density of the current device.

Very simple to use, directly on the command.

/wm-redensity.png

In this example, I did a few things:

  1. usewm densityView the density of the current device.
  2. In the use ofwm densityCommand to change the density of the current device to 420.
  3. And then use itwm densityView the modified parameters.
  4. Finally usingwm density resetRestore the density of the device.
  5. Finally take a look at the restored values.

3, wm overscan

The WM overscan command to modify the inside screen margin of the current device. I don’t think this command is useful, but I’ll show you how to use it.

/wm-overscan.png

In this example, several things are done:

  1. usewm overscanChange the margin to 20.
  2. Then use thewm overscan resetRestore it.

2.3 Principle of WM Command

The logic of the WM command is very simple. It actually interacts with WindowManagerService to modify screen parameters via WMS.

Here will not introduce the complete WM source code, with a method for example to look at the WM logic. Take the WM size command as an example.

First, take a look at the entry to the WM command.

/wm-onrun.png

Here mWm is initialized and different methods are called depending on the input parameter, if size is entered, the runDisplaySize() method is called.

/wm-rundisplaysize.png

In the runDisplaySize() method, it determines whether the size command is followed by any other parameters. If not, it is considered a query operation and the query result is printed.

And if is reset method, w, h the two representative wide high value, is set to 1, will eventually through mWm. ClearForcedDisplaySize () method, which will be the size of the screen.

Otherwise, divide the input parameters by X to get the width and height we input. Finally, the mwm.setForcedDisplaySize () method is used to change the size of the current screen to the result we entered.

When setting the size, the input size is recalculated using the parbirens () method.

/wm-parsedimens.png

As you can see from this, it supports two sizes, px and dp. If the size is not specified, the default is PX.

Here is completed a wm size command, modify the device screen parameters of the whole process, with more details can consult the source code.

Source code online address:

Androidxref.com/7.1.1_r6/xr…

3. Implement modification of equipment parameters

Now that we’ve covered all the details of the WM command, we just need to get the size and density of the devices we need to adapt. We can simulate the effect on our own devices.

Here I have collected some commonly used device parameters for your reference.

  • Meizu MX3:440,1080 x1800
  • One plus 5:420, 1080×1920
  • Redmi NOTE 320,720 x1280
  • Huawei MATE7, 480,1080 x1812
  • Moto-g5, 480,1080 x1920
  • Moto-tx1095, 432,1080 x1790
  • Nexus5x, 420,1080 x1794
  • Nexus6p, 560,1440 x2392
  • Qiku 360,460,1080 x1920
  • VivoX5, 320,720 x1280

Of course, the most important thing is to get the phone parameters that are being used by various CEOS, Ctos and CXOS of the company and make a wave of adaptation, haha.

Now, let’s modify the parameters of two devices randomly and see the effect after operation.

The command is as follows:

// Change to 1 + 5

adb shell wm density 420

adb shell wm size 1080×1920

// Change to Moto-TX1095

adb shell wm density 432

adb shell wm size 1080×1790

Below, from the right, are the original size, one plus 5, MoTO-TX1095.

/wm-demo.jpg

It doesn’t look very different, just that the desktop layout is well written, so if the layout is well written, you can avoid the problem of looking significantly different on different devices, as it does now.

Four, digression

In fact, the WM command also has some other problems, for example, sometimes when the WM command is used to modify the UI, the refresh will be delayed, so choosing a mobile phone with better performance is a way to alleviate the problem. Or after modifying the parameters, exit the App and re-enter is also a good way.

If you adjust it to a too special parameter, such as 200×1000, it might render strange. However, if you only modify some common equipment parameters, as long as the modified values are within a reasonable range, it is generally ok.

Qr code. JPG

Like it or share it