复用Layout | Reusing Layouts

译文：By Chikeong

用<include/> 复用Layouts;

虽然Android 提供了丰富的控件来实现细小且可复用的可交互元素，你也许还需要为一些特别的layout 复用一些大的元素。为了高效地复合整个布局，你可以使用 <include/> 和<merge/> 将另一个layout 纳入当前的layout 中。

可复用布局允许你创建可复用的复杂布局。这意味着，如果你有多个layout 中具有相同的一些元素，那么他们可以被抽出来，单独管理，然后include（纳入）每个layout中。所以当你通过自定义View 来创建一个自定义的UI 组件时，使用可复用的layout 文件来实现起来将更容易。

创建可复用的Layout

如果你已经知道你的layout 将被复用，创建一个新的xml 文件，并定义的layout。如果你有一个可复用的titlebar layout xml，可适用于多个Activity：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width=”match_parent”
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg">

<ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content" 
               android:src="@drawable/gafricalogo" />
</FrameLayout>

使用<include/> 标签

添加<include/> 标签，将titlebar xml 纳入 layout中：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

<include layout="@layout/titlebar"/>

<TextView android:layout_width=”match_parent”
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />

...

</LinearLayout>

你也可以在<include/> 标签中覆盖被纳入的layout 根View 的布局参数（LayoutParams）：

<include android:id=”@+id/news_title”
         android:layout_width=”match_parent”
         android:layout_height=”match_parent”
         layout=”@layout/title”/>

如果你想要在<include/>覆盖这些属性的话，请务必覆盖掉android:layout_height 和 android:layout_width 两个，以便让其他布局参数生效。

使用<merge> 标签

<merge /> 帮助你在你将一个layout 纳入另一个 layout 时，从你的layout 层次中去掉冗余的 viewgroups。如果你的主layout 是一个竖直的linearlayout，然后将include 入另一个layout A， A 有两个按钮，需要放在一个layout 上。如果你使用另一个LinearLayout （竖直的）来包住这些按钮，就会导致这个嵌套LinearLayout 冗余了，它除了降低UI 性能之外毫无益处。

为了避免这个冗余viewgroup，你应该用<merge> 来包住这些按钮（xml的根便签）。

<merge xmlns:android="http://schemas.android.com/apk/res/android">

<Button
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:text="@string/add"/>

<Button
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

现在当你将这个layout 纳入另一个layout 时，系统将忽略<merge>标签，然后将两个按钮直接放入layout 中，来取代<include>标签。

原文：来自Android Developers

Re-using Layouts with <include/> ;

Although Android offers a variety of widgets to provide small and re-usable interactive elements, you might also need to re-use larger components that require a special layout. To efficiently re-use complete layouts, you can use the <include/> and <merge/> tags to embed another layout inside the current layout.

Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For example, a yes/no button panel, or custom progress bar with description text. It also means that any elements of your application that are common across multiple layouts can be extracted, managed separately, then included in each layout. So while you can create individual UI components by writing a custom View , you can do it even more easily by re-using a layout file.

Create a Re-usable Layout

If you already know the layout that you want to re-use, create a new XML file and define the layout. For example, here's a layout from the G-Kenya codelab that defines a title bar to be included in each activity (titlebar.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width=”match_parent”
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg">

<ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content" 
               android:src="@drawable/gafricalogo" />
</FrameLayout>

The root View should be exactly how you'd like it to appear in each layout to which you add this layout.

Use the <include> Tag

Inside the layout to which you want to add the re-usable component, add the <include/> tag. For example, here's a layout from the G-Kenya codelab that includes the title bar from above:

Here's the layout file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

<include layout="@layout/titlebar"/>

<TextView android:layout_width=”match_parent”
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />

...

</LinearLayout>

You can also override all the layout parameters (any android:layout_* attributes) of the included layout's root view by specifying them in the <include/> tag. For example:

<include android:id=”@+id/news_title”
         android:layout_width=”match_parent”
         android:layout_height=”match_parent”
         layout=”@layout/title”/>

However, if you want to override layout attributes using the <include> tag, you must override both android:layout_height and android:layout_width in order for other layout attributes to take effect.

Use the <merge> Tag

The <merge /> tag helps eliminate redundant view groups in your view hierarchy when including one layout within another. For example, if your main layout is a vertical LinearLayout in which two consecutive views can be re-used in multiple layouts, then the re-usable layout in which you place the two views requires its own root view. However, using another LinearLayoutas the root for the re-usable layout would result in a vertical LinearLayout inside a vertical LinearLayout . The nested LinearLayout serves no real purpose other than to slow down your UI performance.

To avoid including such a redundant view group, you can instead use the <merge> element as the root view for the re-usable layout. For example: