Xây dựng giao diện trên Android

Giao diện người dùng đồ họa cho một ứng dụng Android được xây dựng bởi một hệ thống các đối tượng View và ViewGroup. Đối tượng View bao gồm các giao diện người dùng như Button hoặc TextField… đối tượng ViewGroup dùng để định nghĩa layout cho các view con của nó sắp xếp ra sao: sắp xếp theo kiểu lưới hay theo chiều dọc…

Mỗi activity sẽ chứa các View theo dạng cấu trúc cây, nghĩa là một Layout gốc chứa các view/layout con bên trong hoặc chỉ có 1 view duy nhất. (lưu ý Layout cũng là một view nhé)

Tạo một linear layout:
Mở file activity_main.xml lưu tại res/layout/
Lưu ý: Trong Eclipse, mỗi khi bạn mở một tập tin bố trí giao diện, bạn sẽ thấy được trình soạn thảo Giao diện đồ họa.Đây là một trình soạn thảo giúp bạn xây dựng bố trí giao diện một cách trực tiếp. Đối với bài học này, bạn sẽ làm việc trực tiếp với XML, do đó, nhấp vào tab activity_main.xml ở dưới cùng của màn hình để mở trình soạn thảo XML.
Một giao diện mặc định như hình dưới hiện ra:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        tools:context=".MainActivity" />
</RelativeLayout>

Trước hết xóa thành phần TextView và đổi RelativeLayout thành LinearLayout. Sau đó thêm vào thuộc tính android:orientation với giá trị là horizontal. Kết quả như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

LinearLayout là một lớp con của ViewGroup để layout các view con ở phía trong theo chiều dọc hoặc ngang. Mỗi con của một LinearLayout xuất hiện trên màn hình theo thứ tự mà nó xuất hiện trong XML.
Hai thuộc tính khác, android:layout_width và android:layout_height , được yêu cầu cho tất cả các view để xác định kích thước của chúng.
Bởi vì LinearLayout là view gốc trong bố trí, vì vậy chúng ta nên điền toàn bộ vào những phần có sẵn của ứng dụng bằng cách thiết lập chiều rộng và chiều cao với thuộc tính “match_parent”. Giá trị này cho phép các view có thể mở rộng chiều rộng hoặc chiều cao của nó để phù hợp với chiều rộng hoặc chiều cao của view cha.
Tham khảo thêm về các loại layout:
http://developer.android.com/guide/topics/ui/declaring-layout.html

Thêm một TextField
Để tạo một TextField, chúng ta thêm element EditText bên trong LinearLayout.
Giống như tất cả các đối tượng View, bạn phải định nghĩa tất cả thuộc tính cho EditText như sau:

<EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

Thuộc tính id khai báo một định danh duy nhất cho đối tượng View, sẽ được sử dụng để tham chiếu từ code
Ký hiệu ( @ ) là cần thiết khi bạn đề cập đến bất kỳ đối tượng tài nguyên từ XML. Nó được theo sau bởi các loại tài nguyên ( id trong trường hợp này), một dấu gạch chéo, sau đó tên tài nguyên ( edit_message ).
Các dấu cộng ( + ) trước các loại tài nguyên là cần thiết chỉ khi bạn đang xác định một ID tài nguyên cho lần đầu tiên. Khi bạn biên dịch các ứng dụng, các công cụ SDK sử dụng tên ID để tạo ra một ID tài nguyên mới trong dự án của bạn gen/R.java tập tin đề cập đến các yếu tố EditText . Một khi ID tài nguyên được khai báo một lần theo cách này, tài liệu tham khảo khác tham chiếu đến ID sẽ không cần các dấu cộng. Sử dụng dấu cộng là cần thiết khi xác định một ID tài nguyên mới.
android:layout_width và android:layout_height
Thay vì sử dụng các kích thước cụ thể cho chiều rộng và chiều cao, “wrap_content” sẽ tự xác định độ lớn cần thiết để phù hợp với nội dung xem.
android:hint là một chuỗi mặc định để hiển thị khi textfield bỏ trống. Thay vì sử dụng một chuỗi mã hóa cứng thì chúng ta định nghĩa chuỗi tại một file khác, “@string/edit_message” Điều này sẽ dễ dàng cho việc bảo trì thay đổi nâng cấp code sau này.

Định nghĩa các string
Mặc định, ứng dụng android sẽ định nghĩa các chuỗi tại res/values/strings.xml.
Mở file strings.xml thêm vào một định nghĩa cho chuỗi trên:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

Thêm một button:
Quay trở lại với layout/activity_main.xml
Thêm vào một Button ngay sau EditText

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />

Chiều rộng và chiều cao để là wrap_content vì vậy button sẽ tự co giãn cho phù hợp với nội dung bên trong nó.
Chọn Run từ thanh toolbar
Với hướng dẫn vừa rồi chúng ta đã vừa tạo xong một giao diện đơn giản cho ứng dụng Android, bài tiếp theo bạn sẽ được hướng dẫn giao tiếp với Button, đọc nội dung từ TextField và khởi động chạy một activity khác.
Chúc bạn thành công !