Hướng dẫn về Linear Layout

Hướng dẫn về Linear Layout

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.

Các bài viết liên quan:

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.

1. Vertical:

Trong điều này, tất cả các View con được sắp xếp Vertical thành một dòng. Trong các đoạn mã dưới đây, chúng tôi đã chỉ orientation “Vertical” để các con / chế độ xem của bố cục này được hiển thị Vertical.

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “fill_parent”

    android: layout_height = “wrap_content”

    android: direction = “vertical”> <! – Bộ orientation Vertical ->

    <! – View con (Trong trường hợp này là Button 2) ở đây ->

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Button1”

        android: id = “@ + id / button”

        android: background = “# 358a32” />

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Button2”

        android: id = “@ + id / button2”

        android: background = “# 0058b6” />

</LinearLayout>

Hướng dẫn về Linear Layout

2. Horizontal:

Trong điều này, tất cả các View con được sắp xếp theo chiều Horizontal thành một hàng, nối tiếp nhau. Trong các đoạn mã dưới đây, chúng tôi đã chỉ orientation “Horizontal” để các con / chế độ xem của bố cục này được hiển thị theo chiều Horizontal.

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “fill_parent”

    android: layout_height = “wrap_content”

    android: orientation = “Horizontal”> <! – Bộ orientation Horizontal ->

    <! – View con ->

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Button1”

        android: id = “@ + id / button”

        android: background = “# 358a32” />

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Button2”

        android: id = “@ + id / button2”

        android: background = “# 0058b6” />

</LinearLayout>

Hướng dẫn về Linear Layout

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:

1. orientation

Thuộc tính orientation được sử dụng để đặt con / chế độ xem theo chiều Horizontal hoặc chiều Vertical. Trong Linear Layout, hướng mặc định là Vertical.

Ví dụ: orientation Vertical:

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “fill_parent”

    android: layout_height = “wrap_content”

    android: direction = “vertical”> <! – Bộ orientation Vertical ->

    <! – Đặt Button view con tại đây ->

</LinearLayout>

Ví dụ: orientation Horizontal:

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “fill_parent”

    android: layout_height = “wrap_content”

    android: orientation = “Horizontal”> <! – Bộ orientation Horizontal ->

    <! – View con đặt tại đây->

</LinearLayout>

Hướng dẫn về Linear Layout

2. gravity

Thuộc tính gravity là một thuộc tính tùy chọn được sử dụng để kiểm soát sự liên kết của bố cục như trái, phải, trung tâm, trên cùng, dưới cùng, v.v.

Ví dụ: Chúng tôi đã đặt gravity phù hợp cho Linear Layout. Vì vậy, các Button được căn chỉnh từ phía bên phải theo hướng Horizontal.

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “match_parent”

    android: layout_height = “match_parent”

    android :vity = “right”

    android: orientation = “Horizontal”>

<! – Button Child View Here —>

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Button2”

        android: id = “@ + id / button2”

        android: background = “# 0e7d0d” />

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Button1”

        android: id = “@ + id / button”

        android: background = “# 761212” />

</LinearLayout>

Hướng dẫn về Linear Layout

3. layout_weight: 

Bố cục thuộc tính weight chỉ định tầm quan trọng tương đối của từng kiểm soát con trong Linearlayout chính.

Ví dụ: thuộc tính trọng số cho Button trong Linear Layout. Trong ví dụ dưới đây, một Button có trọng lượng 2 và Button kia có 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”>

<! – Thêm Chế độ View con—>

    <Button

        android: layout_width = “wrap_content”

        android: layout_height = “wrap_content”

        android: text = “Trọng lượng 2”

        android: background = “# 761212”

        android: layout_margin = “5dp”

        android: id = “@ + id / button”

        android: layout_weight = “2” />

    <Button

        android: layout_width = “wrap_content”

        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 hình ảnh bố cục, bạn có thể nhận thấy Button có trọng lượng 2 có kích thước lớn hơn liên quan đến Button kia.

Trọng lượng trong Linear Layout 

4. weightSum: 

weightSum là tổng trọng lượng của tất cả các thuộc tính con. Thuộc tính này là bắt buộc nếu chúng ta xác định thuộc tính trọng lượng của các phần tử con.

Ví dụ: Trong cùng một ví dụ ở trên về trọng lượng, chúng ta có thể xác định giá trị weightSum 3.

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “match_parent”

    android: layout_height = “match_parent”

    android: weightSum = “3”

    android: orientation = “Horizontal”>

    <! – Thêm view con Tại đây —>

</LinearLayout>

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:

Hướng dẫn về Linear Layout

Linear Layout trong đầu ra của Android 

Ví dụ 1: Đầu tiên, chúng tôi sẽ thiết kế Linear Layout của Android mà không sử dụng thuộc tính weight

Trong ví dụ này, chúng tôi đã sử dụng một TextView và 4 Button. Hướng được đặt thành thẳng đứng.

Dưới đây là mã của activity_main.xml

<! – orientation Vertical được đặt ->

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “match_parent”

    android: layout_height = “match_parent”

    android: orient = “vertical”>

    <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

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 1”

        android: background = “# 009300” />

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 2”

        android: background = “# e6cf00” />

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 3”

        android: background = “# 0472f9” />

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 4”

        android: background = “# e100d5” />

</LinearLayout>

Màn hình đầu ra:

Hướng dẫn về Linear Layout

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ã của activity_main.xml kèm theo giải thích

<! – orientation Vertical được thiết lập với weightSum ->

<LinearLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “match_parent”

    android: layout_height = “match_parent”

    android: weightSum = “5”

    android: orient = “vertical”>

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

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 1”

        android: background = “# 009300”

        android: layout_weight = “1” />

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 2”

        android: background = “# e6cf00”

        android: layout_weight = “1” />

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 3”

        android: background = “# 0472f9”

        android: layout_weight = “1” />

    <Button

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”

        android: text = “Button 4”

        android: background = “# e100d5”

        android: layout_weight = “1” />

</LinearLayout>

Màn hình đầu ra: 

Hướng dẫn về Linear Layout

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply