FrameLayout: Các khái niệm chính, định vị đơn giản trong Android

FrameLayout là gì?

FrameLayout là ViewGroup đơn giản nhất trong Android SDK, được thiết kế để chặn một vùng màn hình và hiển thị một view con duy nhất (hoặc xếp chồng nhiều view). Không giống như LinearLayout (sắp xếp tuần tự) và RelativeLayout (định vị tương đối), FrameLayout không thay đổi vị trí của các phần tử con — mỗi phần tử con mới được đặt ở góc trên bên trái (0,0) theo mặc định và được vẽ lên trên phần tử trước đó.

FrameLayout được giới thiệu ở API Level 1 và vẫn là vùng chứa Android nhẹ nhất: nó không ghi đè onMeasure bằng logic phức tạp và thực hiện số lượng thao tác layout tối thiểu. Theo Android Performance Blog, FrameLayout thực thi onLayout trong một lần duy nhất và hầu như không thêm chi phí so với việc đặt View trực tiếp. Điều này làm cho nó trở thành lựa chọn lý tưởng cho các vùng chứa mà tốc độ quan trọng: bố cục mục RecyclerView (kết hợp với ConstraintLayout để định vị), vùng chứa Fragment, các lớp phủ.

Kích thước của FrameLayout theo mặc định được xác định bởi phần tử con lớn nhất (nếu không đặt match_parent). Nếu không có phần tử con nào được chỉ định, FrameLayout thu gọn xuống (0,0). Thuộc tính android:measureAllChildren (phần bên dưới) thay đổi hành vi này.

FrameLayout trong hệ phân cấp ViewGroup Android

FrameLayout kế thừa từ ViewGroup và là cha trực tiếp của nhiều vùng chứa chuyên biệt: FragmentContainerView (fragment), CardView (thẻ có bóng), ScrollView (một phần tử con), NestedScrollView. Khi tạo Activity với điều hướng Fragment, mẫu Android Studio tiêu chuẩn sử dụng FrameLayout (hoặc FragmentContainerView) làm vùng chứa gốc cho các fragment.

Nền trước và measureAllChildren

android:foreground — một thuộc tính FrameLayout chỉ định một drawable được vẽ lên trên tất cả các phần tử con. Không giống như background (bên dưới phần tử con), foreground hiển thị phía trên nội dung và có thể trong suốt. Nó được sử dụng cho: hiệu ứng phủ khi nhấn (ripple qua ?attr/selectableItemBackground), tạo mặt nạ cho hình ảnh, hiển thị chỉ báo trạng thái (dấu chọn trên hình ảnh).

Foreground hỗ trợ các tài nguyên drawable tiêu chuẩn: ColorDrawable, ShapeDrawable, RippleDrawable, LayerDrawable. Từ API 23+, android:foregroundGravity có sẵn để định vị foreground (fill, center, top, bottom). Ở chế độ fill, foreground mở rộng trên toàn bộ FrameLayout; ở chế độ center, nó được vẽ ở trung tâm.

android:measureAllChildren — một thuộc tính boolean (mặc định là true) xác định liệu có nên đo tất cả các phần tử con khi tính kích thước FrameLayout hay không. Nếu true (mặc định), FrameLayout tính đến kích thước của tất cả các phần tử con, bao gồm cả GONE (với kích thước 0). Nếu false, FrameLayout chỉ đo các phần tử con VISIBLE và INVISIBLE — các phần tử GONE bị loại khỏi tính toán. Theo Google I/O 2019, tắt measureAllChildren cho các vùng chứa có nhiều phần tử GONE (ví dụ: danh sách chuyển đổi chế độ hiển thị) giúp tăng tốc độ vẽ ban đầu lên 20–60%.

layout_gravity: Định vị bên trong FrameLayout

android:layout_gravity — một thuộc tính của phần tử con FrameLayout (và các ViewGroup khác) xác định vị trí của nó bên trong vùng chứa. Trong FrameLayout, layout_gravity là cách duy nhất để kiểm soát vị trí của phần tử con, vì FrameLayout không cung cấp các quy tắc định vị riêng (như RelativeLayout) hoặc hướng (như LinearLayout).

Các giá trị có thể: top, bottom, left, right, center, center_horizontal, center_vertical, fill, fill_horizontal, fill_vertical, clip_horizontal, clip_vertical. Kết hợp qua |: android:layout_gravity="bottom|center_horizontal" — phần tử được gắn vào cạnh dưới và căn giữa theo chiều ngang. Đối với các phần tử nhỏ hơn FrameLayout, layout_gravity xác định vị trí của chúng trong không gian trống.

Nếu layout_gravity không được đặt, phần tử được đặt ở góc trên bên trái (top|left) theo mặc định. Đối với FrameLayout chứa nhiều phần tử con, mỗi phần tử có thể có layout_gravity riêng — một phần tử có thể ở góc trên bên trái, một phần tử khác ở góc dưới bên phải, phần tử thứ ba ở trung tâm. Điều này cho phép tạo các lớp phủ đơn giản (ví dụ: biểu tượng đóng trên hình ảnh).

Sự khác biệt: gravity vs layout_gravity

android:gravity (thuộc tính cha) căn chỉnh nội dung bên trong FrameLayout — ví dụ: văn bản bên trong TextView. android:layout_gravity (thuộc tính con) căn chỉnh chính phần tử bên trong FrameLayout. Trong ngữ cảnh của FrameLayout, gravity xác định cách các phần tử con được định vị theo mặc định (tương tự như layout_gravity cho tất cả các phần tử con cùng lúc), nhưng layout_gravity của từng phần tử cụ thể ghi đè giá trị cha.

Ví dụ: XML và trường hợp sử dụng

Ví dụ 1: Lớp phủ cơ bản — Nhãn trên hình ảnh

Một hình ảnh với nhãn văn bản ở góc dưới bên phải. FrameLayout chứa ImageView lấp đầy màn hình và TextView với layout_gravity="bottom|end" để định vị trên hình ảnh.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/product_photo"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="8dp"
        android:background="@drawable/badge_background"
        android:elevation="2dp"
        android:paddingHorizontal="8dp"
        android:paddingVertical="4dp"
        android:text="-30%"
        android:textColor="@android:color/white"
        android:textSize="14sp"
        android:textStyle="bold" />

</FrameLayout>

ImageView lấp đầy toàn bộ FrameLayout (chiều cao 200dp). TextView với layout_gravity="bottom|end" được đặt ở góc dưới bên phải trên hình ảnh. elevation=2dp thêm bóng bên dưới nhãn, tách biệt nó khỏi hình ảnh một cách trực quan. Ví dụ tối thiểu này sẽ yêu cầu một vùng chứa lồng nhau hoặc mã tùy chỉnh trong LinearLayout.

Ví dụ 2: Chỉ báo tải (thanh tiến trình trên nội dung)

Một màn hình có nội dung và thanh tiến trình ở trung tâm xuất hiện trong khi tải. FrameLayout chứa hai phần tử: nội dung và ProgressBar với visibility="gone" (được chuyển đổi trong mã).

<FrameLayout
    android:id="@+id/content_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/content_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Nội dung đã tải"
        android:textSize="18sp" />

    <ProgressBar
        android:id="@+id/loading_spinner"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>

ProgressBar bị ẩn theo mặc định (gone). Khi bắt đầu tải, findViewById(R.id.loading_spinner).visibility = View.VISIBLE được gọi — vòng quay xuất hiện ở trung tâm trên nội dung. Sau khi tải — .visibility = View.GONE. FrameLayout cung cấp lớp phủ mà không làm dịch chuyển vị trí nội dung — văn bản không di chuyển khi vòng quay xuất hiện, vì ProgressBar được vẽ lên trên.

Ví dụ 3: Vùng chứa Fragment

FrameLayout là vùng chứa tiêu chuẩn cho FragmentTransaction. Activity thay thế các fragment bên trong vùng chứa này tùy theo điều hướng.

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

import androidx.fragment.app.FragmentTransaction

val fragmentContainer = R.id.fragment_container

fun navigateTo(fragment: Fragment) {
    supportFragmentManager
        .beginTransaction()
        .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
        .replace(fragmentContainer, fragment)
        .addToBackStack(null)
        .commit()
}

FrameLayout làm vùng chứa fragment là cách nhẹ nhất để hỗ trợ điều hướng Fragment. FragmentContainerView (lớp con của FrameLayout) được khuyến nghị với Navigation Component 2.4+, nhưng FrameLayout đơn giản vẫn hợp lệ cho FragmentTransaction thủ công. Lợi thế chính là FragmentTransaction.replace() thay thế hoàn toàn nội dung mà không ảnh hưởng đến Activity.

Khi nào sử dụng FrameLayout

FrameLayout tối ưu cho bốn kịch bản: vùng chứa fragment (FragmentContainerView hoặc FrameLayout), lớp phủ tải (ProgressBar trên nội dung), nhãn thẻ (nhãn trên hình ảnh), vùng chứa giữ chỗ cho ViewStub (tải lười).

Không phù hợp cho: định vị phức tạp nhiều phần tử (sử dụng ConstraintLayout), danh sách tuần tự (LinearLayout hoặc RecyclerView), bố cục động thay đổi thứ tự phần tử.

FrameLayout làm phần tử gốc của màn hình — thói quen xấu nếu màn hình chứa nhiều hơn 2–3 phần tử. Đối với vùng chứa gốc, hãy sử dụng ConstraintLayout — nó cung cấp nhiều kiểm soát hơn về định vị mà không làm giảm hiệu suất. Chỉ sử dụng FrameLayout cho các khối con nơi cần lớp phủ hoặc giữ chỗ.