Layout cơ bản trong Android 1 - học lập trình android cơ bản

Những kiến thức lý thuyết cơ bản như các thành phần của một ứng dụng, vòng đời của ứng chúng ta đã giới thiệu sơ lược qua hai bài đầu tiên.

Chúng ta sẽ bắt đầu tìm hiểu những kiến thức cơ bản hỗ trợ việc lập trình đơn giản trong Android để tạo nền tảng cho các bạn khi học lập trình android.

Nếu bạn là linh mới bắt đầu tìm hiểu Android, thì bạn nên bắt đầu từ việc đơn giản nhất: tạo một giao diện cơ bản. Và để làm điều đó, bạn nên bắt đầu tìm. hiểu từ Layout. Vậy Layout là gì?

1. Khái niệm Layout:
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.

2. 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.
Mã:

<?xml version=<i>"1.0"</i> encoding=<i>"utf-8"</i> ?>
<LinearLayout
xmlns:android=<i>"http://schemas.android.com/apk/res/android"</i>
android:layout_width=<i>"fill_parent"</i>
android:layout_height=<i>"fill_parent"</i>
android:orientation=<i>"vertical"</i>
>
<EditText
android:id=<i>"@+id/edit_text"</i>
android:layout_width=<i>"fill_parent"</i>
android:layout_height=<i>"wrap_content"</i>
android:text=<i>"@string/edit_text"</i>
android:inputType=<i>"text"</i>
/>
<Button
android:id=<i>"@+id/button1"</i>
android:layout_width=<i>"wrap_content"</i>
android:layout_height=<i>"wrap_content"</i>
android:text=<i>"@string/button1"</i>
/>
</LinearLayout>
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/.

3. 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:
Mã: 

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

4. 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:
Mã: 

<Button
android:id="@+id/mybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/mybutton_text"
/>

5. Layout postsition
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().

6. Các thuộc tính 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ó.