Optimization of Android UI's advanced layout (2)

The previous blog introduced the layout optimization tool hierarchy viewer and layoutopt. If you have read the previous blog, you will notice that the layoutopt tool prompts you to replace <framelayout/> with <merge/>. In fact, the <merge/> label plays a very important role in Ui structure optimization. It can delete redundant layers to optimize the UI.

Let's take a look at the tree structure of the Framework layout used in the previous blog:

The subtree above the root node and linearlayout is the window layout of Android, And the textview behind it is the label. The tree trees in the yellow box are our layout. It can be found that the framelayout in the red box is the only child element of another framelayout, and the parent node has no additional attributes, that is, it is completely redundant, in this case, the <merge/> label is used to solve this problem. Replace the original <framelayout/> label with <merge/>. The modified layout code is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <merge xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> <textview <br/> Android: layout_width = "300dip" <br/> Android: layout_height = "300dip" <br/> Android: Background = "# 00008b" <br/> Android: layout_gravity = "center" <br/> <textview <br/> Android: layout_width = "250dip" <br/> Android: layout_height = "250dip" <br/> Android: Background = "# CD" <br/> Android: layout_gravity = "center" <br/> <textview <br/> Android: layout_width = "200dip" <br/> Android: layout_height = "200dip" <br/> Android: Background = "# 0000ff" <br/> Android: layout_gravity = "center" <br/> <textview <br/> Android: layout_width = "150dip" <br/> Android: layout_height = "150dip" <br/> Android: Background = "#00 bfff" <br/> Android: layout_gravity = "center" <br/> <textview <br/> Android: layout_width = "100dip" <br/> Android: layout_height = "100dip" <br/> Android: Background = "#00ced1" <br/> Android: layout_gravity = "center" <br/> </merge>

Then observe its tree structure. Obviously, the hierarchy is simpler.

Why? Because the root nodes of the activity are all framelayout, you can use the merge label to add them directly to this framelayout node instead of adding another framelayout node. However, if you use linearlayout as the root node, you cannot do this.

<Merge/> actually has many functions. It can be perfectly combined with <include/> labels. <Include/> labels are used to reuse code and modularize the layout. If the same layout needs to be used multiple times in the UI,
<Include/> labels greatly improve our development efficiency. Let's look at an example:

Create a shared layout: Share. xml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> <textview <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: TEXT = "this is a shared layout" <br/> </linearlayout>

 

Then use the <include/> label in the layout where the layout needs to be used, and we can rewrite some of its attributes (the following code overwrites its ID ):

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> <br/> <include Android: id = "@ + ID/New" layout = "@ layout/share"> </include> <br/> </linearlayout>

If we only need to use the shared layout content in our layout, we can use the merge label at this time, which makes the layout more efficient and flexible.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <merge xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> <include Android: id = "@ + ID/newone" layout = "@ layout/share"> </include> <br/> <include Android: id = "@ + ID/newtwo" layout = "@ layout/share"> </include> <br/> </merge>

With the <include/> label, you can easily share and reuse the layout. However, in many cases, many views in a layout are not commonly used, which leads to a waste of resources, android provides the viewstub tag to solve this problem. By default, all labels in viewstub have the visibility = gone attribute (invisible). More importantly, the content under this tag does not occupy any space. In fact, viewstub and include are similar, but the difference is that viewstub only enters your interface when you need it. viewstub notifies the system to load its internal view through the inflate () method. In this way, we can enjoy the convenience of <include/> without generating too many useless views. Let's take a look at the example:

The layout file of Main. XML is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> <button <br/> Android: id = "@ + ID/Show" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: TEXT = "click to import" <br/> <viewstub <br/> Android: Id = "@ + ID/viewstub" <br/> Android: layout = "@ layout/share" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> </linearlayout> <br/>

Myviewstub. Java code:

 

Package COM. notice520.viewstub; </P> <p> Import android. app. activity; <br/> Import android. OS. bundle; <br/> Import android. view. view; <br/> Import android. view. viewstub; <br/> Import android. view. view. onclicklistener; <br/> Import android. widget. button; </P> <p> public class myviewstub extends activity {</P> <p> private viewstub mviewstub; <br/> private button showbutton; </P> <p>/** called when the activity is f IRST created. */<br/> @ override <br/> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main); </P> <p> mviewstub = (viewstub) findviewbyid (R. id. viewstub); // instantiate the viewstub control. here we can see that we must set the ID for viewstub. <br/> showbutton = (button) findviewbyid (R. id. show); </P> <p>/* adds a listener event for the button. The following section describes */<br/> showbutton. setonclicklistener (New onclickli Stener () {</P> <p> @ override <br/> Public void onclick (view v) {<br/> If (mviewstub! = NULL) {<br/> mviewstub. inflate (); // click it to import the content of the viewstub tag <br/>}< br/> }); <br/>}< br/>

Running Effect. When you click the button, the import layout is displayed ,. Note that we do not need to retain the reference of viewstub in many cases (in this example, we reserve the reference of viewstub in the field), because after viewstub inflate, this viewstub is removed from the view level. After deep learning, the reader will often use the infate () method to import the layout and load it to the original view. At that time, you will find that viewstub is a better way than that. However, viewstub does not support <merge/> labels.

Now, let's write it today. I hope to help you. If you have any questions, please leave a message. You are welcome to reprint it, but please indicate the source: http://blog.csdn.net/notice520/article/details/6317992. Here are some QQ groups for Android learning.

106894847 of the 500 million people can join us to discuss android technology ~