Sử dụng tag "include" để tái sử dụng layout

Một màn hình trong ứng dụng android thường gồm nhiều thành phần như thanh progress, các icon, nút cancel, nút thêm bớt v.v. Nếu ứng dựng có nhiều layout phức tạp như vậy, việc phải viết lại các file XML cho từng activity là rất mất thời gian và không đảm bảo sự đồng nhất trong ứng dụng. Thay vì viết class mới extend từ View, ta có thể dễ dàng làm điều này ngay trong file XML.

Trong file layout xml của Android, mỗi tag là ánh xạ đến một class (như tag <TextView/> là ánh xạ của class Text View, <EditView/> ánh xạ đến class EditView v.v.). Tuy nhiên bộ công cụ UI có 3 tag đặt biệt không phải ánh xạ của View đó là: <requestFocus />, <merge /> (sẽ giới thiệu trong bài sau) và <include />. Trong đó <include /> được dùng để trực tiếp tạo thành phần cho layout.

Hiệu quả của việc sử dụng tag <include />

• Layout chính của activity sẽ ngắn và cô đọng, dễ thêm bớt các layout phức tạp khác

• Khi cần chỉnh sửa một layout con, các layout khác sử dụng layout này cũng được cập nhật

Cách sử dụng tag <incldue />

Sử dụng tag này khá đơn giản, gồm hai bước sau:

• Bước 1: Tạo Layout con

Tạo một file XML cho layout bạn muốn tái sử dụng trong các layout mẹ. VD tạo file titlebar.xml là một thanh ngang chứa logo của app để hiện lên các activity, với code như sau:

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

root của file XML này là loại View bạn muốn layout này sử dụng, trường hợp này là FrameLayout.

Chú ý: thuộc tính tools:showIn trong ví dụ này chỉ nhằm giúp Android Studio preview chính xác layout có chứa layout con này . Khi complie sẽ tự động xóa dòng này vì không cần thiết.

• Bước 2: Gắn vào Layout mẹ

Trong layout mà bạn muốn gắn layout con vào, thêm tag <include /> vào trong file XML của layout này. VD lay out mà bạn muốn thêm thanh ngang ở trên, sẽ có code như sau:

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

Để ý trong tag <include /> sẽ cần thông báo tham số layout là tên layout con bạn muốn thêm vào. Các thông số kiểu android:layout\*_ cũng có thể override ngay trong tag này. Ví dụ:

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

Tuy vậy cần lưu ý phải override hai tham số layout_width _và layout_height trước để có thể override các tham số layout_*_ khác.

Người viết: MinhNhật

__________________

Nguồn tham khảo:

https://android-developers.googleblog.com/2009/02/android-layout-tricks-2-reusing-layouts.html

https://developer.android.com/training/improving-layouts/reusing-layouts.html