Layout optimization of android-performance optimization

The system consumes a lot of resources when rendering the UI interface, a good UI should not only have good visual effect, but also should have a good experience, so layout optimization is very important.

1.Android UI Rendering mechanism

The human eye feels the smooth picture, needs the picture frame number to reach 40 frames per second to 60 frames per second. In Android, the system triggers rendering and redrawing of the UI through the VSync signal, which is 16ms apart. The 16ms is actually the unit time of the 60-frame display in 1000ms, which is 1000/60. If the system stays within 16ms each time it is rendered, the UI interface we see is very smooth, but it also needs to keep all logic within 16ms.

2. Optimize the layout hierarchy

In Android, when a view is measured, laid out, and drawn, it is manipulated by traversing the view tree. If the height of a view tree is too high, it can seriously affect the speed of measurement, layout, and drawing, so the first way to optimize layout is to reduce the height of the view tree, and Google also suggests in its API documentation that the view tree should not be taller than 10 levels.

In earlier versions of Android, Google suggested that we use LinearLayout as the layout of XML files created by default, and now in Android, Google has used relativelayout instead of LinearLayout as the default layout, the reason is that through the flat relativelayour to reduce the height of the layout tree generated by the nesting of LinearLayout, This improves the efficiency of UI rendering.

(1) Avoid nesting too many useless layouts

Nested layouts make the view tree taller and higher, so when you layout, you need to choose different layout components according to the characteristics of your layouts, avoiding the limitation of functionality through a layout component, resulting in too many nesting situations.

(2) Reuse layout with <include> tags

In an application interface for style unification, a lot of interface will have some common UI, such as an application Topbar, Bottombar and so on. For these common UI, if in every interface to copy a piece of such code, not only not conducive to the maintenance of late code, but also increased the redundancy of the program. Therefore, you can use the <include> tag to define such a common UI.

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:layout_width= "0DP"4 Android:layout_height= "0DP"5 android:orientation= "vertical">6 7     <TextView8         Android:layout_width= "Match_parent"9 Android:layout_height= "Match_parent"Ten android:gravity= "Center" One Android:text= "This is a TextView" A android:textsize= "20SP" /> - </LinearLayout>

Reusing the above XML code using the <include> tag

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:layout_width= "Match_parent"4 Android:layout_height= "Match_parent"5 android:orientation= "vertical">6 7     <include8         Layout= "@layout/common"9 Android:layout_width= "Match_parent"Ten Android:layout_height= "Match_parent"></include> One </LinearLayout>

(3) Use <ViewStub> tag to implement view delay loading

In addition to using a view as a common UI, we can also use the <ViewStub> tag to implement a reference to a view and implement lazy loading. The <ViewStub> tag is a very lightweight component.

First, create a layout that does not need to be displayed when initializing the load, but only in some cases, such as when viewing user information, the user details are displayed only when a button is clicked.

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:layout_width= "Match_parent"4 Android:layout_height= "Match_parent"5 android:gravity= "Center"6 android:orientation= "vertical">7 8     <TextView9         Android:layout_width= "Wrap_content"Ten Android:layout_height= "Wrap_content" One android:gravity= "Center" A Android:text= "This is a hidden TextView" - android:textsize= "20SP" /> - </LinearLayout>

Next, use the <ViewStub> tag to refer to the layout.

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Relativelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:layout_width= "Match_parent"4 Android:layout_height= "Match_parent"5 android:orientation= "vertical">6 7     <viewstub8         Android:id= "@+id/id_viewstub"9 Android:layout_width= "Match_parent"Ten Android:layout_height= "Match_parent" One Android:layout= "@layout/common" /> A  -     <LinearLayout -         Android:layout_width= "Match_parent" the Android:layout_height= "Wrap_content" - Android:layout_alignparentbottom= "true" - android:orientation= "Horizontal"> -  +         <Button -             Android:id= "@+id/id_visible" + Android:layout_width= "0DP" A Android:layout_height= "Match_parent" at Android:layout_weight= "1" - Android:text= "Display" /> -  -         <Button -             Android:id= "@+id/id_load" - Android:layout_width= "0DP" in Android:layout_height= "Match_parent" - Android:layout_weight= "1" to Android:text= "Load" /> +     </LinearLayout> - </Relativelayout>

Here is not only a question,<viewstub> tags and settings view.gone this way to hide a view what's the difference? Indeed, what they have in common is that initialization is not displayed, but the <ViewStub> tag renders the entire layout only when it is displayed, and View.gone is added to the layout tree when the layout tree is initialized, in contrast to,<viewstub> The layout of the labels has a higher efficiency.

Layout optimization of android-performance optimization