Nếu bạn là người mới bắt đầu tìm hiểu Android, là người mới “chập chững” với những dòng code đầu tiên; bạn sẽ quan tâm tới phần nào? Còn với mình, mình sẽ tìm cách thiết kế một giao diện đơn giản trước. Và để làm điều đó bạn cần biết về layout. Bài viết chia sẻ vớt bạn một hướng dẫn nhỏ dành cho “lính mới”.
Layout là gì?
Layout định nghĩa cấu trúc cho một giao diện người dùng. Bạn có thể tạo layout theo hai cách sau:
– Định nghĩa trong XML.
– Khởi tạo trong thời điểm runtime.
Lợi điểm của thiết kế giao diện trong XML cho phép bạn tách riêng giao diện và code điều khiển các hành vi của chúng. Điều này có nghĩa là bạn có thể sửa đổi hoặc điều chỉnh giao diện mà không cần can thiệp vào mã nguồn và biên dịch lại. Ngoài ra cách thức còn giúp dễ dàng hơn trong việc hình dung ra cấu trúc của giao diện mà bạn muốn tạo. Do đó trong bài viết này mình sẽ chỉ nói đến cách làm thế nào để tạo một layout trong XML.
Layout trong XML
Mỗi tệp layout phải chứa một phần tử gốc (root), đó phải là một đối tượng View hoặc ViewGroup. Khi phần tử gốc được xác định, bạn có thể thêm những đối tượng layout khác để từ đó từng bước xây dựng giao diện với hệ thống View phân cấp. Ví dụ, đây là một LinearLayout có orientation=”vertical” (bố trí theo chiều dọc) trong đó chứa một TextView và một Button.
“1.0” encoding=”utf-8″ ?>
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:text=”@string/edit_text”
android:inputType=”text”
/>
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/button1″
/>
Sau khi thiết kế xong bạn hãy lưu lại với đuôi mở rộng là .xml trong thư mục res/layout/.
Nạp thẻ XML Resource
Khi ứng dụng của bạn được biên dịch, mỗi tệp XML layout sẽ thành một view resource. Bạn có thể nạp layout từ mã ứng dụng của bạn bằng cách gọi phương thức setContentView(). Truyền cho nó tham số để tham chiếu đến layout của bạn theo mẫu: R.layout.layout_file_name
Ví dụ, XML layout của bạn được lưu trong tệp activity_main.xml, khi đó mã để nạp layout này sẽ như sau:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
Attributes (các thuộc tính)
Mỗi đối tượng View và ViewGroup đều có những thuộc tính XML riêng. Một vài thuộc tính là riêng của một loại đối tượng (VD textsize là thuộc tính của TextView). Một số thuộc tính là chung cho tất cả các đối tượng View, vì chúng kế thừa từ lớp View (VD như thuộc tính id).
ID
Bất kỳ đối tượng View nào cũng có thể có một thuộc tính id, để xác định nó là duy nhất. Khi ứng dụng biên dịch, id được tham chiếu giống như một số nguyên, nhưng trong XML thì id này thường được gán bằng một chuỗi. Đây là thuộc tính chung cho tất cả các đối tượng View và bạn sẽ thường xuyên sử dụng nó. Cú pháp dành cho thuộc tính id trong thẻ XML sẽ như sau:
android:id=”@+id/name_id”
Ký tự @ chỉ ra rằng XML parser sẽ phân tích đoạn sau của chuỗi id và định nghĩa chúng như một id resource, dấu + có nghĩa đây là một đối tượng mới cần được tạo và add vào resource (trong file R.java). Bạn có thể tạo một đối tượng hoàn chỉnh như sau:
<Button
android:id=”@+id/mybutton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/mybutton_text”
/>
Và bạn có thể khởi tạo một thể hiện của nó như sau:
Button btn = (Button)findViewById(R.id.mybutton);
Layout position
View giống như một hình chữ nhật. Vị trí của View được xác định với một cặp tọa độ left, top và hai kích thước rộng, dài. Đơn vị để xác định vị trí và kích thước là pixel.
Bạn có thể xác định vị trí của View bằng cách gọi hàm getLeft() và getTop(). Chúng sẽ lần lượt trả về vị trí left và top so với phần tử cha chứa View đó. Khi getLeft() trả về 20, điều này có nghĩa vị trí của View nằm cách 20px so với biên trái của phần tử cha. Ngoài ra bạn cũng có thể sử dụng hàm getRight(), getBottom() để tránh những phép tính không cần thiết. Ví dụ khi bạn gọi getRight() cũng giống như làm phép tính : getLeft() + getWidth().
Size, Padding, Margin
Size của View được thể hiện với chiều rộng và dài. Thực tế một View có 2 cặp giá trị chiều rộng và chiều dài.
Cặp thứ nhất được biết đến như measured width và measured height. Nó định nghĩa độ lớn kích thước của View so với phần tử cha. Bạn có thể lấy giá trị đó bằng cách gọi hàm getMeasuredWidth() và getMeasuredHeight().
Cặp thứ hai chính là chiều rộng và dài thực tế của View được hiển thị trên màn hình. Giá trị tương ứng được trả về nếu bạn gọi getWidth() và getHeight().
Padding chính là khoảng cách giữa nội dung và các cạnh (left, top, right, bottom) của View. Sử dụng phương thức set(int, int, int, int) thể thiết lập các giá trị cho padding và truy vấn bằng cách gọi các hàm getPaddingLeft(), getPaddingTop(), getPaddingRight(), getPaddingBottom().
Mỗi View có thể định nghĩa giá trị padding, nhưng nó không cung cấp bất kì hỗ trợ nào với margin. Tuy nhiên View Groups thì có.
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:text=”@string/edit_text”
android:inputType=”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″e ncoding=”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_below=”@id/edit_text”
android:layout_alignParentLeft=”true”
android:layout_height=”wrap_content”
android:hint=”@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/button”
/>
</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:
<?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”
/>
</TableRow>
<TableRow>
<Button
android:layout_gravity=”right”
android:text=”@string/right”
/>
<Button
android:text=”@string/left”
/>
<Button
android:layout_gravity=”right”
android:text=”@string/right”
/>
</TableRow>
</TableLayout>
Kết quả sẽ như sau:
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 ý.
Chúc các bạn thành công !
Theo Đặng Phương Phương – Tạp chi lập trình
