Android - User Interfaces Using XML Layouts

Tài liệu dịch lại từ slide dạy Android của Cleveland State University

The View Class

Lớp View đại diện cho 1 block cơ bản cho thanh phần UI. Một lớp View chứa một diện tích hình chữ nhật trên màn hình và chịu trách nhiệm drawing và event handling. View là một lớp base cho widget, đây là lớp dùng để tạo nên các thành phần UI tương tác với user ( nút, text, etc....) Lớp con ViewGroup là một lớp base cho layout, đây là 1 containters ẩn chứa những Views (hoặc các ViewGroups khác) và định nghĩa thuộc tính layout cho nó.

Tất cả các views trong một cửa sở được sắp xếp trong 1 single tree

Bạn có thể add thêm views từ code hoặc bằng việc chỉ định một tree của views trong 1 hoặc nhiều files layout XML.

Một khi bạn tạo mới một cây tree cho views, sẽ có một vài kiểu operations thông thường mà bạn sẽ thao tác :

1. Set thuộc tính : Ví dụ truyền text vào TextView. Thuộc tính mà được biết tại thời điểm build có thể được thiết lạp trong file XML layout.
2. Set focus : Framework sẽ làm hết mọi việc di chuyển focus trong việc phản hồi lại với những thao tác nhập vào từ user. Để focus vào 1 view cụ thế, gọi requestFocus().
3. Set up listeners : Views cho phép client thiết lập listener, listener này sẽ được thông báo đến khi mà có một cái gì đấy tác động đến views. Ví dụ, Button sẽ có một listener thông báo clients khi nào button được click.
4. Set nhìn được : Bạn có thể ẩn hoặc hiện views sử dụng setVisibility(int)

Một vài thành phần đơn giản của UI

1. Linear Layout : Một LinerLayout là một GroupView mà sẽ đặt các thành phần View con nằm ngang hoặc nằm dọc.
2. Relative Layout : Một RelativeLayout là một GroupView cho phép bạn đặt một thành phần con trong một vị trí liên quan đến thành phần bố hoặc thành phần anh em.
3. Table Layout : Một TableLayout là một ViewGroup mà sẽ đặt các View con trong các hàng và cột.
4. DataPicker : Một DatePicke là một widget cho phép user chọn ngày, tháng, năm
5. Form Controls : bao gồm rất nhiều dạng ví dụ như image, buttons, field text, checkboxes, radio buttons.
6. AutoCompleteTextView : Đây là một version của EditText widget mà cung cấp những lời gợi ý auto-complete như một types user. Những gợi ý này được lấy ra từ strings.
7. ListView : Một ListView là một View show items theo hàng dọc và có thể scroll được. Item được lấy từ ListAdapter

XML là cái gì###

Một XML-based layout là một thành phần (widgets) gồm nhiều UI và mối liên kết giữa các UI đó và giữa các containers của nó. Tất cả đều được viết trong format của XML.

Android sẽ xem XML-based layout như một resources, và file này được lưu trong res/layout trong project Android.

Bạn có thể sử dụng các tools UI để tạo file Layout XML.

Mỗi file XML sẽ chứa một cây các thành phần chỉ định rõ một layout của widgets và containers mà cấu thành nên một View.

Thuộc tính của thành phần XML sẽ mô tả design cũng như behavior của phần widget và containers.

Ví dụ : Nếu một Button có thuộc tính

android:textStyle = "bold"

sẽ ám chỉ rằng text xuất hiện trên button sẽ được render ở font bold.

Một ví dụ về application đặt 1 button chiếm hết màn hình. Khi click vào button thì sẽ hiện ra current time.

importjava.util.Date;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.Button;

publicclassAndDemoextendsActivity {
    Button btn;

    @Override
    publicvoidonCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        btn= (Button) findViewById(R.id.myButton);
        btn.setOnClickListener(newOnClickListener() {
            @Override
            publicvoidonClick(View v) {
                updateTime();
            }
        });
        }// onCreate
    //
    privatevoidupdateTime() {
        btn.setText(newDate().toString());
    }
}

Đây là phần layout-XML

<?xmlversion="1.0"encoding="utf-8"?>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myButton"
    android:text=""
    android:layout_awidth="fill_parent"
    android:layout_height="fill_parent"
/>

Thành phần root cần được khai báo ANdroid XML namespace :

xmlns:android="http://schemas.android.com/apk/res/android"

Tất cả các thành phần sẽ là con của root hoặc sẽ kế thừa từ phần khai báo namespace.

Bởi vì chúng ta muốn tham chiếu button này từ code Java, chúng ta cần phải đưa cho nó một định danh thông qua thuộc tính android:id

Những thuộc tính còn lại là thuộc tính của instance Button như là text, awidth, height.

UI Hierarchy###

HierarchyViewer sẽ hiển thị cấu trúc UI của màn hình hiện tại được show trên emulator hoặc device.

Android Layout###

Mỗi thành phần trong XML layout hoặc là một View hoặc là một ViewGroup Object.

Hiển thị View của Application#####

Android UI framework sẽ tô mày cho màn hình thông qua việc rà suốt tree View bằng việc yêu cầu mỗi thành phần tự tô màu cho chính nó theo cách pre-order traversal. Đây là 1 kiểu duyệt tree, bạn nào tò mò thuật toán hãy tìm hiểu thêm. Mỗi thành phần sẽ tự tô màu chính nó và sau đó bắt thành phần con của nó cũng làm những việc tương tự.

Common Layout

Có 5 loạt Layout cơ bản : Frame, Linear, Relative, Table và Absolute.

1. FrameLayout: Framelayout là object layout đơn giản nhật. Nó đơn thuần chỉ là một không gian trống trên screen mà bạn có thể cho bất kì object nào lên đó. Ví dụ, 1 bức ảnh. Tất cả các thành phần con của FrameLayout được đính ở góc trái màn hình screen, bạn có thể ko cần phải chỉ dịnh rõ vị trí cho view con. Các views con kế tiếp sẽ đơn giản được vẽ lên cái cũ, từng phần hoặc tất cả.
2. LinearLayout: LinearLayout xếp tất cả các View con thành một hướng- ngang hoặc dọc dựa vào android:orientation. Tất cả các views con sẽ được stack lần lượt kế tiếp: vertical sẽ chỉ có 1 con mỗi dòng, và horizontal cũng sẽ chỉ có mỗi con một cột. Một LinearLayout có margins giữa các con và gravity (trái, phải, center) cho mỗi con. Bạn cũng có thể thêm thuộc tính weight cho các con của LinearLayout. Mỗi Weight sẽ có một giá trị quan trọng đối với View, giá trị này cho phép mở rộng ra để điền lấp vào các phần trống thừa con lại trong View cha.
3. TableLayout: TableLayout cho con vào trong hàng và cột. Container TableLayout sẽ ko hiển thị line border. Một ví dụ về TablesLayout hiển thị 2 hàng và 2 cell trong mỗi hàng. Border của các cell là dạng chấm chấm.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_awidth="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*">
	<TableRow>
		<TextViewandroid:text="Open…"
			android:padding="3dip" />
		<TextViewandroid:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
	</TableRow>
	<TableRow>
		<TextViewandroid:text="Save As…"
			android:padding="3dip" />
		<TextViewandroid:text="Ctrl-Shift-S"
            android:gravity="right"
            android:padding="3dip" />
	</TableRow>
</TableLayout>

1. RelativeLayout: Một RelativeLayout cho phép views con chỉ định vị trí tương đối tới views cha hoạc đối với nhau. Bạn có thể align 2 thành phần bằng right border hoặc below, centered v.v... Các thành phần được render theo thứ tự đã cho, cho nên nếu một thành phần được center trong màn hình, các thành phần khác sẽ align lại chính nó vậy nên những thành phần đó sẽ lại đc align tương đối đến trung tâm màn hình. Cũng bởi vì thứ tự sắp xếp, cho nên nếu sử dụng XML để chị định layout, các thành phần mà bạn sẽ tham chiếu sẽ được list trong XML file trước khi bạn tham chiếu nó từ views khác thông qua ID.

2. AbsoluteLayout:Một layout cho phép bạn chỉ định chính xác vị trí (x/y tọa độ) của views con. Absolyte layouts thì ít linh hoạt và khó để maintain hơn là các loại layout mà ko có vị trí tuyệt đối khác.

Attaching Layouts đến Code Java

Cuối cùng, bạn phải kết nối được các thành phần trong XML đến các objects tương ứng trong activity Java của bạn. Có như vậy bạn mới thao tác xử lý UI trong code được.

Giả sử UI trong res/layout/main.xml. Bạn có thể gọi layout này bằng việc

setContentView(R.layout.main);

Một cái widgets cụ thể, ví dụ như myButton có thể được access bởi ứng dụng thông qua findViewByID(....) như là

Button btn= (Button) findViewById(R.id.myButton);

R là một class tự động sinh ra để theo dõi các resource còn available đến application. Cụ thể thì R.id... là tập hợp các widgets được định nghĩa trong XML layout.

Attach Listeners đến Widgets

button trong ví dụ của chúng ta bây giờ có thể được sử dung, ví dự như a listener cho 1 sự kiện click có thể viết như sau :

btn.setOnClickListener(newOnClickListener() {
	@Override
	publicvoidonClick(View v) {
		updateTime();
	}
});
privatevoidupdateTime() {
	btn.setText(newDate().toString());
}

Basic Widgets: Labels

Một label được gọi là một TextView. TextView thường để hiện thị captions, ko thể edit được.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    android:id="@+id/absLayout"
    android:layout_awidth="fill_parent" android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
    android:id="@+id/myTextView1"
    android:layout_awidth="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000ff"
    android:padding="3px"
    android:text="Enter User Name"
    android:textSize="16sp"
    android:textStyle="bold"
    android:gravity="center"
    android:layout_x="20px"
    android:layout_y="22px“ >
</TextView>
</AbsoluteLayout>

Basic Widget: Buttons

Một Buttons cho phép khởi tạo một action click trong GUI. Button là một subclass của TextView. Do đó format một Buttons thì khá tương tự với TextView.

Basic Widget: Images

ImageView và ImageButton là 2 thành phần widget của Android cho phép tích hợp images vào ứng dụng. Cả 2 widget này đều khá tương đồng với TextView và Button. Mỗi một widget có thuôc tính android:src hoặc android:backgroud trong file XML layout để chỉ định cần sử dụng ảnh nảo. Picture sẽ thường nằm trong resrouce drawable. ImageButton là một subclass của ImageViews. Nó adds một thêm thuộc tính respond với click event của Button vào.

Basic Widgets: EditTExt

Một EditText( hoặc là textBox) là một mở rộng của TextView cho phép bạn có thể edit update nôi dung text.

Basic Widgets: Checkbox & RadioButtons

Phần này bạn chỉ cần nắm khái niệm. Nếu đi sâu vào nội dung code sẽ khá mất time và cần một bài report sâu hơn.

UI - Other Features

Tất cả các widgets thì extend tử View do đó chúng có thể kế thừa rất nhiều các thuộc tính của Views và Methods bao gồm

XML Controls the focus sequence:

android:visibility

Android:background

Java methods

myButton.requestFocus()

myTextBox.isFocused()

myWidget.setEnabled()

myWidget.isEnabled()