The combined layout of Android layout techniques _android

We already have articles that describe how you can use <include/> tags to reuse and share your layout code. This article will explain the use of <merge/> tags and how to complement them with <include/> tags.

The <merge/> Tag is used to reduce the view tree hierarchy to optimize the Android layout. By looking at an example, you can easily understand the problem that the tag solves. The following XML layout displays a picture, and a caption is positioned above it. The structure was quite simple; a imageview was placed in the Framelayout, and a textview was placed on it:

<framelayout xmlns:android= "http://schemas.android.com/apk/res/android"
  android:layout_width= "Fill_ Parent "
  android:layout_height=" fill_parent ">
  <imageview 
    android:layout_width=" Fill_parent " 
    android:layout_height= "fill_parent" 
    android:scaletype= "center"
    android:src= "@drawable/golden_gate "/>
  <textview
    android:layout_width= wrap_content" 
    android:layout_height= "Wrap_content" 
    android:layout_marginbottom= "20dip"
    android:layout_gravity= "Center_horizontal|bottom"
    android: padding= "12dip" "
    android:background=" #AA000000 "
    android:textcolor=" #ffffffff "
    android:text=" Golden Gate "/>
</FrameLayout>

The layout is beautifully rendered and does not see any problems:

When you use the Hierarchyviewer tool to check, you will find that things become very interesting. If you look closely at the view tree, you will notice that the framelayout (highlighted in blue) that we defined in the XML file is another framelayout unique child element:

Since our framelayout has the same size as its parent element (thanks to the fill_parent constant) and does not define any background, extra padding or gravity, it is completely useless. All we do is make the UI more complex. How can we get rid of this framelayout? After all, an XML document requires a root tag and the XML layout always corresponds to the corresponding view instance.

At this time, <merge/> label on the debut. When Layoutinflater encounters this label, it skips it and adds the elements within the <merge/> to the parent element of the <merge/>. Are you confused? Let's replace the framelayout with <merge/> and rewrite the previous XML layout:

<merge xmlns:android= "Http://schemas.android.com/apk/res/android" >
  <imageview 
    android:layout_ Width= "Fill_parent" 
    android:layout_height= "fill_parent 
    android:scaletype=" center "
    android:src=" @ Drawable/golden_gate "/>
  <textview
    android:layout_width=" wrap_content "android:layout_height=" 
    "Wrap_content" 
    android:layout_marginbottom= "20dip"
    android:layout_gravity= "Center_horizontal|bottom"
    android:padding= "12dip"
    android:background= "#AA000000"
    android:textcolor= "#ffffffff
    " android:text= "Golden Gate"/>
</merge>

In the new code, TextView and ImageView are added directly to the framelayout in the previous layer. Although it looks the same visually, the level of view is simpler:

Obviously, using <merge/> On this occasion is because the Contentview parent element of the activity is always framelayout. If your layout uses linearlayout as its root tag (for example), then you can't use this technique. <merge/> is useful in other situations as well. For example, it can be perfect when combined with <include/> tags. You can also use <merge/> When creating a custom combination view. Let's look at an example that uses <merge/> To create a new view--okcancelbar, contains two buttons, and can set button labels. The following XML is used to display a custom view on a picture:

<merge
  xmlns:android= "http://schemas.android.com/apk/res/android"  xmlns:okcancelbar= "http:// Schemas.android.com/apk/res/com.example.android.merge ">
  <imageview 
    android:layout_width=" Fill_ Parent " 
    android:layout_height=" fill_parent " 
    android:scaletype=" center "
    android:src=" @drawable Golden_gate "/>
  <com.example.android.merge.okcancelbar
    android:layout_width=" Fill_parent " 
    android:layout_height= "Wrap_content" 
    android:layout_gravity= "bottom"
    android:paddingtop= "8dip"
    Android:gravity= "Center_horizontal"
    android:background= "#AA000000"
    okcancelbar:oklabel= "Save"
    Okcancelbar:cancellabel= "Don ' t save"/>
</merge>

The new layout effects are shown in the following illustration:

Okcancelbar's code is simple because these two buttons are defined in an external XML file and imported through the Layoutinflate class. As shown in the following code fragment, R.layout.okcancelbar is okcancelbar as the parent element:

public class Okcancelbar extends LinearLayout {public
  Okcancelbar (context context, AttributeSet Attrs) {
    super ( context, attrs);
    SetOrientation (horizontal);
    Setgravity (gravity.center);
    Setweightsum (1.0f);
    
    Layoutinflater.from. Inflate (R.layout.okcancelbar, this, true);
    
    TypedArray array = context.obtainstyledattributes (attrs, R.styleable.okcancelbar, 0, 0);
    
    String Text = array.getstring (R.styleable.okcancelbar_oklabel);
    if (text = = null) Text = "OK";
    (Button) Findviewbyid (R.ID.OKCANCELBAR_OK)). SetText (text);
    
    Text = array.getstring (R.styleable.okcancelbar_cancellabel);
    if (text = = null) Text = "Cancel";
    (Button) Findviewbyid (R.id.okcancelbar_cancel)). SetText (text);
    
    Array.recycle ();
  }

The two buttons are defined as shown in the following XML. As you can see, we use the <merge/> tag to add two buttons directly to the Okcancelbar. Each button is contained in an externally identical XML layout file and is easy to maintain; we simply rewrite their IDs:

<merge xmlns:android= "Http://schemas.android.com/apk/res/android" >
  <include
    layout= "@layout Okcancelbar_button "
    android:id=" @+id/okcancelbar_ok "/>    
  <include layout=
    " @layout/okcancelbar_ Button "
    android:id=" @+id/okcancelbar_cancel "/>
</merge>

We created a flexible, maintainable, custom view with an efficient view hierarchy:

<merge/> Labels are extremely useful. However it has the following two restrictions also:
· <merge/> can only be used as the root tag of an XML layout
· When inflate a layout file that starts with <merge/>, you must specify a parent ViewGroup, and you must set Attachtoroot to True (see inflate (int, android.view.ViewGroup, Boolean) method).

Effect Chart:

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.