Rate this post

Linear Layout là một bố cục đơn giản được sử dụng trong Android để thiết kế bố cục. Trong Linear Layout, tất cả các phần tử được hiển thị theo kiểu tuyến tính có nghĩa là tất cả các phần tử con / phần tử của Linearlayout được hiển thị theo hướng của nó. Giá trị cho thuộc tính orientation có thể nằm Horizontal hoặc Vertical.

Tóm tắt nội dung

Orientation Horizontal và Vertical trong Linear Layout

Có hai loại orientation Linear Layout:

Vertical
Horizontal

Như tên đã chỉ định, hai orientation này được sử dụng để sắp xếp con cái nối tiếp nhau, trên một đường thẳng, Vertical hoặc chiều Horizontal. Chúng ta hãy mô tả những điều này một cách chi tiết.

Vertical

Trong cấu trúc này, các View con được tổ chức theo chiều dọc trong một cột duy nhất. Đoạn code dưới đây cài đặt thuộc tính orientation là “vertical” để đảm bảo rằng tất cả các View con của LinearLayout được hiển thị theo chiều dọc.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"> <!-- Thuộc tính orientation được thiết lập là Vertical -->

    <!-- View con, trong trường hợp này là Button1 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button1"
        android:background="#358a32" />

    <!-- View con tiếp theo, Button2 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:background="#0058b6" />
</LinearLayout>

Trong đoạn code trên, LinearLayout đóng vai trò là container, trong đó các nút (Button1 và Button2) được sắp xếp theo chiều dọc. Mỗi Button có một màu nền cụ thể, được xác định bởi giá trị của thuộc tính android:background.

Horizontal

Trong cấu hình này, tất cả các View con được tổ chức theo chiều ngang, tạo thành một hàng liền mạch. Đoạn mã sau đây đặt thuộc tính orientation thành “horizontal” để đảm bảo rằng tất cả View con của LinearLayout được hiển thị theo chiều ngang.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"> <!-- Thuộc tính orientation được thiết lập là Horizontal -->

    <!-- View con, Button1 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button1"
        android:background="#358a32" />

    <!-- View con tiếp theo, Button2 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:background="#0058b6" />
</LinearLayout>

Trong đoạn code này, LinearLayout phục vụ như một container cho các Button, trong đó Button1 và Button2 được sắp xếp ngang hàng với nhau. Mỗi Button được cấu hình với một màu nền riêng biệt thông qua thuộc tính android:background.

Lưu ý: Tất cả các trình quản lý bố cục có thể được lồng vào nhau. Điều này có nghĩa là bạn có thể đặt RelativeLayout or FrameLayout bên trong LinearLayout.

Các thuộc tính chính trong Linear Layout:

Bây giờ chúng ta hãy thảo luận về các thuộc tính giúp chúng ta định cấu hình Linearlayout và các điều khiển con của nó. Một số thuộc tính quan trọng nhất mà bạn sẽ sử dụng với Linearlayout bao gồm:

orientation

Thuộc tính orientation trong LinearLayout cho phép bạn quy định cách sắp xếp các View con theo chiều dọc hoặc chiều ngang. Mặc định, LinearLayout sẽ sắp xếp các View con theo chiều dọc.

Ví dụ về orientation chiều dọc:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"> <!-- Thuộc tính orientation được thiết lập là vertical -->

    <!-- Nơi đặt các View con như Button -->
</LinearLayout>

Trong cấu hình này, các View con sẽ được sắp xếp từ trên xuống dưới, theo chiều dọc.

Ví dụ về orientation chiều ngang:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"> <!-- Thuộc tính orientation được thiết lập là horizontal -->

    <!-- Nơi đặt các View con -->
</LinearLayout>

Trong cấu hình này, các View con sẽ được sắp xếp cạnh nhau từ trái sang phải, theo chiều ngang. Điều này cho phép tạo ra một hàng ngang của các View con, như các nút hoặc hình ảnh, trong một LinearLayout.

gravity

Thuộc tính gravity trong LinearLayout cho phép bạn kiểm soát vị trí căn chỉnh của các View con bên trong bố cục, như căn chỉnh về phía trái, phải, trung tâm, trên cùng hoặc dưới cùng.

Ví dụ về `gravity`:

Trong ví dụ dưới đây, gravity được thiết lập để căn chỉnh các View con về phía bên phải của LinearLayout khi bố cục được sắp xếp theo chiều ngang.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right" <!-- Thuộc tính gravity căn chỉnh các View con về phía bên phải -->
    android:orientation="horizontal"> <!-- Bố cục được sắp xếp theo chiều ngang -->

    <!-- View con, Button2 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:background="#0e7d0d" />

    <!-- View con tiếp theo, Button1 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button1"
        android:background="#761212" />
</LinearLayout>

Trong đoạn code trên, cả hai nút Button1 và Button2 được căn chỉnh về phía bên phải của LinearLayout. Thuộc tính android:gravity="right" đảm bảo rằng, dù có bao nhiêu View con đi nữa, chúng đều sẽ được căn chỉnh về phía bên phải của bố cục. Điều này rất hữu ích khi bạn muốn tạo một giao diện người dùng có các thành phần được căn chỉnh theo một cách nhất định so với bố cục chứa chúng.

layout_weight

Thuộc tính layout_weight trong LinearLayout xác định tầm quan trọng tương đối của mỗi View con trong việc phân chia không gian trống trong bố cục. Khi sử dụng thuộc tính này, bạn có thể chỉ định một tỷ lệ không gian mà mỗi View con sẽ chiếm, dựa trên giá trị trọng lượng được gán cho chúng.

Ví dụ về layout_weight:

Trong ví dụ sau, có hai nút được đặt trong một LinearLayout ngang, với trọng lượng lần lượt là 2 và 1. Điều này có nghĩa là nút đầu tiên (với trọng lượng 2) sẽ chiếm không gian gấp đôi so với nút thứ hai (với trọng lượng 1).

<?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:orientation="horizontal">

    <!-- View con, Button với trọng lượng 2 -->
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Trọng lượng 2"
        android:background="#761212"
        android:layout_margin="5dp"
        android:id="@+id/button1"
        android:layout_weight="2" />

    <!-- View con, Button khác với trọng lượng 1 -->
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#761212"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:text="Trọng lượng 1" />
</LinearLayout>

Trong LinearLayout này, cả hai nút đều có android:layout_width="0dp" vì trọng lượng được sử dụng để phân chia không gian ngang. Nút có layout_weight="2" sẽ chiếm không gian gấp đôi so với nút có layout_weight="1", dẫn đến việc nút đầu tiên lớn hơn nút thứ hai.

Sử dụng layout_weight cho phép bạn tạo ra các bố cục linh hoạt và cân đối, điều chỉnh kích thước của các View con dựa trên tỷ lệ, thay vì kích thước cố định.

weightSum

Thuộc tính weightSum trong LinearLayout xác định tổng trọng lượng tối đa mà LinearLayout có thể phân phối giữa các View con của mình. Điều này rất hữu ích khi bạn muốn kiểm soát chính xác cách không gian được phân chia, ngay cả khi một số View con không có trọng lượng hoặc khi bạn muốn trọng lượng của các View con tổng cộng không vượt quá một giá trị cụ thể.

Ví dụ về weightSum:

Dựa trên ví dụ trước về thuộc tính trọng lượng, giả sử chúng ta muốn LinearLayout có tổng trọng lượng là 3. Điều này có nghĩa là, dù có bao nhiêu View con và dù chúng có trọng lượng như thế nào, tổng không gian mà chúng có thể chiếm sẽ không vượt quá tổng trọng lượng đã định:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="3" <!-- Tổng trọng lượng là 3 -->
    android:orientation="horizontal">

    <!-- View con và các thuộc tính trọng lượng của chúng -->
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_weight="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_weight="1" />
</LinearLayout>

Trong ví dụ này, tổng trọng lượng của LinearLayout được đặt là 3, và hai nút con có trọng lượng lần lượt là 2 và 1. Điều này có nghĩa là nút đầu tiên sẽ chiếm 2/3 không gian của LinearLayout, trong khi nút thứ hai chiếm 1/3 còn lại. Thuộc tính weightSum giúp đảm bảo rằng tổng không gian được phân chia giữa các View con không vượt quá giá trị đặt trước, cho phép kiểm soát chặt chẽ hơn về bố cục.

Ví dụ về Linear Layout:

Bây giờ, hãy thiết kế giao diện người dùng bố cục linearLayout. Đầu tiên, chúng tôi đã thiết kế bằng cách sử dụng thuộc tính trọng lượng và thứ hai không sử dụng nó. Vì vậy, đầu ra bố cục dưới đây sẽ rõ ràng sự khác biệt giữa chúng:

Trong ví dụ đầu tiên này, chúng tôi thiết kế một LinearLayout trên Android mà không sử dụng thuộc tính weight. Bố cục này bao gồm một TextView và bốn Button, với hướng được thiết lập là thẳng đứng.

Dưới đây là mã cho activity_main.xml:

<!-- Đặt orientation là Vertical -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- TextView hiển thị tiêu đề của LinearLayout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="LinearLayout"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <!-- Button 1 với màu nền xanh lá -->
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:background="#009300" />

    <!-- Button 2 với màu nền vàng -->
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:background="#e6cf00" />

    <!-- Button 3 với màu nền xanh dương -->
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:background="#0472f9" />

    <!-- Button 4 với màu nền hồng -->
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:background="#e100d5" />

</LinearLayout>

Trong đoạn mã này, LinearLayout được sử dụng làm bố cục chính với hướng thẳng đứng, nghĩa là tất cả các View con sẽ được sắp xếp từ trên xuống dưới. TextView ở đầu tiên hiển thị tiêu đề “LinearLayout” và được căn giữa theo chiều ngang bằng android:layout_gravity="center_horizontal". Bốn Button tiếp theo được đặt liên tiếp với độ rộng bằng với bố cục chứa (fill_parent) và mỗi Button có một màu nền cụ thể.

Màn hình đầu ra:

Linear Layout trong Android Ví dụ 1

Ví dụ 2: Trong ví dụ về Linear Layout này, chúng tôi đã sử dụng thuộc tính weight.

Dưới đây là mã cho activity_main.xml, kèm theo giải thích về cách thiết lập LinearLayout với orientation là vertical và sử dụng weightSum:

<!-- Thiết lập orientation là Vertical và chỉ định weightSum -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="5" <!-- Tổng trọng lượng là 5 -->
    android:orientation="vertical">

    <!-- TextView với trọng lượng là 0, hiển thị tiêu đề -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Linear Layout (Có Trọng lượng)"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0" />

    <!-- Các Button với trọng lượng là 1, chia đều không gian còn lại -->
    <Button
        android:layout_width="fill_parent"
        android:layout_height="0dp" <!-- Sử dụng 0dp cho chiều cao để trọng lượng có hiệu lực -->
        android:text="Button 1"
        android:background="#009300"
        android:layout_weight="1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:text="Button 2"
        android:background="#e6cf00"
        android:layout_weight="1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:text="Button 3"
        android:background="#0472f9"
        android:layout_weight="1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:text="Button 4"
        android:background="#e100d5"
        android:layout_weight="1" />
</LinearLayout>

Trong mã này, LinearLayout được thiết lập với orientation là vertical và weightSum là 5, có nghĩa là tổng trọng lượng phân chia cho các View con không vượt quá 5. TextView có layout_weight là 0, nghĩa là nó không chiếm không gian dựa trên trọng lượng nhưng vẫn được hiển thị với kích thước cần thiết. Các Button sau đó có layout_weight là 1 cho mỗi nút, cho phép chúng chia đều không gian còn lại trong LinearLayout, mỗi nút chiếm 1/5 tổng không gian (với TextView không chiếm không gian dựa trên trọng lượng). Điều này đảm bảo rằng mỗi Button sẽ có cùng kích thước và chiếm không gian tương đương nhau trong bố cục.

Android Java

Hướng dẫn về Linear Layout