Sử dụng lại bố cục với <include>

Mặc dù Android cung cấp nhiều tiện ích để cung cấp các phần tử tương tác nhỏ, có thể sử dụng lại, bạn cũng có thể cần sử dụng lại các thành phần lớn hơn yêu cầu bố cục đặc biệt. Để sử dụng lại một cách hiệu quả bố cục hoàn chỉnh, hãy sử dụng thẻ <include> và <merge> để nhúng một bố cục bên trong một bố cục khác.

Điều này cho phép bạn tạo các bố cục phức tạp, chẳng hạn như bảng điều khiển nút có hoặc không hoặc tiến trình tuỳ chỉnh có văn bản mô tả. Điều đó có nghĩa là bạn có thể trích xuất bất kỳ thành phần nào trong ứng dụng thường có trên nhiều bố cục, hãy quản lý chúng một cách riêng biệt và đưa chúng vào từng bố cục. Trong khi bạn có thể tạo các thành phần giao diện người dùng riêng lẻ bằng cách viết một View, bạn có thể thực hiện việc này dễ dàng hơn bằng cách sử dụng lại tệp bố cục.

Tạo bố cục có thể sử dụng lại

Bắt đầu bằng cách tạo tệp XML mới và xác định bố cục bạn muốn sử dụng lại được. Cho ví dụ: đây là bố cục xác định thanh tiêu đề để đưa vào mỗi hoạt động (titlebar.xml):

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

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

View gốc phải chính xác là cách bạn muốn nó xuất hiện trong mỗi mà bạn định thêm bố cục này.

Sử dụng thẻ <include>

Bên trong bố cục mà bạn muốn thêm thành phần có thể sử dụng lại, hãy thêm thuộc tính Thẻ <include>. Ví dụ: đây là bố cục bao gồm thanh tiêu đề của ví dụ trước:

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

Bạn cũng có thể ghi đè mọi tham số bố cục – bất kỳ android:layout_* nào của thành phần hiển thị gốc của bố cục đã bao gồm bằng cách chỉ định chúng trong Thẻ <include>. Lệnh này được minh hoạ trong ví dụ sau:

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

Tuy nhiên, nếu bạn muốn ghi đè thuộc tính bố cục bằng thẻ <include>, cũng sẽ ghi đè android:layout_height và android:layout_width để biến thì các thuộc tính bố cục khác sẽ có hiệu lực.

Sử dụng thẻ <merge>

Thẻ <merge> giúp loại bỏ các nhóm khung hiển thị thừa trong hệ phân cấp khung hiển thị khi đưa một bố cục vào một bố cục khác. Một trường hợp sử dụng <merge> là khi bạn hãy triển khai khung hiển thị tuỳ chỉnh bằng cách mở rộng ViewGroup.

Ví dụ: nếu bố cục chính của bạn là bố cục dọc LinearLayout, trong đó có 2 các khung hiển thị liên tiếp có thể được sử dụng lại trong nhiều bố cục, thì bố cục có thể sử dụng lại mà bạn đặt hai khung hiển thị yêu cầu khung hiển thị gốc riêng. Tuy nhiên, việc sử dụng một LinearLayout khác làm gốc cho bố cục có thể sử dụng lại sẽ dẫn đến LinearLayout dọc bên trong một ngành dọc LinearLayout. LinearLayout lồng nhau không có mục đích thực sự và làm chậm giảm hiệu suất của giao diện người dùng.

Thay vào đó, bạn có thể mở rộng LinearLayout để tạo khung hiển thị tuỳ chỉnh và dùng tệp XML bố cục để mô tả khung hiển thị con. Thẻ trên cùng trong XML là <merge>, thay vì LinearLayout, như trong ví dụ sau:

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

Khi bạn đưa bố cục này vào một bố cục khác – bằng cách sử dụng <include> thẻ – hệ thống bỏ qua phần tử <merge> và đặt hai nút ngay trong bố cục, thay cho thẻ <include>.

Để biết thêm thông tin về <include>, hãy xem Tài nguyên bố cục.