Android – Bố cục giao diện (UI Layout)


Khối xây dựng cơ bản cho giao diện người dùng là một đối tượng View, đối tượng này được tạo từ lớp View và chiếm một khoảng hình chữ nhật trên màn hình, làm nhiệm vụ vẽ và quản lý các Event (sự kiên). View là lớp cha của các Widget, được dùng để tạo các UI Component (thành phần giao diện) tương tác như là Button (nút bấm), Text Field (nhập chuỗi)…

ViewGroup là lớp con của View và cung cấp Container để chứa các View hoặc là cácViewGroup khác và xác định các thuộc tính layout của các View và ViewGroup mà nó chứa.

Ở cấp độ thứ ba, chúng ta có các layout khác nhau là những lớp con của ViewGroup và những layout mẫu xác định cấu trúc hiển thị cho một giao diện Android. Chúng có thể được tạo vào thời điểm run time hoặc được khai báo trong tập tin XML main_layout.xml nằm trong thư mục res/layout của Project.

Layout

LAYOUT PARAMS

Trong tài liệu này, chúng ta nghiêng về việc tạo giao diện bằng cách viết code trong tập tin XML. Layout có thể chứa bất kỳ loại Widget nào như Button (nút bấm), Label (nhãn), Textbox (nhập chuỗi)…

Sau đây là ví dụ một tập tin XML có chứa LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

Một khi Layout đã được tạo, bạn có thể gọi tài nguyên layout từ code, khi viết lại phương thức callback  Activity.onCreate():

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

Các kiểu Layout trong Android

Có một vài kiểu Layouts được cung cấp bởi Android, chúng được dùng trong hầu hết các ứng dụng Android để thể hiện nhiều giao diện khác nhau.

No. Layout & Mô tả
1 Linear Layout

  Là một ViewGroup canh chỉnh các thành phần con của nó theo một hướng nhất định, hoặc là theo chiều ngang hoặc là theo chiều dọc.

2 Relative Layout

   Là một ViewGroup biểu diễn các thành phần con của nó theo vị trí tương đối với nhau.

3 Table Layout

   Là một View nhóm các View con của nó thành hàng và cột.

4 Absolute Layout

  Cho phép bạn xác định vị trí chính xác của thành phần con của nó.

5 Frame Layout

   Dùng để hiển thị một View đơn lẻ trên màn hình.

6 List View

   Là một ViewGroup hiển thị một danh sách các Item có thể cuộn (scroll) được.

7 Grid View

   Là một ViewGroup hiển thị các Item hai chiểu, có thể scroll được.

Các thuộc tính của Layout (Layout Attributes)

Mỗi layout có một tập hợp các thuộc tính xác định các tính chất hiện ra cho người dùng thấy của Layout đó. Sau đây là một vài thuộc tính thông dụng, được sử dụng kèm với các Layout:

Attribute Mô tả
android:id ID là số duy nhất xác định một View.
android:layout_width Chiều rộng của Layout.
android:layout_height Chiều dài của Layout.
android:layout_marginTop Khoảng không gian bên ngoài phía trên của Layout.
android:layout_marginBottom Khoảng không gian bên ngoài phía dưới của Layout.
android:layout_marginLeft Khoảng không gian bên ngoài bên trái của Layout.
android:layout_marginRight Khoảng không gian bên ngoài bên phải của Layout.
android:layout_gravity Chỉ ra các View con được đặt như thế nào.
android:layout_weight Chỉ ra khoảng không gian tương đối giữa các View con.
android:layout_x Tọa độ X của Layout.
android:layout_y Tọa độ Y của Layout.
android:paddingLeft Khoảng cách giữa đường viền (border) trái và các thành phần con của Layout.
android:paddingRight Khoảng cách giữa đường viền (border) phải và các thành phần con của Layout.
android:paddingTop Khoảng cách giữa đường viền (border) trên và các thành phần con của Layout.
android:paddingBottom Khoảng cách giữa đường viền (border) dưới và các thành phần con của Layout.

Ở đây chiều rộng và chiều dài là 2 kích thước của Layout/View có thể được tính bằng đơn vị dp (Density-independent Pixels), sp (Scale-independent Pixels), pt (Points = 1/72 inch), px( Pixels), mm (Millimeters) và bằng inch.

Bạn có thể xác định chiều dài và rộng với một số đo nhất định, nhưng thông thường, bạn sẽ dùng một trong những Constant sau đây:

  • android:layout_width=wrap_content có nghĩa là View của bạn sẽ có kích thước bằng với nội dung mà nó chứa.
  • android:layout_width=fill_parent có nghĩa là View của bạn sẽ có kích thước bằng với View cha của nó.

Các thuộc tính Gravity đóng vai trò quan trọng trong việc sắp xếp vị trí các đối tượng View và nó có thể được gán một hoặc nhiều (dùng dấu ‘|’) giá trị Constant dưới đây. 

Constant Value Description
top 0x30 Đăt đối tượng ở trên cùng trong Container chứa nó, không thay đổi kích thước của nó.
bottom 0x50 Đăt đối tượng ở dưới cùng trong Container chứa nó, không thay đổi kích thước của nó.
left 0x03 Đăt đối tượng ở bên trái trong Container chứa nó, không thay đổi kích thước của nó.
right 0x05 Đăt đối tượng ở bên phải trong Container chứa nó, không thay đổi kích thước của nó.
center_vertical 0x10 Đăt đối tượng ở vị trí trung tâm theo chiều dọc trong Container chứa nó, không thay đổi kích thước của nó.
fill_vertical 0x70 Tăng kích thước của đối tương theo chiều dọc nếu cần thiết để nó lấp đầy Container chứa nó.
center_horizontal 0x01 Đăt đối tượng ở vị trí trung tâm theo chiều ngang trong Container chứa nó, không thay đổi kích thước của nó.
fill_horizontal 0x07 Tăng kích thước của đối tương theo chiều ngang nếu cần thiết để nó lấp đầy Container chứa nó.
center 0x11 Đăt đối tượng ở vị trí trung tâm theo chiều ngang và chiều dọc trong Container chứa nó, không thay đổi kích thước của nó.
fill 0x77 Tăng kích thước của đối tương theo chiều ngang và chiều dọc nếu cần thiết để nó lấp đầy Container chứa nó.
clip_vertical 0x80 Một giá trị phụ, để xác định cạnh trên và/hoặc cạnh dưới của thành phần con gắn (clip) vào cạnh của Container chứa nó. Việc gắn này dựa trên giá trị Gravity theo chiều dọc: nếu Gravity có giá trị top thì sẽ gắn vào cạnh trên, nếu giá trị của Gravity là bottom thì sẽ gắn vào cạnh dưới, nếu không thì sẽ không gắn vào cạnh nào cả.
clip_horizontal 0x08 Một giá trị phụ, để xác định cạnh phải và/hoặc cạnh trái của thành phần con gắn (clip) vào cạnh của Container chứa nó. Việc gắn này dựa trên giá trị Gravity theo chiều ngang: nếu Gravity có giá trị left thì sẽ gắn vào cạnh trái, nếu giá trị của Gravity là right thì sẽ gắn vào cạnh phải, nếu không thì sẽ không gắn vào cạnh nào cả.
start 0x00800003 Đặt đối tượng vào vị trí đầu tiên trong Container chứa nó, không thay đổi kích thước của đối tượng.
end 0x00800005 Đặt đối tượng vào vị trí cuối cùng trong Container chứa nó, không thay đổi kích thước của đối tượng.

View Identification

Một đối tượng View có thể có một ID duy nhất gắn liền với nó cái mà sẽ xác định View đó trong bố cục giao diện. Cú pháp cho một ID, bên trong thẻ XML là:

android:id="@+id/my_button"

Sau đây là miêu tả ngắn gọn của @ và dấu + 

  • Ký hiệu @ ở đầu chuỗi báo cho XML parser phân tích và xem phần còn lại của chuỗi ID và nhận dạng nó như là một tài nguyên ID.
  • Dấu + có nghĩa là đây là tên tài nguyên mới, nó phải được tạo và thêm vào danh sách tài nguyên. Để tạo một Instance của một đối tượng View và lấy nó từ Layout, ta viết code như sau:
Button myButton = (Button) findViewById(R.id.my_button);
4135 Total Views 12 Views Today