Bài 2: Thiết kế giao diện bằng LinearLayout

Layout là một loại View Group có thể chứa được nhiều view khác

1. Linear Layout : Loai layout này khá cứng nhắc về bố cục của các View nằm bên trong nó.
Có 2 loại bố cục cho layout này là: Dọc( Vertical), Ngang (Horizontal).

Các thuộc tính của Linear Layout trong Android

Dưới đây là các thuộc tính quan trọng xác định cụ thể cho Linear Layout: −

Attribute	Miêu tả
android:id	Đây là ID mà nhận diện duy nhất Layout
android:baselineAligned	Phải là một giá trị boolean hoặc “true” hoặc “false” và ngăn Layout từ việc căn chỉnh các baseline của view con
android:baselineAlignedChildIndex	Khi một Linear Layout là một phần của Layout khác mà là baseline aligned, nó có thể xác định view con nào của nó là baseline align
android:divider	Đây là drawable để sử dụng như một vertical divider giữa các button. Bạn sử dụng một giá trị màu trong dạng “#rgb”, “#argb”, “#rrggbb”, hoặc “#aarrggbb”.
android:gravity	Xác định cách một đối tượng nên đặt nội dung của nó, trên cả hai tọa độ X và Y. Giá trị có thể là top, bottom, left, right, center, center_vertical, center_horizontal …
android:orientation	Xác định hướng sắp xếp và bạn sẽ sử dụng “horizontal” cho một hàng, “vertical” cho một cột. Mặc định là horizontal
android:weightSum	Tính tổng độ rộng của các view con

Bài tập 1: Dùng Linear layout thiết kế giao diện sau:

Phân tích layout :

Phân tích layout :Phần layout được khoanh vùng đỏ linear layout ở dạng vertical, chứa 2 Button Phần layout được khoanh vùng xanh chứa linear layout ở dạng horizontal, chứa 2 Button có cấu trúc như hình bên

2.Tiến hành chỉnh sửa theo yêu cầu:

Thiết kế Button 1 và 2: Sử dụng thuộc tính layout_weight với các giá trị là 1 và 3.

<Button
   android:layout_width="match_parent"
   android:layout_height="0dp"
   android:text="Button 1"
   android:layout_weight="1"
   android:id="@+id/button" />

<Button
   android:layout_width="match_parent"
   android:layout_height="0dp"
   android:text="Button 2"
   android:layout_weight="3"
   android:id="@+id/button2" />

-Với View nằm trong linear layout theo chiều ngang thì thuộc tính:

android:layout_width="0dp"

–Với View nằm trong linear layout theo chiều dọc thì thuộc tính:

android:layout_height="0dp"

Thiết kế Button 3 và 4: Được chứa trong Linear layout dạng horizontal ,kết hợp sử dụng thuộc tính layout_weight với các giá trị là 3 và 1.

<LinearLayout
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="74dp">

   <Button
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:text="Button3"
       android:layout_weight="3"
       android:id="@+id/button3" />

   <Button
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:text="Button4"
       android:layout_weight="1"
       android:id="@+id/button4" />
</LinearLayout>

Kết quả cuối cùng đạt được sẽ là một layout hoàn chỉnh theo đúng yêu cầu.

Bài tập 2: Kết hợp lồng nhiều layout trong linearlayout:

Phân tích layout

Phần View được khoanh đỏ để nội dung trong View hiển thị lên trên ta sử
dụng thuộc tính gravity
Phần View được khoanh xanh để View nằm bên phải ta sử dụng thuộc tính layout_gravity

*Lưu ý:

Gravity: Định nghĩa nội dung bên trong View
Layout_gravity: Định nghĩa vị trí của View

Bắt đầu thiết kế

Với View chứa Message để hiển thị lên top sử dụng thuộc tính : android:gravity=“top” tùy theo nhu cầu có thể sử dụng các giá trị khác nhau: center,bottom…..
Với View Button Send để nằm bên trái theo yêu cầu sử dụng thuộc tính: android:layout_gravity=“right” với giá trị bằng right.

Ngoài ra thuộc tính này cũng có nhiều giá trị khác tương tự như gravity.

<EditText
   android:layout_width="match_parent"
   android:layout_height="0dp"
   android:id="@+id/editText3"
   android:gravity="top"
   android:layout_weight="1"
   android:hint="Mesage" />

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Send"
       android:id="@+id/button"
       android:layout_gravity="right" />

Như vậy chúng ta đã thấy được sự khác biệt cơ bản giữa hai thuộc tính gravity và layout_gravity trong linear layout cũng như cách sử dụng cơ bản của các thuộc tính này.

Source code bài 2:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent">

   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/editText"
       android:hint="To" />

   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/editText2"
       android:hint="Subject" />

   <EditText
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:id="@+id/editText3"
       android:gravity="top"
       android:layout_weight="1"
       android:hint="Mesage" />

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Send"
       android:id="@+id/button"
       android:layout_gravity="right" />

</LinearLayout>

Các thuộc tính của Linear Layout trong Android

Nguyễn Linh