Re-using Layouts with <include/>
THIS LESSON TEACHES YOU TO
YOU SHOULD ALSO READ
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.
可以在一个layout中使用<include/>
and<merge/>
嵌入其它layout
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
):
下面是一个可复用的layout,它将要被其它layout include
<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:
<include>示例
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.
可以在 <include>中使用android:layout_* 系列属性会重写被include的layout的根标签的同名属性,一但果重写其中一个,
就必需要重写
android:layout_height
andandroid:layout_width
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 LinearLayout
as 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.
当一个layout include 另一个layout时,<merge>用来去除重复的布局标签.
举例:两个layout A和B,其中A是垂直LinearLayout且include B,如果B也是垂直LinearLayout,那么就会在A的LinearLayout中嵌入另一个同样的Layout,
没有意义,反而会减慢速度。这时可以把B的根标签写成 <merge xmlns:android="http://schemas.android.com/apk/res/android" >
注意 <merge>只能作根标签,且系统会忽视它。
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:
<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>
Now, when you include this layout in another layout (using the <include/>
tag), the system ignores the <merge>
element and places the two buttons directly in the layout, in place of the <include/>
tag.