[Android] Chương 1.5 : Các loại Layout

Layout cơ bản

Mỗi subclass của lớp ViewGroup cung cấp một cách duy nhất để hiện thị các View nằm trong nó. Dưới đây là một vài kiểu layout bạn có thể xây dựng trong nền tảng Android.

1.    Linear Layout
Là layout sắp xếp các View con trong nó lần lượt theo duy nhất một chiều, ngang hoặc dọc tùy theo giá trị của thuộc tính android:orientation. View này sẽ tạo ra một thanh cuộn (scrollbar) nếu chiều dài của cửa sổ vượt quá chiều dài của màn hình.
Ví dụ về một LinearLayout gồm một EditText và một Button:

<?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">     <EditText         android:id="@+id/edit_text"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:inputType="text"         android:text="@string/edit_text" />      <Button          android:id="@+id/mybutton"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="right"          android:text="@string/mybutton" />    </LinearLayout> android:orientation – xác định hướng hiển thị của các View con. android:layout_width, android:layout_height – xác định chiều rộng, chiều cao của View với fill_parent là lấp đầy thành phần cha, wrap_content là vừa đủ nội dung View. android:layout_gravity – căn vị trí cho View (left, right, center). Với thiết kế này ta sẽ có kết quả như sau: 2.    Relative Layout Layout hiển thị các View con với các vị trí tương đối. Vị trí của mỗi View có thể được xác định so với các View khác hoặc với thành phần cha của chúng (thông qua id). Bạn có thể sắp xếp View sang bên phải, bên dưới một View khác, giữa màn hình, v.v.. Để định nghĩa vị trí cho mỗi View bạn sử sụng nhiều thuộc tính có sẵn từ RelativeLayout.LayoutParams. Ta tham khảo một vài thuộc tính: android:layout_alignParentTop Nếu “true”, cạnh trên của View sẽ trùng với cạnh trên của thành phần cha. android:layout_centerVertical Nếu “true”, View này sẽ được xếp vào giữa theo chiều dọc của thành phần cha. android:layout_below View sẽ nằm dưới một view khác, và xác định view đó qua id. android:layout_toRightOf View sẽ nẳm bên phải so với một View khác. Ta đến với ví dụ RelativeLayout sử dụng 3 EditText và 1 Button: <?xml version="1.0"encoding="utf-8" ?> <RelativeLayout       xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="fill_parent"       android:layout_height="fill_parent"       android:paddingLeft="16dp"       android:paddingRight="16dp">     <EditText         android:id="@+id/edit_text"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:hint="@string/edit_text"/>     <EditText         android:id="@+id/edit_text1"         android:layout_width="90dp"         android:layout_height="wrap_content"         android:layout_alignParentLeft="true"         android:layout_below="@id/edit_text"         android:hint="@string/edit_text1"         android:text="@string/edit_text1" />     <EditText         android:id="@+id/edit_text2"         android:layout_below="@id/edit_text"         android:layout_width="150dp"         android:layout_alignParentRight="true"         android:layout_height="wrap_content"         android:hint="@string/edit_text2"/>     <Button         android:id="@+id/button"         android:layout_width="100dp"         android:layout_height="wrap_content"         android:layout_alignParentRight="true"         android:layout_alignParentBottom="true"         android:text="@string/mybutton"/> </RelativeLayout> Kết quả ta sẽ có giao diện như sau: 3.    Table Layout TableLayout thể hiện các View dưới dạng lưới. Bạn có sử dụng thẻ <TableRow> để tạo ra các hàng, các cột trong layout. Các ô được tạo có thể chứa các View và layout khác. Ví dụ về một TableLayout gồm hai dòng, trông mỗi dòng có hai Button: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <?xml version="1.0" encoding="utf-8"?>       <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent">     <TableRow>         <Button             android:text="@string/left"/>         <Button             android:layout_gravity="right"             android:text="@string/right" />     </TableRow>     <TableRow>         <Button android:text="@string/left" />         <Button             android:layout_gravity="right"             android:text="@string/right"/>     </TableRow>     <TableRow         android:id="@+id/tableRow1"         android:layout_width="wrap_content"         android:layout_height="wrap_content" >     </TableRow>     <TableRow         android:id="@+id/tableRow2"         android:layout_width="wrap_content"         android:layout_height="wrap_content" >     </TableRow>     <TableRow         android:id="@+id/tableRow3"         android:layout_width="wrap_content"         android:layout_height="wrap_content" >     </TableRow>     <TableRow         android:id="@+id/tableRow4"         android:layout_width="wrap_content"         android:layout_height="wrap_content" >     </TableRow> </TableLayout> Kết quả sẽ như sau:  FrameLayout: Là đối tượng Layout đơn giản nhất. FrameLayout có thể chứa nhiều View, và các View này sẽ được sắp chồng lên nhau. Mỗi khi thêm một View mới, nó sẽ đặt các View này lên góc trên bên trái của giao diện. Nếu các View có cùng kích thước thì đối tượng nằm dưới sẽ bị che khuất. Do đó, thông thường Frame Layout chỉ chứa một View bởi vì nếu FrameLayout chứa nhiều View thì việc tổ chức các View theo tỉ lệ tương thích với kích thước màn hình để các View không chồng lên, che khuất lẫn nhau là rất khó khăn.  AbsoluteLayout: các điều khiển sẽ nằm ở một vị trí tuyệt đối do lập trình viên xác định. Tuy nhiên so với các Layout trước thì nó có hạn chế. Nếu các đối tượng được sắp xếp tại một vị trí tuyệt đối trên màn hình thì nó sẽ không tự động điều chỉnh để tương thích với độ phân giải màn hình và định hướng vị tri.  Trên đây là đôi chút giới thiệu về các layout cơ bản, kết hợp các layout với nhau bạn có thể tạo được một giao diện vừa ý.