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