Tạo bố cục tuyến tính

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng bố cục trong ứng dụng Compose.

LinearLayout là một nhóm khung hiển thị giúp căn chỉnh tất cả phần tử con theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang. Bạn có thể chỉ định hướng bố cục bằng thuộc tính android:orientation.

Hình ảnh cho thấy bố cục được chia thành 3 phần dọc
Hình 1. LinearLayout có 3 thành phần con cháu hướng theo chiều ngang.

Tất cả phần tử con của LinearLayout đều được xếp chồng lần lượt, do đó, danh sách dọc chỉ có một phần tử con mỗi hàng, bất kể chiều rộng của danh sách. Danh sách theo chiều ngang chỉ có một hàng cao và là chiều cao của thành phần con cao nhất, cộng với khoảng đệm. LinearLayout tuân theo lề giữa các thành phần con và trọng lực (căn phải, giữa hoặc trái) của từng thành phần con.

Trọng số bố cục

LinearLayout cũng hỗ trợ chỉ định trọng số cho từng phần tử con bằng thuộc tính android:layout_weight. Thuộc tính này gán giá trị "quan trọng" cho một khung hiển thị liên quan đến không gian mà khung hiển thị đó chiếm trên màn hình. Giá trị trọng số lớn hơn cho phép khung hiển thị mở rộng để lấp đầy không gian còn lại trong khung hiển thị mẹ. Khung hiển thị con có thể chỉ định một giá trị trọng số và mọi không gian còn lại trong nhóm khung hiển thị sẽ được gán tỷ lệ cho khung hiển thị con, dựa trên trọng số đã khai báo. Trọng số mặc định là 0.

Phân bổ đồng đều

Để tạo bố cục tuyến tính, trong đó mỗi thành phần con sử dụng cùng một khoảng không gian trên màn hình, hãy đặt android:layout_height của từng thành phần hiển thị thành "0dp" đối với bố cục dọc hoặc android:layout_width của mỗi thành phần hiển thị thành "0dp" đối với bố cục ngang. Sau đó, đặt android:layout_weight của mỗi thành phần hiển thị thành "1".

Phân bổ không đồng đều

Bạn cũng có thể tạo bố cục tuyến tính trong đó các phần tử con sử dụng nhiều không gian trên màn hình. Hãy xem các ví dụ sau đây:

  • Giả sử bạn có 3 trường văn bản: hai trường có giá trị trọng số là 1 và trường thứ ba có giá trị trọng số mặc định là 0. Trường văn bản thứ ba có giá trị độ đậm là 0 chỉ chiếm diện tích mà nội dung yêu cầu. Hai trường văn bản còn lại, có giá trị trọng số là 1, sẽ mở rộng như nhau để lấp đầy khoảng trống còn lại sau khi đo lường nội dung của cả 3 trường.
  • Thay vào đó, nếu bạn có ba trường văn bản, trong đó hai trường có giá trị trọng số là 1 và trường thứ ba có trọng số là 2, thì phần không gian còn lại sau khi nội dung của cả 3 trường được đo lường sẽ được phân bổ như sau: một nửa cho trường có giá trị trọng số là 2 và một nửa chia đều cho các trường có giá trị trọng số là 1.

Hình và đoạn mã sau đây cho thấy cách trọng số bố cục có thể hoạt động trong hoạt động "gửi thông báo". Trường Tới, dòng Chủ đề và nút Gửi chỉ chiếm chiều cao mà các phần tử đó cần. Vùng thông báo chiếm toàn bộ chiều cao còn lại của hoạt động.

Hình ảnh hiển thị 3 EditText và một Button trong LinearLayout hướng dọc
Hình 2. 3 trường văn bản và một nút trong LinearLayout hướng dọc.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

Để biết thông tin chi tiết về các thuộc tính có sẵn cho mỗi khung hiển thị con của LinearLayout, hãy xem LinearLayout.LayoutParams.