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

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

Việc sử dụng lại bố cục đặc biệt hiệu quả vì bạn có thể tạo các bố cục phức tạp có thể sử dụng lại. Ví dụ: bảng điều khiển nút có/không hoặc thanh tiến trình tuỳ chỉnh với văn bản mô tả. Điều này cũng có nghĩa là mọi phần tử trong ứng dụng phổ biến trên nhiều bố cục đều có thể được trích xuất, quản lý riêng biệt, sau đó được đưa vào mỗi bố cục. Vì vậy, mặc dù tạo được 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 tuỳ chỉnh, nhưng bạn có thể thực hiện việc này dễ dàng hơn nữa 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

Nếu bạn đã biết bố cục mình muốn dùng lại, hãy tạo tệp XML mới và xác định bố cục. Ví dụ: đây là bố cục xác định thanh tiêu đề sẽ được đư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 đúng như cách bạn muốn nó xuất hiện trong mỗi bố cục mà bạn thêm bố cục này vào.

Lưu ý: Thuộc tính tools:showIn trong XML ở trên là một thuộc tính đặc biệt bị xoá trong quá trình biên dịch và chỉ được dùng tại thời điểm thiết kế trong Android Studio. Thuộc tính này chỉ định một bố cục bao gồm tệp này để bạn có thể xem trước (và chỉnh sửa) tệp khi tệp xuất hiện trong khi được nhúng vào bố cục mẹ.

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 thẻ <include>. Ví dụ: dưới đây là một bố cục bao gồm thanh tiêu đề ở trên:

Dưới đây là tệp bố cụ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 đè tất cả tham số bố cục (bất kỳ thuộc tính android:layout_* nào) của khung hiển thị gốc thuộc bố cục đi kèm bằng cách chỉ định các tham số này trong thẻ <include>. Ví dụ:

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

Tuy nhiên, nếu muốn ghi đè thuộc tính bố cục bằng thẻ <include>, bạn phải ghi đè cả android:layout_heightandroid:layout_width để các thuộc tính bố cục khác 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. Ví dụ: nếu bố cục chính của bạn là LinearLayout dọc, trong đó 2 khung hiển thị liên tiếp có thể được 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 2 khung hiển thị sẽ 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 việc một LinearLayout dọc nằm bên trong một LinearLayout dọc. LinearLayout được lồng không có mục đích thực tế nào khác ngoài việc làm chậm hiệu suất giao diện người dùng.

Để tránh đưa nhóm khung hiển thị thừa vào, bạn có thể sử dụng phần tử <merge> làm khung hiển thị gốc cho bố cục có thể sử dụng lại. Ví dụ:

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

Bây giờ, khi bạn đưa bố cục này vào một bố cục khác (sử dụng thẻ <include>), hệ thống sẽ bỏ qua phần tử <merge> và đặt 2 nút trực tiếp trong bố cục, thay cho thẻ <include>.

Để biết thêm thông tin liên quan đến chủ đề này, hãy xem Tài nguyên bố cục.