The original address: www.jianshu.com/p/55e0fca23…

Here’s how to upgrade your screen adaptation this year! Welcome to repost and share:

  • It’s time to upgrade your screen adaptation. (I) – Toutiao adaptation scheme
  • It’s time to upgrade your screen adaptation. (2) -smallestWidth qualifier adaptation solution
  • Toutiao screen adaptation ultimate version officially released!
  • Why is the design of AndroidAutoLayout wrong?

Join technical exchange QQ group 455850365

preface

Screen adaptation has been getting a lot of exposure in Android tech circles this month. Why? Because this month has a number of big guy published the screen adaptation related articles, announced their own recognition of the screen adaptation scheme

The week before last, Mr. Blankj published an article in support of toutiao’s screen adaptation solution, proposing a number of optimized solutions and opening the relevant source code

Last week, Mr. Radin Wu published an article on the public account of hongshen, describing in detail several mainstream screen adaptation schemes in the market, and published his smallestWidth qualifier adaptation scheme and related source code (in fact, published long ago), the article is written very well, I suggest you go to see

In fact, what everyone pays the most attention to is not how many screen adaptation schemes there are on the market, but which screen adaptation scheme should be selected for their own project. It can be seen that the two teachers finally choose different screen adaptation schemes

I will analyze the following analysis, I as a contact with the two screen adaptation scheme of the people, HOW do I verify the two screen adaptation scheme is feasible, and how to choose a most suitable for their own project screen adaptation scheme according to their advantages and disadvantages

This is the screen adaptation frame I recommend to you, originally wanted to put it in the end as a benefit, afraid that you will not see, so I put the link here, advance to you

Github: Your Star is what keeps me going ✊

Discussion on adaptation Scheme

In Radin Wu’s article, he talked about two classic screen adaptation solutions, which impressed me very much. I think most brothers have used them, and I have used them for a long time in my development career

The first is width-height qualifier fit, what is width-height qualifier fit

├ ─ ─ SRC/main │ ├ ─ ─ res │ ├ ─ ─ ├ ─ ─ values │ ├ ─ ─ ├ ─ ─ values - 800 x480 │ ├ ─ ─ ├ ─ ─ values - 860 x540 │ ├ ─ ─ ├ ─ ─ values - 1024 x600 │ ├ ─ ─ ├ ─ ─ values - 1024 x768 │ ├ ─ ─ ├ ─ ─... │ ├ ─ ─ ├ ─ ─ x1440 values - 2560Copy the code

Is this, under the resource file to generate different resolution of the resource file, and then in the layout file reference to the corresponding Dimens, we must still have an impression

The second is AndroidAutoLayout

The two schemes have been gradually withdrew from the historical stage, why we all know that, don’t know advice Tin oo teacher’s article, so these two kinds of schemes not elaborated in the article, I mainly talk about two of the most mainstream now screen adaptation scheme of today’s headlines adaptation scheme and smallestWidth qualifier adaptation scheme

I suggest that if you are not clear about these two solutions, you should first read these two articles to understand what I am talking about. Later, I will explain their principles and verify whether these two solutions are really feasible. Finally, I will conduct in-depth comparison with them and give corresponding solutions to some of their shortcomings

Toutiao screen adaptation scheme

The principle of

Has told above, do not understand the two schemes of first take a look at the above two articles, so here I am assuming that you’ve looked at it before they learned about the two solutions, or so in this article I will no longer in this paper, the DPI, Density and some of the more basic knowledge, the article has elaborated above is clear enough

The core principle of Jinri Toutiao screen adaptation scheme is to calculate density according to the following formula

Current screen width (in pixels)/Design drawing width (in DP) = Density

Density means how many pixels one DP occupies on the current device

Why do we figure it outdensityWhat does this have to do with screen adaptation?

public static float applyDimension(int unit, float value, DisplayMetrics metrics) { switch (unit) { case COMPLEX_UNIT_PX: return value; case COMPLEX_UNIT_DIP: return value * metrics.density; case COMPLEX_UNIT_SP: return value * metrics.scaledDensity; Case COMPLEX_UNIT_PT: return value * metric.xdpi * (1.0f/72); case COMPLEX_UNIT_IN: return value * metrics.xdpi; Case COMPLEX_UNIT_MM: return value * metric.xdpi * (1.0f/25.4f); } return 0; }Copy the code

Everyone knows that whatever units you fill in the layout file will be converted to PX, and that’s how the system converts any units you fill in anywhere in the project to PX, right

Therefore, the commonly used formula dp = px/density is derived from the above method, and density plays a crucial role in the calculation of the formula

In order to understand the following content, also have to understand, Toutiao adaptation mode, the default project of Toutiao adaptation can only be based on one of the height or width, why not like AndroidAutoLayout, the height is based on the high, width is based on the wide, at the same time to adapt

This brings us to a tricky issue that most Android devices on the market have inconsistent aspect ratios, especially with the advent of a large number of all-screen phones, which can vary from manufacturer to manufacturer

At this time, we only use one of the height or width as a reference to adapt, will effectively avoid the layout on the inconsistent aspect ratio screen deformation problem

Density is fixed on each device, DPI / 160 = DENSITY, and total screen PX width/density = total screen DP width

  • Device 1, screen width is 1080px, 480DPI, screen total DP width is 1080 / (480/160) = 360dp

  • For device 2, the screen width is 1440,560 DPI and the total screen dp width is 1440 / (560/160) = 411DP

You can see that the total DP width of the screen varies from device to device, but the VALUE of THE DP we fill in for the layout is fixed

What does that lead to? Let’s say we have a View with a width of 100dp in our layout. On device 1, the width of this View is 27.8% (100/360 = 0.278) of the entire screen.

However, in device 2, the width of this View can only account for 24.3% of the entire screen width (100/411 = 0.243). You can see that on the screen with higher pixels, the value of DP of this View remains the same, but the actual proportion of the View to the screen changes greatly, so the naked eye viewing effect. Will be smaller and smaller, which leads to a large error in the traditional screen adaptation method of filling in DP

In order for this to fit perfectly, we need to make sure that the View has the same ratio to the screen at any resolution

So what do we do? Change the DP value of each View? This is not realistic. It is too much work to dynamically calculate the DP value of the View through the code on each device

If the DP value of each View is fixed, then as long as the total SCREEN DP width of each device is constant, we can ensure that the proportion of each View to the screen remains constant at all resolutions, thus achieving equal proportion adaptation. And if the total DP width of the screen is consistent with the width of the design drawing, then we can directly fill in the DP value according to the size of the design drawing in the layout

Total SCREEN PX width/Density = total screen DP width

In this formula we want to make sure that the total screen DP width is the same as the total design width, and that it stays the same across all the resolutions of the screen. What do we need to do? The total px width of the screen is not the same for each device, and this value will definitely change, which is where Toutiao’s formula comes in

Current screen width (in pixels)/Design drawing width (in DP) = Density

This formula is to change the total DP width of the screen in the above formula into the total width of the design drawing. The principle is the same. As long as the density is calculated in real time and changed according to different devices, the total width of the design drawing can be guaranteed to remain the same, and the adaptation is completed

Verify the feasibility of the scheme

Has taken the principle analysis of the above is clear, many articles are one has brought this formula, the formula is simple, but we still want to know that this is how come of, so I just reverse reasoning again, if still don’t understand, that I can only say that I tried my best, principle of finished, that we to verify whether the scheme is feasible?

Suppose the total width of the design drawing is 375 dp and the size of a View on the design drawing is 50dp * 50dp. The width of this View is 13.3% of the total width of the design drawing (50/375 = 0.133). Let’s verify whether the ratio of this View to the width of the screen on devices with different resolutions can be consistent with that in the design drawing under the condition of using toutiao screen adaptation scheme

Verify device 1

Density = 2.88 (density) = 1080/375 (width = 1080px)

For a 50dp * 50dp View, the value is px, 50dp * 2.88 = 144px (dp * density = px).

144/1080 = 0.133, the proportion of the actual width of the View to the total width of the screen is the same as the proportion of the View in the design drawing (50/375 = 0.133), so the scale is complete

The total width of some devices is 1080px, but the DPI may be different. Will it affect the adaptation scheme of Toutiao? In fact, this scheme does not calculate the density according to DPI at all. It calculates the density according to its own formula, so this has no effect on Toutiao’s scheme

The above only confirmed that equal proportion was available on all devices with a total screen width of 1080 px, so let’s try other resolutions

Verifying device 2

The total width of the screen is 1440 px, and the density is determined by toutiao’s formula: 1440/375 = 3.84

For a 50dp * 50dp View, the value is px (50dp * 3.84 = 192).

192/1440 = 0.133, the proportion of the actual width of the View to the total width of the screen is the same as the proportion of the View in the design drawing (50/375 = 0.133), so it is scaled equally

Two different resolution devices have completed the same scale scaling, proving that the toutiao screen adaptation scheme is effective on different resolution devices, if you still have doubts, you can try other resolution devices, in fact, in the end the ratio will not be any deviation, 0.133

advantages

  1. Very low cost to use, very simple to operate, using this solution in the layout of the page does not require additional code and operations, which can be said for other screen adaptation solutions

  2. Invasive is very low, the scheme and the project completely decoupled, the project layout does not rely on a single line of the program code, and use or official Android API, means that when you meet any problem cannot be solved, want to switch to other screen adaptation scheme, basic don’t need to change the code before, the switching process is almost completed in an instant, It saves a lot of trouble, saves a lot of time, and the cost of trial and error is close to zero

  3. The density of the changes is global throughout the project, so once the changes are made, all parts of the project will benefit

  4. There will be no loss of performance

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

Take a chestnut

Suppose a three-party library View is designed to be 100dp * 100dp, the maximum width of the design drawing is 1000dp, and the proportion of this View in the design drawing is 100/1000 = 0.1. This means that the width of this View is 10% of the total width of the design drawing. If we want to do equalization, then the three-party library View must be 10% of the total width of the screen on all devices

At this time, in a project that uses the toutiao screen adaptation scheme, if the maximum width of the design drawing set is 1000DP, then the three-party library View can be perfectly adapted to the project itself. However, when the maximum width of the design drawing of our project itself is 500dp instead of 1000DP, 100/500 = 0.2, you can see that the ratio has changed a lot, from 10% to 20%, obviously this tripartite library View is higher than the author expected, bigger than before

This is a very serious problem caused by the inconsistency of the size of the two design drawings. When the size difference between the two design drawings is larger, the effect of the adaptation will be completely different

The solution

Plan 1

Adjust the design size, because the tripartite library may be remote rely on, can’t modify the source code, also cannot let third-party libraries to adapt to the design of our project size, so only our own changes, to adapt to the tripartite library design size, we amend the project’s own design size to the tripartite library design size, will be able to complete the project itself and tripartite library adapter

At this time, the size of the project’s design drawing has been modified, so the DP value in the project layout file should also be increased or decreased according to the size of the modified design drawing, keeping the same proportion as that in the previous design drawing

However, it is not worthwhile to modify the design drawing size of the whole project to fit a three-party library, so this scheme supports the modification of the design drawing size by the unit of Activity, which means that each Activity can customize the design drawing size, because some activities do not use the three-party library View. No custom sizing is required, so each Activity has control, which is the most flexible

However, there is a problem with this. The same problem can occur when an Activity uses multiple three-party library views with different design sizes. This problem can only be alleviated by changing the design to a compromise size compared with several three-party libraries

Scheme 2

The second option is the simplest, which cancles the adaptation of the current Activity by Activity and uses another adaptation

Problems in use

Some articles have mentioned that toutiao’s screen adaptation scheme can fill in the width and height of the design drawing in units of px. In this way, we can directly fill in the px value of the design drawing in the layout file, saving the time of converting px to DP (most companies only mark px value in the design drawing). And it fits perfectly

But I suggest you do not do this, or honestly in the unit of dp to fill in the DP value, why?

Just fill in the PX while it’s nice to start with, the pit is already buried, which will make you feel good behind it. What pits are there?

The first pit

This will certainly make the project strongly coupled to this solution. If you have a problem and want to switch to another screen adaptation, the px values in the layout file will be used as dp

For example, if the actual width of your design is 1080px, you do not convert it to 360dp (1080/3 = 360), but you use 1080px as the size of the design. Then you will fill in the px value in the layout file, but the unit is dp

For a 300px by 300px View on the design, you can fill in 300dp in the layout file directly, but because the density can be dynamically changed, it can still be proportionally matched.

But don’t forget that you are strongly coupled to the solution because density is immutable when you are not using the solution!

Take a chestnut

To use this solution, on a device with a screen width of 1080px, fill in the design width of 1080 directly according to the Toutiao formula

Current device total screen width/design total width = Density

Density = 1 (1080/1080 = 1) So if you fill out 300dp in the layout file and you convert it to px, it’s 300px (300dp * 1 = 300px).

With the help of this scheme, it is very perfect, and the design is exactly the same as the completion of the adaptation

But when you’re not using this solution, the density conversion formula changes to the official DPI / 160 = density, and on a device with a screen width of 1080px and 480 DPI, the density is fixed at 3 (480/160 = 3)

Density = px (300dp * 3 = 900px)

The original View was 300px on the design, but now it is a whopping 900px. Congratulations, you are strongly coupled to this scheme. You should either change all the layout files or continue to use this scheme

The second pit

The second pit is actually just in the above mentioned toutiao adaptation scheme shortcomings, when a system control or three party library control design drawing size and our own project design drawing size gap is very large, this problem is more serious

If you just fill in the px as the size of the drawings, this don’t want to, and certainly all three party libraries as well as the system controls the design size is different, and the gap is very big, at least two or three times the gap, then you can play in the current page a Toast to see obviously, a lot smaller than before, can be said to be the day range don’t, If you use the other three party library View, it’s the same thing, it’s a lot smaller

Because you use PX as the unit to fill in the design drawing size, but others use DP, can the gap be not big, if you old honest and practical DP, even if the three party library design drawing size and your own design drawing size is not the same, it is not big, small to a certain extent, basically do not need to adjust, can be ignored, And many of the design sizes of the tripartite library are actually the same size as those of the general public, most likely the same size as your project’s own design

conclusion

As you can see, I’ve covered it in more detail than any toutiao official or blog can. I’ve covered everything from the principles to the pros and cons to the solutions. Due to the limited space, if I wanted to write such a detailed solution for the smallestWidth qualifier, THIS article would probably have to be 10,000 words long

So I put this screen adaptation into a series, a total of three parts, the first detail about the toutiao screen adaptation scheme, the second detail about the smallestWidth qualifier adaptation scheme, the third detail about the in-depth comparison of the two schemes and how to choose. And released my screen adaptation framework, AndroidAutoSize, which is optimized according to the screen adaptation scheme of Jinri Toutiao

Today’s tiaotiao screen adaptation program officially announced the core source code only 30 lines less than, but I this framework of the source code has more than 1500 lines, in the case of retaining the original features to add a lot of functions and features, the function has increased a lot, but the use has become simple

<manifest>
    <application>            
        <meta-data
            android:name="design_width_in_dp"
            android:value="360"/>
        <meta-data
            android:name="design_height_in_dp"
            android:value="640"/>           
     </application>           
</manifest>
Copy the code

As long as you fill in the height and width of the design drawing in dp in this step, you do nothing, and the frame starts to fit

You can take a look at how I encapsulated and optimized it in advance, and my third article will give you a rationale analysis of this framework

As for your comments and concerns, I would like to reply to you here:

Thanks, everyone’s attention and reply, I introduce the screen adaptation of Toutiao not to say that it is perfect, but it is effective and can help us reduce a lot of development costs

For many people, the existence of DPI is to make the large screen can display more content. If the content of a large screen phone is the same as that of a small screen phone, what is the significance of buying a large screen phone? I think people have the right understanding of DPI, and I agree with this view. Google probably had this in mind when they designed DPI, but what people don’t take into account is how fragmented Android is

Why is it that in the years since The birth of Android, there have been so many percentage libraries that supposedly violate this concept, but why are so many people still studying percentage libraries and implementing percentage layout in various ways (Google has also produced percentage libraries officially)? Why is that? Very simple, because of demand! Why? Because the development cost is low! The reason why jinri Toutiao’s screen adaptation scheme is so popular is that its development cost is the lowest among all screen adaptation schemes.

Who doesn’t understand the meaning of DPI? Are you the only one who understands that programmers at big companies like Toutiao don’t understand this? Headlines today didn’t such a big company want to put each type device for every version of the adapter is perfect, let your App experience better, even pay more costs, sometimes imagination is a good thing, but the cost of inputs, who can bear, even today’s headlines for such a big company, so didn’t choose the abundant capital into greater cost, For each model more refined adaptation, is the market small and medium-sized companies have the ability to invest such a large cost?

The meaning of DPI is completely correct in Google’s design philosophy, but not all companies can afford the cost. Presumably, the programmers of Toutiao are also suffering from the problem of screen adaptation because the users of Toutiao App are large enough and the models are widely distributed. To come up with a less than perfect but very effective solution

The public,

Search and follow my public account JessYan to learn and make progress together. If there is any update of the framework, I will inform you in the public account as soon as possible

Here’s how to upgrade your screen adaptation this year! Welcome to repost and share:

  • It’s time to upgrade your screen adaptation. (I) – Toutiao adaptation scheme
  • It’s time to upgrade your screen adaptation. (2) -smallestWidth qualifier adaptation solution
  • Toutiao screen adaptation ultimate version officially released!
  • Why is the design of AndroidAutoLayout wrong?

Hello, my name is JessYan. If you like my articles, you can follow me on the following platforms

  • Personal homepage: Jessyan.me
  • Making: github.com/JessYanCodi…
  • The Denver nuggets: juejin. Im/user / 976022…
  • Jane: www.jianshu.com/u/1d0c0bc63…
  • Weibo: weibo.com/u/178626251…

— The end