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

2167

 

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.

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

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

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.

 

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.

 

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: