Linear Layout

LinearLayout trong Android

LinearLayout  LinearLayout là ViewGroup được sử dụng khá phổ biến cùng FrameLayout và RelativeLayout,  LinearLayout được định nghĩa trong xml bởi cặp thẻ đóng mở <LinearLayout> và thẻ đóng </LinearLayout>.

  <?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">        <!--View child-->     </LinearLayout>

Điểm đặc biệt của LinearLayout là có thể chia layout theo các tỉ lệ khác nhau. Chúng ta sẽ cùng nhau tìm hiểu ở dưới đây.

Quy tắc layout

LinearLayout sắp sếp các view con theo hai hướng:

- Vertical: Sắp sếp view con theo chiều dọc.

Các view được thêm vào sau sẽ được sắp xếp theo hướng mũi tên từ trên xuống, và không có view nào sẽ nằm đè lên view nào.

- Horizontal: Sắp sếp các view con theo chiều ngang:

Các view được thêm vào sau sẽ được sắp xếp theo hướng mũi tên từ trái qua phải, và không có view nào sẽ nằm đè lên view nào.

Để xác định hướng mà LinearLayout sẽ layout các phần tử con theo vertical hay horizontal ta sử dụng thuộc tính sau:

+ Vertical:

  android:orientation="vertical"

+ Horizontal:

  android:orientation="horizontal"

Ví dụ:  với đoạn mã có thuộc tính android:orientation="vertical"

  <?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="vertical">            <View          android:background="#af5656"          android:layout_width="match_parent"          android:layout_height="50dp" />         <View          android:background="#28c6a6"          android:layout_width="match_parent"          android:layout_height="50dp" />      <View          android:background="#7c145f"          android:layout_width="match_parent"          android:layout_height="50dp" />      <View          android:background="#c18936"          android:layout_width="match_parent"          android:layout_height="50dp" />      <View          android:background="#062001"          android:layout_width="match_parent"          android:layout_height="50dp" />        </LinearLayout>

Kết quả xuất ra giao diện

Và với đoạn mã tiếp theo thay đổi orientation thành: android:orientation="horizontal" 

  <?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          android:background="#af5656"          android:layout_width="50dp"          android:layout_height="match_parent" />         <View          android:background="#28c6a6"          android:layout_width="50dp"          android:layout_height="match_parent" />      <View          android:background="#7c145f"          android:layout_width="50dp"          android:layout_height="match_parent" />      <View          android:background="#062001"          android:layout_width="50dp"          android:layout_height="match_parent" />     </LinearLayout>

Kết quả xuất ra giao diện

Chia tỉ lệ layout

Ngoài cách sử dụng LinearLayout thông thường thì LinearLayout thường được sử dụng để phân chia tỉ lệ layout bằng cách sử dụng thuộc tính layout_weight và weightSum.

• weightSum: Xác định trọng số của LinearLayout hiện tại.
• layout_weight: Trọng số mà view con trong LinearLayout chiếm giữ.

Chia tỉ lệ không có weightSum

Cùng xem xét đoạn mã sau:

  <?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          android:layout_width="0dp"          android:layout_height="match_parent"          android:layout_weight="1"          android:background="#af5656" />         <View          android:layout_width="0dp"          android:layout_height="match_parent"          android:layout_weight="4"          android:background="#28c6a6" />         <View          android:layout_width="0dp"          android:layout_height="match_parent"          android:layout_weight="2"          android:background="#7c145f" />  </LinearLayout>

Chúng ta không đánh trọng số weightSum cho LinearLayout nên tổng trọng số của nó sẽ được tính bằng tổng trọng số (layout_weight) các view con cộng lại.

Ở đây weightSum = 1 + 4 + 2 = 7. Có nghĩa là LinearLayout này sẽ chia thành 7 phần:

View thứ nhất có android:layout_weight="1" sẽ chiếm 1/7.

View thứ hai có android:layout_weight="4" sẽ chiếm 4/7.

View thứ ba có android:layout_weight="2" sẽ chiếm 2/7.

Kết quả chúng ta thấy như sau

Nếu orientation là vertical

  <?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="vertical">         <View          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="1"          android:background="#af5656" />         <View          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="4"          android:background="#28c6a6" />         <View          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="2"          android:background="#7c145f" />  </LinearLayout>

Kết quả xuất ra màn hình

Chia tỉ lệ có weightSum

Khác với cách trên weightSum được tính toán bằng tổng của cách layout_weight của các view con. Thì chúng ta có thể xác định giá trị weightSum cụ thể như sau:

Ví dụ: Trong  LinearLayout ta có thuộc tính android:weightSum="10"

  <?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:weightSum="10"      android:orientation="vertical">         <View          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="5"          android:background="#af5656" />         <View          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="2"          android:background="#28c6a6" />         <View          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="1"          android:background="#7c145f" />  </LinearLayout>

Chúng ta xác định weightSum có giá trị là 10, có nghĩa là chia layout này thành 10 phần

View thứ nhất chiếm 5/10

View thứ hai chiếm 2/10

View thứ ba chiếm 1/10

Còn lại 2/10 sẽ là khoảng trắng.

Kết quả xuất ra màn hình:

Điểm khác biệt của hai cách chia tỉ lệ này là chia tỉ lệ không có weightSum thì các view trong LinearLayout sẽ "phủ" đầy layout này (không có khoảng trống). Còn với cách chia tỉ lệ có weightSum có thể sinh ra khoảng trống như ví dụ ở trên.

Ưu điểm

+ Thiết kế được các giao diện phức tạp.

+ Chia tỉ lệ layout, phù hợp với việc phát triển UI trên nhiều device có kích thước màn hình khác nhau.

Nhược điểm

+ Thời gian tính toán và layout view con tốn chi phí hơn so với FrameLayout và RelativeLayout. Đây là ViewGroup tính toán phức tạp nhất trong bộ ba ViewGroup thường xuyên được sử dụng (FrameLayout, RelativeLayout, LinearLayout).

---

Download ví dụ

---

Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com