Android layout tips To create efficient layout _android

The Android UI Toolkit provides layout managers that are fairly easy to use and, most of the time, you only need to use their most basic features to implement the UI.

The use of basic features is often not the most efficient for creating a UI. A common example is the misuse of LinearLayout, which can lead to a proliferation of view numbers in the view tree. view--even worse, the layout manager--Adding to the application brings a certain amount of consumption: initialization, layout, and rendering are slower. The cost of nesting layouts is particularly "expensive", for example, if you nest some linearlayout and use the weight parameter, which causes the child elements to be counted two times.

Let's look at a very simple and common layout example: A list item with an icon on the left, a title and description on the right, a caption above, and an optional description below. The list item may look like this:

In order to clearly understand the relative position between view (a ImageView and two TextView), the following figure is a sketch of the layout captured using Hierarchyviewer:

To achieve this layout, direct use of linearlayout on it. The list item itself is a horizontal linearlayout with a imageview and a vertical linearlayout, and a vertical linearlayout contains two textview. The following is the source code for this layout:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Fill_parent" android:layout_height= "Android:attr/listpreferreditemheight" android:padding= "6dip" > <imageview android:id = "@+id/icon" android:layout_width= "wrap_content" android:layout_height= "Fill_parent" Android:layout_marginRigh t= "6dip" android:src= "@drawable/icon"/> <linearlayout android:orientation= "vertical" android:layout_w Idth= "0dip" android:layout_weight= "1" android:layout_height= "fill_parent" > <textview android:layou T_width= "Fill_parent" android:layout_height= "0dip" android:layout_weight= "1" android:gravity= "Center_ver Tical "android:text=" My application/> <textview android:layout_width= "Fill_parent" Android:
      layout_height= "0dip" android:layout_weight= "1" android:singleline= "true" android:ellipsize= "marquee" android:text= "Simple application that shows you to use Relativelayout "/> </LinearLayout> </LinearLayout> 

If you use it as a ListView item, it works, but it's quite wasteful. The same layout can be overridden using relativelayout, which saves a view for each list item and has a better view level, only one layer. Using Relativelayout is also simple:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Fill_parent" android:layout_height= "Android:attr/listpreferreditemheight" android:padding= "6dip" > <imageview android:id = "@+id/icon" android:layout_width= "wrap_content" android:layout_height= "Fill_parent" Android:layout_alignParen Ttop= "true" android:layout_alignparentbottom= "true" android:layout_marginright= "6dip" android:src= "@drawable/I Con "/> <textview android:id=" @+id/secondline android:layout_width= "Fill_parent" android:layout_height = "26dip" android:layout_torightof= "@id/icon" android:layout_alignparentbottom= "true" Android:layout_alignpare Ntright= "true" android:singleline= "true" android:ellipsize= "marquee" android:text= "simple application that Sho WS to use Relativelayout "/> <textview android:layout_width=" fill_parent "android:layout_height=" Wrap_ Content "android:layout_torightof= "@id/icon" android:layout_alignparentright= "true" android:layout_alignparenttop= "true" android:layout _above= "@id/secondline" android:layout_alignwithparentifmissing= "true" android:gravity= "center_vertical" Andro
 id:text= "My Application"/> </RelativeLayout>

The new implementation looks exactly the same as the old implementation, except in one case. Each list item displays two lines of text: a caption and an optional description. When a description of a list item is not available, the application may want to set the visibility of the second TextView to gone. The LinearLayout implementation is perfect, but the Relativelayout implementation version is a bit passable:

In Relativelayout, each view is aligned with the parent element relativelayout or with other view. For example, we declare that the description part is aligned with the bottom of the relativelayout, where the caption is positioned and aligned with the top of the relativelayout. When describing gone, relativelayout does not know how to place the bottom edge of the title. To solve this problem, you can use a very simple layout parameter: layout_alignwithparentifmissing.

This Boolean parameter tells Relativelayout that if the target object disappears, it uses its own edge as the anchor point. For example, if you place a view to the right of the view to which the other Visibiity property is set to gone, and if you set alignwithparentifmissing as True,relativelayout, the left edge of the view is used as the alignment anchor for the position. On our occasion, the result of using alignwithparentifmissing is that relativelayout aligns the bottom of the header section with its bottom. The results are as follows:

Now, our layout is perfect, even if the visibility property of the Description section is set to gone. Better yet, the hierarchy is simpler because we are no longer using linearlayout and are more efficient. When we use Hierarchyviewer to compare two implementations, the fact is more obvious:

In addition, this difference is even more important when you use such a layout as a ListView list item. Hopefully this simple example will give you an idea of the layout and how to optimize your UI.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.