Shulou(Shulou.com)06/02 Report--

In this issue, Xiaobian will bring you about how to optimize the layout of Android. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

layout principles

In the Android UI layout process, by following some customary and effective layout principles, we can make efficient and reusable UI, which can be summarized as follows:

Try to use RelativeLayout and LinearLayout as much as possible, do not use Absolute Layout. In the case of the same layout level, it is recommended to use LinearLayout instead of RelativeLayout, because LinearLayout has a slightly higher performance, but RelativeLayout can easily realize the layout that LinearLayout can only achieve.

Extract reusable components and use them with include tags;

Use the ViewStub tab to load some unusual layouts;

Use merge tags to reduce nesting levels in layouts;

RelativeLayout VS LinearLayout

*** The principle says that LinearLayout is better than RelativeLayout when the layout level is the same, but RelativeLayout can easily realize the layout that LinearLayout can only achieve. Suppose you need to implement the following layout:

Using LinearLayout to implement xml code is as follows:

The implementation code for RelativeLayout is as follows:

It can be seen that with RelativeLayout, the layout level is obviously less, so most of the time it is recommended to use RelativeLayout.

View Layout Hierarchy

How do I view the layout hierarchy? There are two ways: one is through the developer option of the phone, Android version 4.0 and above can be opened through Settings-> Developer Options-> Show Layout Boundaries to see if there are unnecessary nodes and nesting. The second is to use the UI Performance Detection Tools HierarchyViewer that comes with the SDK. Go to the tools folder in the sdk directory, find HierarchyViewer and run it (keep your simulator or real machine running the App you want to analyze), double-click the process represented by the App we are displaying. Next, we enter the hierarchyviewer interface, where we can clearly see the layout hierarchy of the running UI and the relationships between them. The approximate display is as follows:

From the layout diagram we can see that the root node DecorView contains a LinearLayout, which is the parent node of the layout containing the entire screen display of the Activity layout and status bar. This LinearLayout has two child nodes, one is FrameLayout, FrameLayout is the default parent layout node in the Activity layout. This node contains the xml layout we wrote ourselves, and another child node is ViewStub. We will introduce this node in detail later.

the use of

In actual development, we often encounter some common UI components, such as the navigation bar with a return button. If this part of the layout is set for each xml file, one is the repetitive workload, and the other is if there are changes, then each xml file has to be modified. Fortunately, Android provides us with the include tag, which, as the name suggests, allows us to extract these common components into a separate xml file and then import the common layout using the include tag, thus solving both of the aforementioned problems. Here is an example of using include in a layout main.xml to include another layout header.xml.

header.xml file

Then we import this common layout by including it in the layout xml that needs to introduce the footer.

main.xml file

In this way, we can not only improve the efficiency of UI production and reuse, but also ensure that the UI layout is more regular and easy to maintain.

the use of

The merge tag is used to merge UI layouts and can be used to reduce the nesting level of UI layouts. The merge tag can be used in two typical situations:

The layout root node is FrameLayout and does not need to set properties such as background or padding. It can be replaced by merge. Because the parent view of the Activity content layout is a FrameLayout, you can use merge to eliminate only one. This can be seen from the above figure.

When a layout is included as a child layout, use merge as the top node of the layout, so that when it is introduced, the top node is automatically ignored and all its children are merged into the main layout.

For example, the main.xml layout can be optimized as follows:

merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">

Taking the second case as an example, the header.xml layout can be optimized as follows:

This way there are no redundant FrameLayout and RelativeLayout nodes.

ViewStub tag

The viewstub tag can be used to introduce an external layout just like the include tag. The difference is that the layout introduced by viewstub will not expand by default, that is, it will not occupy display or position, thus saving cpu and memory when parsing layout. Viewstub is often used to introduce layouts that are not displayed by default and are only displayed in special circumstances, such as progress layouts, refresh layouts for network failure displays, and prompt layouts for error messages.

We create a new xml file to display a network error message error.xml:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.