Optimization of Android UI advanced Layout

You are welcome to reprint it, but please keep the source. Http://blog.csdn.net/notice520

 

I haven't updated my blog for a long time. I want to write something with pure brightness.

Today, let's talk about how to use the tools provided in Android to optimize our layout. First, we will write a simple framework layout.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <framelayout 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/> </framelayout> 

A very simple layout achieves a stacked effect. The running effect is as follows:

 

Next we will use a tool provided in Android to observe the layout, hierarchical observer, and hierarchy viewer to observe our layout. Hierarchy viewer is a good layout optimization tool. You can also use it to learn other people's la S. It should be said that it is a very practical tool.

Hierarchy viewer is in the tools directory of the SDK. The latest interface is displayed:

The interface is very simple. It lists the processes on the current device and displays them in the foreground in bold. There are three options on the list, namely refresh the process list, load the hierarchy to the tree chart, capture the screen to a magnifier with a Pixel Grid. You can switch between three views in the lower left corner. Open the framework layout written on the simulator, select on the page, and click load view to enter the interface.

The big picture on the left is the tree structure of the application layout, with information such as the Control name and ID written on it. The circle below indicates the rendering speed of the node, and the measurement size is from left to right, layout and drawing. Green is the fastest, and red is the slowest. The number in the lower right corner is the index of the child node in the parent node. If there is no child node, the value is 0. Click to view the preview chart of the corresponding control, the number of subnodes of the node (6 for five subnodes), and the specific rendering time. Double-click to open the control chart. On the right is the preview of the tree structure, the control properties, and the structure preview of the application interface. Click the control in the corresponding tree chart to view its position and attributes in the layout on the right. The toolbar has a series of tools, such as PNG, PSD, and refresh. The load overlay option can be used to add a new layer. When you need to put a bitmap in your layout, you will use it to help you layout. Click the third icon in the lower left corner to switch to the pixel view, as shown in.

 

The left side of the view is the relationship between the view and the viewgroup. clicking the view will select the corresponding view with red lines in the image on the right. The rightmost is the source image on the device. The center is an image with a Pixel Grid after amplification. You can adjust the magnification in the zoom column. The coordinates and colors of the control can be located here. It is more convenient to observe the layout.

Next, we will introduce layoutopt, another layout optimization tool. This is a layout analysis tool provided by Android. It can analyze the specified layout and then propose optimization suggestions.

To run it, open the command line to enter the SDK's tools directory, and enter layoutopt and add your layout directory to the command line. After the tool is run, the part shown in the box is the suggestions put forward after the tool analyzes the layout. Here, the label is replaced with the suggestions.

 

The following lists some common output:

$ Layoutopt samples/
Samples/compound. xml
The root-level <framelayout/> can be replaced with <merge/>
11: 21 This linearlayout layout or its framelayout parent is useless
Samples/simple. xml prompts that this layout is not used
7: 7 the root-level <framelayout/> can be replaced with <merge/>
Samples/too_deep.xml
-1:-1 this layout has too created nested layouts: 13 levels, it shoshould have <= 10!
20: 81 This linearlayout layout or its linearlayout parent is useless
24: 79 This linearlayout layout or its linearlayout parent is useless
28: 77 This linearlayout layout or its linearlayout parent is useless
32: 75 this linearlayout layout or its linearlayout parent is useless
36: 73 This linearlayout layout or its linearlayout parent is useless
40: 71 This linearlayout layout or its linearlayout parent is useless
44: 69 This linearlayout layout or its linearlayout parent is useless
48: 67 This linearlayout layout or its linearlayout parent is useless
52: 65 This linearlayout layout or its linearlayout parent is useless
56: 63 This linearlayout layout or its linearlayout parent is useless
Samples/too_many.xml
The root-level <framelayout/> can be replaced with <merge/>
-1:-1 this layout has too created views: 81 Views, it shoshould have <= 80!
Samples/useless. xml prompts that there are too many controls in the layout
7: 19 the root-level <framelayout/> can be replaced with <merge/>
11: 17 This linearlayout layout or its framelayout parent is useless

This tool can optimize our UI design and layout methods. Now, I will write it here today. I hope to help you. If you have any questions, please leave a message ~ I am very happy to say that some websites have reprinted my articles. However, it is not good if no source is left. Therefore, you are welcome to reprint it, but please keep the source. Http://blog.csdn.net/notice520