preface

First of all, let me make it clear that this is not a new screen adaptation scheme. The adaptation principle is SmallWidth, and as the name suggests, hopefully this framework adaptation will make SmallWidth adaptation easier.

The project address

Github.com/xiaolutang/…

Brief introduction of the principle of screen adaptation

In 2018, today’s Tiaotiao announced their screen adaptation scheme, followed by other big names also published related articles on screen adaptation, and JessYan also released the tiaotiao scheme adaptation framework, which greatly helps Android developers to be more easy to implement screen adaptation. In all the screen adaptation scheme, the generally accepted good screen adaptation scheme is based on SmallWidth SmallWidth and based on the headline adaptation scheme AndroidAutoSize.

We all know that the display of a phone screen is pixel by pixel, but Android doesn’t recommend using px to mark UI sizes. Because different phones have different resolutions. The same pixels appear smaller on higher resolution phones.

Android recommends using DP for screen adaptation.

So what is DP?

For example, on a lower resolution phone, it might be 1dp=1px, and on a higher resolution phone, it might be 1dp=2px. In this case, a 96*96dp control, The same size can be seen in different phones.

The relationship between DP and PX

We all know the formula: px = DP (dpi/160) and the system uses this to determine the mathematical relationship between PX and DP,

So here’s another problem,

What is DPI?

Dpi is the pixel density, which refers to the number of pixels per unit size specified on the system software and is often a fixed value written in the system’s factory configuration file.

Dpi is calculated as follows:

The DP of the system can solve most of the problems, but the DPI of the system may be different due to different phone manufacturers. In order to solve the adaptation problem of different DPI phones with the same width and pixels, we need to use the screen adaptation solution.

SmallWidth Adaptation solution

SmallWidth Searches for the closest DiMen resource based on the current device width from large to small. Assume that sw361DP and SW350DP exist in the current device width 360DP. Even though the SW361DP is close to the 360dp width of the device. Sw350dp resources will also be used

SmallWodth is an equal scale adaptation scheme. Assuming we have a design width of 360dp, how do we write the values in the 360dp Dimens? In our design, 360DP can cover the full screen, so 350DP can cover the full screen now.

That is: if the dimen value of 350 /350 = 360Dimen value of 360 then they are in the same proportion on different devices and the UI looks the same. In other words the value in SW XXXdp = XXX/ design target size.

Taking the most SW360DP as an example, the dp in SW360 is 10

How much DP is used in SW350? = 10 * 350/360 = 9.72dp

How much DP is used in SW400? = 10 * 400/360 = 11.11dp

SmallWidth pros and cons:

Advantages: Stable, no performance loss to app, controllable adaptation range, will not affect other third-party libraries

Disadvantages: Dimens has high maintenance cost; The scheme is intrusive. It is very troublesome to switch the adaptation scheme; This increases the size of the app.

Toutiao screen adaptation scheme

Toutiao adaptation can be said to be the ultimate application of screen adaptation. The principle is as follows. If you want the UI on a design drawing to look the same on all devices, scale it to size or height. I need this equation to be true.

For example, using width as a reference:

Design drawing size X(in dp)/ Design drawing Width DW (in DP) = Actual UI usage Y (in px)/Screen width W(in px)

We know that in Android, the actual pixel of the UI is y = X * device independent density M

So the top equation can be converted to

X / DW = M * X / W

In this way, the adaptation formula M = W/DW of the headline can be obtained

That is, the total width of the current device screen (in pixels)/the total width of the design (in dp) = Density

The advantages and disadvantages:

Advantages: Low cost, one-click access. There is no performance loss.

Disadvantages: Not good for the three-party library compatibility.

SmallWidth vs. AndroidAutoSize

Adaptation scheme/contrast Angle SmallWidth AndroidAutoSize
The stability of The adaptation is very stable based on the system principle By modifying the device independent density to adapt, because it is a public API, anyone can change, there is a certain risk. But as the framework evolves. Basically, you can ignore the effect of this on screen fit
maintenance At one point, the dimen value is increased or modified, and multiple files need to be maintained In the case of few third-party libraries used, maintenance is simple if there are more third-party libraries. Maintenance difficulties
Compatibility with the three-party library The adaptation scope is controllable, and will not affect the three-party library Unless the third party library and their own design drawing size is the same or incompatible with the third party library
performance Many adaptation files will be added, which will increase the size of the app Basically no impact

As you can see, AndroidAutoSize still has a significant advantage over SmallWidth, which is great if you’re using less third-party libraries. But as the authors of AndroidAutoSize point out, incompatibilities can be catastrophic if you use more three-party libraries.

disadvantages

No other obvious disadvantages have been found yet. There is one known disadvantage, and that is the third advantage. It is both the advantage and the disadvantage of this scheme, but this one disadvantage is also very fatal

If you only need to modify the density once, all places in the project will automatically adapt. This seems to free hands and reduce a lot of operations, but actually reflects a disadvantage, that is, the whole project can only be adapted at one time, but the scope of adaptation is not controllable

Isn’t that great? It would have been very good, but is applied to the solution is not good, because I also analyzed the above principle, the solution depends on the design size, but the project system controls, tripartite library controls, such as not our own design controls, their design size and will not own design our project size

When the adaptation scheme regardless of type, all controls are forced to use our own design drawing size adaptation, then there will be a problem, when a system control or three party library control design drawing size and our own design drawing size gap is very large, this problem is more serious

In other words, SmallWidth is recommended when using more three-party libraries, otherwise AutoSize is recommended.

EasySmallWidth

Through the above comparison, we find that it is almost impossible to choose AndroidAutoSize when using more three-party libraries. We can only use SmallWidth, so do we have to accept all the disadvantages of SmallWidth?

One of our biggest problems with SmallWidth is the difficulty of maintenance. And EasySmallWidth is to solve the problem of SmallWidth maintenance.

EasySmallWidth principle

AndroidStudio is packaged through Gradle, which goes through three stages: Initialization, Configuration, and Execution. In configuration, the configuration of all projects is read and the final phase diagram of Gradle TASK execution is generated. EasySmallWidth is to insert a custom Task after Gradle reads the configuration of the project, before generating the phase diagram, so that we need the Dimens file, before building Apk. By watching Gradle package tasks that generate APK, both Android Library and Android Application preBuild tasks before executing them. So EasySmallWidth picks PreBuild as the insertion point. Perform adaptation.

EasySmallWidth configuration items

attribute role The default value
enableAdapter Whether to enable adaptation true Enables adaptation. False Disables adaptation true
defaultDesignWidth Default design drawing width 360f
resPath Res The path relative to the current module. The system will find the default dimen file based on the res, and then create the values- SWXXXDP file in this path. Consider that projects may migrate from Eclipse. Add this configuration item /src/main/res/
needToAdaptedWidth You need to add the minimum width to fit Set with size 0
conversionMap By default, this parameter is not required for the Dimens file that needs to be converted. Empty map with Integer as Key and Float as value

EasySmallWidth includes secondary configuration, general configuration, module configuration. For detailed configuration, refer to step3 of using EasySmallWidth. When no module configuration is available, the overall configuration is used.

The use of EasySmallWidth

step1:

Add the following code to the root directory of build.gradle

classpath 'com. TXL. EasySmallWidth: EasySmallWidth: 1.0.0'
Copy the code

Step2: Introduce the plug-in

Project entry to introduce plug-ins,EasySmallWidth will automatically traverse all modules of the current project and add adaptation tasks for it, so there is no need to repeat reference plug-ins in each module

apply plugin: 'BuildAdaptionPlugin'
Copy the code

After the plug-in is successfully introduced, you can see the task that EasySmallWidth adds for each module to create and delete the adaptation file

If Android Studio does not display task, reset the following properties

Step3: add configuration items

adaptionAppExtension{
    defaultDesignWidth = 360f  // The default layout width is 360dp
    enableAdapter = true // Enable screen adaptation
    needToAdaptedWidth.add(400) // Values -sw400dp will be created if the minimum width is 400dp
    needToAdaptedWidth.add(411) // Values -sw411dp will be created if the minimum width 411dp is required
    needToAdaptedWidth.add(441) // Create values-sw441dp to fit the minimum width 441dp
// The res path is not configured by default
// resPath = "${File.separator}src${File.separator}main${File.separator}res${File.separator}"
    
    // Create a separate configuration for the testAutoBuildDimen module
    def ex = createBuildAdaptionPluginExtension(project,adaptionAppExtension,"testAutoBuildDimen")
    // Convert the module testAutoBuildDimen sw400 to the actual value *1.0
    ex.conversionMap.put(400.1.0f)
    // Convert the module testAutoBuildDimen sw400 to the actual value *2.0
    ex.conversionMap.put(411.2.0f)
    // Convert the module testAutoBuildDimen sw400 to the actual value *3.0
    ex.conversionMap.put(441.3.0f)
    def aeasy = createBuildAdaptionPluginExtension(project,adaptionAppExtension,"aeasybuild")
    // The default width of the aEasy module is 375dp
    aeasy.defaultDesignWidth = 375f
}
Copy the code

Verify EasySmallWidth

Compile directly through Android Studio, and the corresponding Dimens file will be generated under the corresponding module

App module:

Sw400dp dimen = 400/360 * SmallWidth

Aeasybuild module:

Sw400dp dimen = 400/375 * SmallWidth = 375dp

TestAutoBuildDimen module:

Why is the value of this module not smallWidth? Because we did a custom transformation on it during the previous configuration, SW400 is 1.0 times the design drawing

EasySmallWidth demo

Address: github.com/xiaolutang/…

EasySmallWidth features

Disadvantages:

  1. Because of SmallWidth adaptation, it does not solve the problem of generating more files for adaptation.

Advantages:

  1. Code is less intrusive
  2. High stability of adaptation based on system principle
  3. Easy to switch the adaptation scheme, and AndroidAutoSize adaptation scheme can be seamlessly switched
  4. Good compatibility, no conflict with third-party library adaptors (not compatible with AndroidAutoSize)
  5. Flexible adaptation can be implemented for each module.

It can be said that EasySmallWidth as an upgraded version of SmallWidth, the main responsibility is to solve the problem of SmallWidth maintainability and code intrusion.

Matters needing attention

  1. EasySmallWidth In order to facilitate users to switch adaptation scheme (mainly AndroidAutoSize), when executing the clean task will delete the adaptation file under each module, if you want to buy a special treatment, need to save in advance
  2. EasySmallWidth compatible tripartite library is a compatible third party using SmallWidth principle for adaptation of the tripartite library, it is not compatible with AutoSize.

Suggestions on the adaptation of the three-party library

Because of the incompatibility between the popular AutoSize and SmallWidth, it is recommended that the three libraries do not perform screen adaptation, publish their own design sizes to the public, and do not send the default dimen file. The specific adaptation work is left to the developer to choose.

Article reference:

Android’s current stable and efficient UI adaptation solution

It’s time to upgrade your screen adaptation. -SmallestWidth Indicates the adaptive solution of the qualifier

It’s time to upgrade your screen adaptation. – Toutiao adaptation scheme

Developer. The android. Google. Cn/guide/topic…