Optimization of the layout of performance optimization

When it comes to performance optimization, it usually starts with an optimized layout, and the optimal layout can be done in the following steps:

STEP1: Enter the system settings to open the debug GPU over-drawing function, first locate the existing redraw layout;

STEP2: the layout with excessive redrawing has been positioned, using lint function detection, quickly remove redundant layout;

STEP3: After the first two steps, if there is excessive repainting, then use Hierarchy Viewer for in-depth research

The following Three steps are described in detail in the Demo:

To locate the layout redraw in the Demo , turn on "Debug GPU over-drawing " as shown in 1

Figure 1

Then go to the Demo app to view redraw status,2:

Figure 2

Figure 2 shows that the Demo interface icon and text are displayed in red, indicating that the 4X Redraw description has a heavy redraw . The redraw level for different colors can be referenced in Figure 3:

Figure 3

After finding a layout problem, use the as self - lint tool to detect the layout and see what the problem is,4:

Figure 4

After the operation is done in Figure 4, 5 results appear:

Figure 5

As shown in Figure 5 , modify the existing issue 6:

Comparison before and after layout file modification

Figure 6

Once modified, execute the Demoagainto see if the redraw problem is eliminated, and result 7:

Figure 7

Now that the problem detected by lint has been fixed, but there is still a problem, what is the problem? (The actual problem is not as simple as Demo , this is only a simple problem to explain the steps to solve the problem), for further exploration, we need to use the Hierarchy Viewer to view, 8 :

Figure 8

According to the results, it is easy to find the problem, at this time TextView is wrapped in three layers of viewgroup , in order to solve this problem, explore the specific layout to modify the problem, the following layout :

<span style= "FONT-SIZE:18PX;" ><?xml version= "1.0" encoding= "Utf-8"? ><textview xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:padding=" 16DP "    android:layout_width=" wrap_content "    android:layout_height=" Wrap_ Content "    android:drawablepadding=" 3DP "    android:drawabletop=" @mipmap/ic_launcher "    android:text=" Hello world! "/></span>

so modified after layout, if in activity normal display, according to the general development experience, so that the layout of the display must be different from what we showed earlier, then we have the activity setcontentview layoutinflater view

<span style= "FONT-SIZE:18PX;" >public class Mainactivity extends Activity {    @Override    protected void onCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Framelayout Parentview = (framelayout) This.findviewbyid (window.id_android_content);        Parentview.setbackgroundcolor (Color.parsecolor ("#000000"));        Layoutinflater.from (This). Inflate (r.layout.activity_main,parentview,true);    }} </span>

After this modification, re-detects the layout of the redraw situation, as shown in 9 :

Demo result verification diagram after modifying layout

Figure 9

To this end, the entire process of optimizing the layout has been explained, so as to guide, in-depth, can write a good level of optimal layout.

Optimization of the layout of performance optimization