Layout开发小技巧(一)

1.创建可复用的UI组件<include />

我们可以通过使用<include />来包含其它xml里面的内容到当前xml中,在<include /> 内部只允许使用 layout 属性

<!-- override the layout height and width -->
<include layout="@layout/image_holder"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent" />
<!-- do not override layout dimensions; inherit them from image_holder -->
<include layout="@layout/image_holder" />

2.与<include />互补的 <merge />标签

<merge /> 可以通过减少视图树的数量级方式来优化android layout.以下xml布局展示了一个image和一个title:

<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" />

在 HierarchyViewer中查看继承图表,如果仔细观察这张表,我们会发现我们在XML里面定义的FrameLayout 是另外一个FrameLayout 唯一的孩子.

由于使用了fill_parent属性我们的FrameLayout 有与其父节点相同的尺寸,并且我们没有定义任何的背景, 额外的填充 或gravity属性,因此这个FrameLayout 节点是多余的.这样做会使我们的UI无缘无故的变得复杂起来,怎样才能去掉这个FrameLayout 呢?毕竟XML文件都需要一个根标签和一个表示视图的标签.

 <merge />标签可以帮助我们解决这个问题,当 LayoutInflater遇到这个标签时,LayoutInflater会跳过这个标签内的内容,然后把这些内容加入到其父节点中去,以上的例子改写如下:

<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>

我们再次查看HierarchyViewer,多余的FrameLayout 节点没有了.

<merge />仅仅只限于父节点是FrameLayout 的情况下,你不能在父节点是LinearLayout 的情况下使用这个标签.你可以使用这个标签加入你自己的控件.

<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>

也可以与<include />一起使用

<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>

<merge />有以下局限:

1.它只能作为根标签使用

2.当你inflating一个以 <merge />作为根标签的layout时,必须指明父类ViewGroup ,并且设置其attachToRoot 属性为true:

LayoutInflater.from(context).inflate(R.layout.okcancelbar, this, true);