1. Layout là gì?
Layout cho phép chúng ta đị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:
– Khai báo trong tập tin XML.
– Khởi tạo trong thời điểm runtime (ít sử dụng).
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 tập tin XML.
2. Tạo layout trong tập tin XML
Mỗi tập tin 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 hai EditText, một LinearLayout con có orientation=”horizontal”, trong layout con này có chứa hai Button, và một TextView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<EditText
android:id="@+id/txtUsername"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Username"
android:inputType="text"
>
<requestFocus />
</EditText>
<EditText
android:id="@+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
android:hint="Password"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="@+id/btnLogin"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="#FFD57D"
android:gravity="center"
android:text="Login" />
<Button
android:id="@+id/btnClear"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="#FF9900"
android:gravity="center"
android:text="Clear" />
</LinearLayout>
<TextView
android:id="@+id/lblResult"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Result: " />
</LinearLayout>
Các tập tin XML layout phải được đặt trong thư mục /res/layout
3. Đọc thông tin layout từ tập tin XML
Khi ứng dụng của bạn được biên dịch, mỗi tập tin 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ụ: tập tin XML layout của bạn được lưu trong tệp main.xml, khi đó mã để nạp layout này sẽ như sau:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
4. Các thuộc tính
Mỗi đối tượng View và ViewGroup đều có những thuộc tính mô tả chức năng của mình. Mỗi đối tượng sẽ có một vài thuộc tính riêng của mình (ví dụ: textsize là thuộc tính riêng 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 (ví dụ 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 cho View này. Khai báo trong tập tin 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à thêm vào resource (trong tập tin R.java). Bạn có thể tạo một đối tượng hoàn chỉnh như sau:
<Button android:id="@+id/btnLogin" style="?android:attr/buttonStyleSmall" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_weight="1" android:background="#FFD57D" android:gravity="center" android:text="Login" />
Và bạn có thể tham chiếu đến thể hiện của Button này như sau:
Button btn = (Button)findViewById(R.id.btnLogin);
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 width, height. Đơ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ó.
