Detailed Android layout optimization

How to write an excellent android app is the goal of every programmer. So how can I write an excellent app? I believe many beginners will also have this confusion. Answer this question in one sentence: details are important. Today, let's talk about how to improve Android performance from the most basic XML layout!

You may often encounter complex layouts. In this case, the simplest method is multi-layer nesting to achieve the effect, but is the simplest method the best method? You need to put a big question mark here????? Experience tells us that the results obtained by simple methods are not the optimal solution. Let's study how to optimize our XML layout through an example. Let's see how to implement it through the layout in the "discovery" tab page in the classic wechat.

The above picture is a screenshot of wechat interface. Seeing this effect picture at first glance will make developers think of using linear layout to realize this kind of picture on the left, text on the right and a line of white background effect, which is very convenient. Then we will write the following layout code according to the general idea:

The renderings of the above layout are as follows:

Has it almost achieved the same effect as wechat? So how do we judge whether the above layout is optimal? Of course, we have tools to check. I believe many children's shoes have been used. The first is hierarchy view, and the second is to show GPU over drawing.

Hierarchy view detects layout nesting levels

If you are developing with as, you can click toolsc > Android C > Android device monitor C > hierarchy view in the as toolbar. (how to use hierarchy view will not be introduced here.) you can use this tool to view the hierarchy of the current layout, as shown in the following figure. The hierarchy of the layout is the layout of wechat above:

After the contentframelayout node is the layout of the XML code above. As can be seen from the above figure, our layout has at most 5 layers. In fact, you can see that it is 5 layers from the code. Can we reduce the nesting level of the above layout? The answer is yes. Without much nonsense, let's go directly to the layout code I optimized.

Wow, the amount of code is much less, and the code is much simpler, which makes people look very comfortable. So what kind of optimization have we done? Summarize from the following points:

Use the style theme to define a common attribute to reuse code and reduce the amount of code. The above code uses two styles: TextStyle and linerlayoutstyle. The code is as follows:

2. Reduce the nesting level of the layout. The layout above uses textview. You can set pictures in four directions to directly replace an ImageView and textview wrapped under linerlayout. Thus, one layer of nested layout is reduced here, and one layer of bridge sleeve is reduced by using relativelayout relative layout again, which improves the efficiency of loading layout. Look at the picture:

It can be seen from the figure that not only the two-layer nested layout is reduced, but also the number of components is reduced, so as to reduce the time of layout drawing and greatly improve the layout loading efficiency.

3. Use the linearlayoutcompact component to realize the split line between linear layout elements, so as to reduce the effect of using view to realize the split line.

For details of linearlayoutcompat, please refer to http://www.jb51.net/article/137253.htm

4. Use the include tab to load the bottom menu bar layout. The purpose of the include tab is to reuse the layout to reduce code.

5. Use merge to reduce the nesting level of layout.

The precondition for using merge is that the merge tag must be the root tag of the current XML layout, for example:

That is, the merge tag must be the parent layout of the current layout. Generally, merge tags and include are used together to reduce the nesting level of layout. For example, there are the following layouts: two buttons, one above.

The layout level is as follows:

As can be seen from the above figure, in addition to the root layout, the layout we wrote has three layers, and both layers are relativelayout. So can it be optimized?

(1) First, we can use the include tag to simplify the XML layout. The results become as follows:

The code is very refreshing, wooden and clear at a glance. Then layout_ The item layout is as follows:

At this point, the nesting level of the layout is the same as above without any change. So let's try with the merge tag and see what the result is? The merge tag code is as follows:

Here, only the relativelayout tag is replaced by the merge tag, but the effect is very different.

The layout level after using the merge tag is as follows:

Obviously, a layer of relativelayout layout is reduced, which optimizes the layout.

Summary: when the parent layout and the root layout of the child layout are the same layout, you can use the merge tag to reduce one layer of nested layout. For example, if your parent layout is linerlayout and the child layout is also linerlayout, you can consider using merge to reduce the nesting level of the layout.

Show GPU over draw

You can turn on settings - > developer options - > display GPU over drawing on the mobile phone. The function of this switch is to display the over drawing of the layout according to different color values. The drawing level is from the best to the worst: blue, green, light red and red. Give an intuitive image to show it

The picture represents different levels of overdraw from top to bottom. When we layout, we try to reduce the red overdraw and see more blue areas. Let's take a look at the overdraw diagram of wechat and our customized layout overdraw diagram

The first picture is the overdraw picture of Tencent wechat, and the second picture is our customized overdraw picture. From the above two pictures, we can see that our own layout is similar to the overdraw of the original wechat layout, and there is no difference. So can we reduce the over drawing of the red part? Try it!

Let's remove the background of the topmost layout relativelayout first

Then modify each item to select the resource selector

Previous item_ bg_ The select.xml resource is the following code:

Modified item_ bg_ The select1.xml resource code is as follows:

We found that the new selector resource removed

Because the whole background is white, there is no need to repeatedly set the background color of item under normal conditions.

The modified rendering is as follows:

It can be seen that there is basically no red area, so as to improve the drawing efficiency of the layout.

Summary: now it seems that we can reduce the situation of overdraw by reducing the setting of background color. The over drawing of our own layout is much better than that of wechat itself. Does it feel nice ~ ~.

Lazy load layout viewstub

In addition to the above two methods to optimize the layout, there are other methods to continue to optimize the layout. In some cases, some layouts are loaded only when needed. For example, the add contact function of Xiaomi mobile phone has a drop-down button to display more input information when editing the name. See the figure

In this case, our first thought is to use invisible or gone to hide the infrequent elements. Is this really good? Has the final effect of layout optimization been achieved? Using invisible only hides the layout, but the layout still occupies the current position, and this part will still be drawn when the system loads the layout, which also takes drawing time. So is there a good way to solve this problem? It goes without saying that we can use lazy loading layout viewstub.

Viewstub is a very lightweight control provided by Android for this purpose. Although viewstub is also a kind of view, it has no size, no drawing function, and does not participate in the layout. The resource consumption is very low. Placing it in the layout can basically be considered that it will not affect the performance at all.

Let's learn how to use viewstub!

item_ The name.xml layout is as follows:

Then you can use it in the code

The renderings are as follows:

As can be seen from the rendering, when the user clicks the Name drop-down button, other layouts about the name will be loaded, and the original layout is displayed under the viewstub layout, and there is no abnormality in the position display. Of course, you can display it through setvisibility (view. Visible) or viewstub. Inflate (), and hide viewstub through setvisibility (view. Invisible).

Android lint tools

The lint tool is not introduced here. Interested children's shoes can search online. This tool is mainly used to check the unreasonable code, unreasonable layout, repeated resources, repeated pictures, etc. in the project, so that developers can further optimize their applications. If you are an as user, you can open this tool in the toolbar analyze - > inspect code.