Tài Liệu Lập Trình Android Phần 2 Giao diện người dùng

Tài liệu lập trình android, lập trình android cơ bản, Phần 2 Giao diện người dùng tài liêu cần thiết để lập trình android, tài liệu đầy đủ để bạn có thể viết được ứng dụng android, Tài liệu lập trình android, lập trình android cơ bản, Phần 2 Giao diện người dùng tài liêu cần thiết để lập trình android, tài liệu đầy đủ để bạn có thể viết được ứng dụng android,

Phát triển ứng dụng

Smartphone

Tài liệu lưu hành nội bộ

Đây là tài liệu tham khảo sử dụng trong môn học Lập trình ứng dụng Smartphone – Android được tổng hợp, biên soạn từ nhiều nguồn bởi các thành viên của Nhóm nghiên cứu và ứng dụng công nghệ A106-Đại học Hoa Sen

Nhóm A106-http://profiles.hoasen.edu.vn/groups/584/

Phát triển ứng dụng Smartphone

Phần 02: Giao diện người dùng

Lê Đức Huy Email: leduchuy89vn@gmail.com

Mục lục

1 ViewGroup 4

1.1 LinearLayout 5

1.2 AbsoluteLayout 12

1.3 TableLayout 14

1.4 RelativeLayout 16

1.5 FrameLayout 19

1.6 ScrollView 21

2 View 24

2.1 Basic Views 24

2.1.1 ProgressBar View 35

2.1.2 AutoComplete TextView 42

2.2 PickerView 46

2.2.1 TimePicker 46

2.2.2 DatePicker 50

2.2.3 List Views 54

2.2.4 Spinner View 57

2.3 Display Views 62

2.3.1 Gallery and ImageView 62

2.3.2 ImageSwitcher 69

2.3.3 GridView 74

2.4 Menus 77

2.5 Additional View 87

2.5.1 AnalogClock và DigitalClock 87

2.5.2 WebView 89

Tại thời điểm này, bạn có thể thấy rằng thành phần cơ bản của một ứng dụng android chính là

Activity Activity là thành phần t i qu n trọng củ bất k một ứng dụng ndroid nào Thuật ng

ctivity ch một việc mà người d ng c thể th c hiện trong một ứng dụng ndroid Do gần như mọi

ctivity đều tương t c v i người d ng nên l p ctivity đảm nhận việc tạo r một cử sổ window để người lập trình đ t lên đ một giao diện người dùng bằng phương thức setContentView(View) Ta có

thể xem Activity là một cửa sổ ứng dụng Một ctivity c thể m ng nhiều dạng kh c nh u một cử sổ toàn màn hình (full screen window), một cử sổ flo ting v i windowsIsFlo ting h y nằm lồng bên

trong một ctivity kh c v i ActivityGroup) Cửa sổ ứng dụng mà Activity tạo ra có thể chứa các widgets như button, l ble, text boxex Thông thường, để xây d ng giao diện người dùng ta sử dụng

file xml trong forder res/l yout để định nghĩ c c đ i tượng đồ họa mu n thể hiện lên giao diện người dùng cùng v i các thuộc tính tương ứng quyết định cách thức thể hiện đ i tượng đồ họ đ trên cửa sổ ứng dụng Dư i đây là một ví dụ file xml định nghĩ c c đ i tượng đồ họa thể hiện giao diện người

Khi mã code củ chương trình được biên dịch, mỗi phần tử trong file xml được biên dịch thành

nh ng đ i tượng đồ họ tương ứng cùng v i các thuộc tính được cung cấp kèm theo các phần tử trong thẻ xml ndroid s u đ sẽ tạo ra các thể hiện củ c c đ i tượng đồ họ người dùng cung cấp cho ctivity khi n được nạp

Việc xây d ng một giao diện người dùng bằng cách sử dụng file xml rất đơn giản, tuy nhiên sẽ

hoạt trong lúc th c thi (Ví dụ: Khi xây d ng game) Tuy nhiên các nhà phát triển ứng dụng vẫn có thể xây d ng giao diện đồ họ người dùng bằng cách sử dụng câu lệnh

Views and ViewGroups

Một Activity chứ c c đ i tượng View và c c đ i tượng ViewGroup Một đ i tượng View là

một đ i tượng đồ hoạ dùng hiển thị nội dung lên màn hình Ví dụ: Button, l blel, text boxes … Một

View được dẫn suất từ các class: android.view.View.Một ho c nhiều View có thể được nhóm lại cùng nhau bên trong một ViewGroup Một ViewGroup cung cấp khả năng cho phép b trí c c đ i tượng đồ

hoạ chứa trong nó một cách phù hợp Có thể sử dụng c c ViewGroup để b trị c c đ i tượng đồ hoạ

theo dòng, theo cột, theo dạng bảng hay theo s ch định toạ độ cụ thể Mỗi ViewGroup được dẫn xuất

từ class android.view.ViewGroup Android hỗ trợ các ViewGroup s u đây

Tạo 1 Project đơn giản

Trong hư ng dẫn này, chúng ta sẽ tạo một project android v i các thông s như s u

Project name: UIExample Build target: Android 2.3.3

Application name: UI Example Package name: android.uiexample Create Activity: main

1.1 LinearLayout

LinearLayout là loại ViewGroup cho phép sắp xếp c c đ i tượng View (chứa trong nó) trong một cột đơn h y một hàng đơn Để thấy cách một LinearLauout làm việc như thế nào, hãy bổ sung

vào file main.xml trong forder l yout như s u

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/a ndroid"

View chứa trong nó thông qua các thuộc tính

View và ViewGroup có một tập các thuộc tính rất hay sử dụng được liệt kê qua bảng sau:

layout_width X c định chiều rộng của một View ho c ViewGroup

layout_height X c định chiều cao của một View ho c ViewGroup

layout_marginTop X c định phần mở rộng phía bên trên của View ho c ViewGroup

layout_marginBottom X c định phần mở rộng phí bên dư i của View ho c ViewGroup

layout_marginLeft X c định phần mở rộng phía bên trái của View ho c ViewGroup

layout_marginRight X c định phần mở rộng phía bên phải của View ho c ViewGroup

layout_gravity X c định c ch đ t c c đ i tượng View con

layout_weight X c định phần kích thư c thể hiện của View ho c ViewGroup (Sử dụng

v i thuộc tính layout_width ho c l yout_height được gán giá trị

“fill_parent” “wrap_content” ho c giá trị c định: 100px)

layout_x X c định toạ độ x của the View ho c ViewGroup

layout_y X c định toạ độ y của the View ho c ViewGroup

Chú ý rằng một vài các thuộc tính trên ch được sử dụng khi một View được định nghĩ rõ ràng trong một ViewGroup cụ thể

Ví dụ:

- Hai thuộc tính layout_weight và layout_gravity ch được sử dụng nếu View nằm trong

LinearLayout ho c là trong TableLayout

Xem xét phần code xml sau:

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"/>

- Phần tử TextView ở trên có chiều rộng bằng v i chiều rộng của phần tử cha của nó

(fill_parent- Trong trường hợp này nó bằng v i chiều rộng màn hình) Chiều cao trong trường hợp này, khi bạn khai báo là wrap_content thì chiều cao của nó sẽ là chiều cao cần

thiết mà nội dụng của TextView dùng để hiển thị đoạn text

Còn trong trường hợp dư i đây, chiều rộng của TextView được đ t là 105 pixels

<?xmlversion="1.0"encoding="utf-8"?>

M c định của LinearLayout sẽ sắp xếp c c đ i tượng đồ hoạ (View) trong nó theo chiều ngang, nếu bạn mu n th y đổi nó thành chiều dọc bạn có thể sửa phần code phần tử g c LinearLayout

</LinearLayout>

Bằng c ch th y đổi thuộc tính android:orientation=“vertical” t đã th y đổi cách LinearLayout sắp xếp c c đ i tượng đồ hoạ bên trong nó Thuộc tính android:orientation có thể gán

hai giá trị tương ứng sau:

- vertical D ng để x c định c c đ i tượng đồ hoạ chứa trong LinearLayout được sắp xếp

theo chiều dọc

- horizontal D ng để x c định c c đ i tượng đồ hoạ chứa trong LinearLayout được sắp

xếp theo chiều ngang

Giá trị của thuộc tính kích thư c một đ i tượng đồ hoạ trong ndroid được phân thành hai loại:

- Giá trị c định X c định cụ thể giá trị kích thư c Ví dụ: 150px)

- Giá trị linh hoạt Giá trị này phụ thuộc vào một trong hai yếu t :

o Nội dung mà một đ i tượng đồ hoạ mu n hiện thị.V i View thì nội dung này là đoạn

text,… V i ViewGroup là các phần tử con mà nó chứa

o Phần không gi n mà đ i tượng cha còn tr ng

Trong LinearLayout bạn có thể áp dụng các thuộc tính layout_weight và layout_gravity như

android:layout_height="wrap_content"

android:text="@string/hello"/>

<Button android:layout_width="100px"

Activity ta sẽ được giao diện như s u

Phân tích phần giao diện bên trên ta sẽ thấy rằng:

- Thẻ g c của toàn bộ giao diện là LinearLayout v i hai thuộc tính

android:layout_width=“fill_parent”và android:layout_height=“fill_parent”x c định chiều rộng và chiều cao LinearLayout sẽ chiếm toàn chiều rộng và chiều cao củ đ i tượng chứ n Nhưng do thẻ LinearLayout này là thẻ g c (Thẻ ngoài cùng) nên nó sẽ được đ t

lên màn hình điện thoại khi ứng dụng được mở lên Vì vậy nó sẽ chiếm toàn bộ chiều rộng

và chiều cao củ màn hình điện thoại Đây là một trường hợp giá trị kích thư c của một đ i tượng đồ hoạ là linh hoạt và phụ thuộc vào không gian còn tr ng củ đ i tượng cha (Trong trường hợp này đ i tượng ch là màn hình điện thoại, do chư chứa gì hết nên n được xem

là rỗng)

- Thẻ TextView có thuộc tính android:layout_width="fill_parent" và

android:layout_height=“wrap_content” xác định kính thư c chiều ngang của TextView

sẽ chiếm toàn bộ khoảng tr ng còn lại đ i tượng chứa nó (LinearLayout), và chiều cao của TextView sẽ phụ thuộc vào nội dung nó cần hiển thị (TextView chiếm một khoảng chiều

cao bằng v i chiều cao cần để hiển thị đoạn text mà n đ ng gi )

- Thẻ Button có thuộc tính android:layout_width=“100px”x c định kích thư c chiều rộng

của nó là 100px Đây là một trường hợp mà giá trị kích thư c của một đ i tượng đồ hoạ là

c định (Chiều rộng = 100px)

- Thẻ Button có thuộc tính android:layout_gravity="right"x c định rằng đ i tượng Button

khi được nạp lên giao diện sẽ canh lề bên phải so v i đ i tượng chứa nó

Bảng sau liệt kê các giá trị có thể gán cho thuộc tính android:layout_gravity:

top Đ t đ i tượng đồ hoạ lên đ nh trên c ng củ ViewGroup chứ n Thuộc tính

này không th y đổi gi trị kích thư c

bottom Đ t đ i tượng đồ hoạ xu ng dư i c ng củ ViewGroup chứ n Thuộc tính

này không th y đổi gi trị kích thư c

left Đ t đ i tượng đồ hoạ bên tr i củ ViewGroup chứ n Thuộc tính này không

th y đổi gi trị kích thư c

right Đ t đ i tượng đồ hoạ bên phải củ ViewGroup chứ n Thuộc tính này không

th y đổi gi trị kích thư c

center_vertical Đ t đ i tượng đồ hoạ c nh gi theo chiều dọc củ ViewGroup chứ n Thuộc

tính này không th y đổi gi trị kích thư c

fill_vertical Tăng kích thư c củ củ đ i tượng đồ hoạ tràn đầy chiều c o ViewGroup chứ

nó

center_horizontal Đ t đ i tượng đồ hoạ c nh gi theo chiều ng ng củ ViewGroup chứ n

Thuộc tính này không th y đổi gi trị kích thư c

fill_horizontal Tăng kích thư c củ củ đ i tượng đồ hoạ tràn đầy chiều rộng ViewGroup

chứ n center Đ t đ i tượng đồ hoạ ở chính gi củ ViewGroup chứ n Thuộc tính này

không th y đổi gi trị kích thư c

fill Tăng kích thư c củ củ đ i tượng đồ hoạ tràn đầy kích thư c ViewGroup

chứ n clip_vertical Additional option that can be set to have the top and/or bottom edges of the

child clipped to its container's bounds The clip will be based on the vertical gravity: a top gravity will clip the bottom edge, a bottom gravity will clip the top edge, and neither will clip both edges

clip_horizontal Additional option that can be set to have the left and/or right edges of the child

clipped to its container's bounds The clip will be based on the horizontal gravity: a left gravity will clip the right edge, a right gravity

Lưu ý Thuộc tính android:layout_gravity có thể gán nhiều hơn một thuộc tính

VD: android:layout_gravity:“top|left”

Cả hai thẻ Button và EditText đều có thuộc tính android:layout_height=“wrap_content”và android:layout_weight v i các giá trị tương ứng: Button: 0.2 EditText: 0.8.Nếu thuộc tính kích thư c của một đ i tượng đồ hoạ (android:layout_height và android:layout_width) x c định là

wrap_content thì kích thư c này sẽ vừ đủ để hiển thị nội dung của nó (V i View thì nội dung này là

đoạn text,… V i ViewGroup là các phần tử con mà nó chứa) Tuy nhiên nếu sử dụng thêm thuộc tính

android:layout_weight thì kích thư c củ c c đ i tượng đồ hoạ này sẽ phụ thuộc vào giá trị của thuộc tính này.Để giải thích về cách sử dụng thuộc tính android:layout_weight ta xem xét lại ví dụ trên như

sau:

- Ta có một thẻ g c LinearLayout chứ b đ i tượng TextView, Button, EditText Cả ba

đ i tượng này được sắp xếp theo chiều dọc từ trên xu ng

- Chiều cao của TextView là “wrap_content”nghĩ là n sẽ có một độ cao vừ đủ để hiển thị

một đoạn text c định “Hello ndroid”-Ta sẽ bàn về khái niệm @string/hello ở phần sau của giáo trình)

- S u khi x c định được chiều cao của TextView thì ta sẽ còn lại một khoảng tr ng d ng để sắp xếp Button và EditText Ta gọi khoảng tr ng này là H Chiều cao củ h i đ i tượng này là “wrap_content” và gi trị android:layout_weightlần lượt là 0.2 và 0.8.Lúc này chiều cao của Button sẽ là 0.2*H và chiều cao của EditText là 0.8*H

Ta cần lưu ý rằng tổng android:layout_weightcủ c c đ i tượng trong cùng một

ViewGroupluôn là 1.0 (android:layout_weight của Button + android:layout_weight củaEditText = 1.0)

1.2 AbsoluteLayout

AbsoluteLayout cho bạn ch định chính xác vị trí của các thành phần con, xem xét ví dụ sau:

<?xmlversion="1.0"encoding="utf-8"?>

Khi nạp phần code xml trên lên Activity thì ta sẽ được giao diện như s u

Ở ví dụ trên xuất hiện thêm hai thuộc tính là:

- android:layout_x: X c định toạ độ x củ đ i tượng trong toạ độ Oxy

- android:layout_y X c định toạ độ x củ đ i tượng trong toạ độ Oxy

Lưu ý G c toạ được x c định được x c định là điểm trên cùng ở góc trái của ViewGroupgần

nhất chứa nó

1.3 TableLayout

TableLayout d ng để tổ chức các đ i tượng Viewdư i dạng một bảng gồm nhiều hàng, nhiều cột Mỗi dòng được thể hiện bằng một thẻ <TableRow> Trong đ mỗi dòng có thể chứa một ho c

nhiều đ i tượng View Mỗi đ i tượng View đ t trên một dòng sẽ tạo thành một ô trong giao diện bảng

do TableLayout tạo ra Chiều rộng của mỗi cột được x c định bằng chiều rộng l n nhất của các ô nằm trên cùng một cột

android:width="120px"

/>

<EditText android:id="@+id/txtUserName"

android:width="200px"/>

</TableRow>

<TableRow>

<TextView android:text="Password:"

/>

<EditText android:id="@+id/txtPassword"

android:text="Log In"/>

</TableRow>

</TableLayout>

Khi nạp phần code xml trên lên Activity thì ta sẽ được giao diện như s u

Ở ví dụ trên, giao diện đồ hoạ được tổ chức dư i dạng một bàng gồm có b n dòng v i hai cột

Ô ở ng y dư i ô chứa TextView Password có một thẻ <TextView/>rỗng Nếu không đ t thẻ này, thì CheckBox Remember Password sẽ xuất hiện ng y bên dư i TextView P ssword như hình s u

Chú ý rằng mỗi View được nhúng bên trong RelateLayout có các thuộc tính cho phép xác định

m i quan hệ gi a chúng v i RelativeLayout chứa nó ho c các View, ViewGroup khác Một s thuộc tính như là

- layout_alignParentTop: Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng

đồ hoạ này sẽ nằm sát trên cùng của RelativeLayout chứa nó

- layout_alignParentBottom: Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng đồ hoạ này sẽ nằm sát dư i cùng của RelativeLayout chứa nó

- layout_alignParentLeft:Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng

đồ hoạ này sẽ nằm sát bên trái của RelativeLayout chứa nó

- layout_alignParentRight: Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng

đồ hoạ này sẽ nằm sát bên phải của RelativeLayout chứa nó

- layout_alignLeft: Thuộc tính này x c định id củ đ i tượng View ho c ViewGroup mà nó

sẽ nằm ở bên trái củ đ i tượng đ

- layout_alignRight: Thuộc tính này x c định id củ đ i tượng View ho c ViewGroup mà nó

sẽ nằm ở bên phải củ đ i tượng đ

- layout_below: Thuộc tính này x c định id củ đ i tượng View ho c ViewGroup mà nó sẽ nằm ở bên dư i củ đ i tượng đ

- layout_above: Thuộc tính này x c định id củ đ i tượng View ho c ViewGroup mà nó sẽ nằm ở bên trên đ i tượng đ

- layout_centerInParent: Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng

đồ hoạ này sẽ nằm ở chính gi a của RelativeLayout chứa nó

- layout_centerHorizontal:Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng

đồ hoạ này sẽ canh gi a theo chiều ngang so v i RelativeLayout chứa nó

- layout_centerVertical: Thuộc tính này có hai giá trị true/false Nếu là true thì đ i tượng đồ hoạ này sẽ canh gi a theo chiều dọc so v i RelativeLayout chứa nó

Khi nạp phần code xml trên lên Activity thì ta sẽ được giao diện như s u

1.5 FrameLayout

FrameLayout là ViewGroup đ c biêt có thể sử dụng để hiển thị một View đơn Tất cả các đ i

tượng View được đ t trong FrameLayout sẽ luôn ở trên cùng bên trái của FrameLayout

Xem xét đoạn code xml sau:

<?xmlversion="1.0"encoding="utf-8"?>

android:layout_height="wrap_content"

android:layout_x="40px"

android:layout_y="35px">

<ImageView android:src="@drawable/android_logo"

Nếu ta thêm một View khác (Một Button) bên trong FrameLayout, View m i thêm vô sẽ nằm

đè lên View trư c đ :

<?xmlversion="1.0"encoding="utf-8"?>

Sau khi nạp lên Activity ta sẽ được giao diện như s u

Bạn có thể thêm nhiều View vào Fr meL yout, nhưng mỗi view đ sẽ chồng lên đ nh của View trư c đ và nằm sát góc trên cùng bên trái của FrameLayout chứa nó

1.6 ScrollView

Một ScrollView là một trường hợp đ c biệt của FrameLayout, n cho phép người sử dụng

cuộn qua một d nh s ch c c đ i tượng View ho c ViewGroup chiếm gi không gian hiển thị l n hơn

so v i màn hình điện thoại hổ trợ ScrollView ch có thể chứa duy nhất một đ i tượng View ho c ViewGroup Thường là LinearLayout)

Chú ý: Không sử dụng ListView cùng v i ScrollView ListView được thiết kế để hiển thị một

danh sách các đ i tượng có liên hệ v i nh u VD D nh s ch cont ct và được t i ưu ho để phù hợp

v i nh ng danh sách l n

Ví dụ sau minh họa ScrollView chứa một LinearLayout:

Th c thi đoạn code trên bạn sẽ được kết quả như sau:

<?xmlversion="1.0"encoding="utf-8"?>

Sau khi nạp phần code xml trên lên Activity ta sẽ được giao diện như s u

Giao diện trên cho phép ta dùng ngón tay vu t lên màn hình theo chiều từ dư i lên

2 View

Đơn vị căn bản của giao diện đồ hoạ trên Android chính là View Một View đại diện cho một widget, trong bài học này bạn sẽ được học về s khác nhau gi a các View mà bạn có thể sử dụng nó trong quá trình phát triển ứng dụng android

Đây là một danh mục các loại View mà chúng ta sẽ đề cập trong bài này:

- Basic View: Đây là nh ng đ i tượng View thường xuyên sử d ng như TextView, EditText, Button

- Picker View Đây là nh ng đ i tượng View cho phép người dùng ứng dụng l a chọn một option, ngày th ng, thơi gi n này đ Loại View này thường hiển thị dư i dạng một danh sách các l a chọn như cont ct, d te time…

- Display View Đây là loại đ i tượng View d ng để hiển thị hình ảnh như G llery và ImageSwitcher

- Menu Đây là loại đ i tượng View d ng để tạo giao diện menu l a chọn

- Additional View: nh ng đ i tượng View như n logClock và Digit lClock

Tạo một project m i v i các thông s như s u

Project name: UIExample Build target: Android 2.3.3

Application name: UI Example Package name: android.uiexample Create Activity: main

- ToggleButton

- RadioButton

- RadioGroup

- TextView

Khi bạn tạo một project m i trong android, eclipse sẽ tạo một file m in xml trong thư mục

l yout res/l yout trong đ n chứa một TextView như s u

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/a ndroid"

TextView được sử dụng để hiển thị một đoạn văn bản Đây là một View cơ bản thường được sử

dụng trong phát triển ứng dụng Android Nếu cần cho phép người sử dụng ch nh sử văn bản đ ng hiển thị thì có thể sử dụng một subclass của TextView là EditText Đây là một loại View mà chúng ta sẽ xem xét trong phần sau Bên cạnh TextView, còn có một s View cơ bản thường được sử dụng trong cách ứng dụng ndroid như Button, Im geButton, EditText, CheckBox, ToggleButton, R dioButton

ImageButton:Nút nhấn có hỗ trợ hiển thị hình ảnh trên nút nhấn

EditText Đây là một class con của TextView, bổ sung thêm khả năng cho phép ch nh sử đoạn

text đ ng hiển thị trên nó

CheckBox: Một loại nút nhấn đ c biệt có hai trạng thái: Checked ho c Unchecked

RadioGroup and RadioButton:R dioButton cũng là loại nút nhấn có hai trạng thái: Checked

và Unchecked Một R dioButton khi đã check chọn thì ko thể uncheck R dioGroup được sử dụng để nhóm một ho c nhiều đ i tượng RadioButton Bằng cách sử gom nhóm các RadioButton vào một

RadioGroup cho phép hạn chế ch được check chọn một RadioButton trong cùng một group

ToggleButton: Thể hiện hai trạng thái: Check ho c Uncheck có sử dụng đèn b o light

publicvoid onCheckedChanged(RadioGroup group, int checkedId) {

// -displays the ID of the RadioButton that is

displayToast(Integer.toString(checkedId));

}

});

ToggleButton toggleButton = (ToggleButton)

Thêm các dòng mã sau vào file main.java để hiển thị activity BasicViewsExampleActivity:

package android.uiexample;

import android.app.Activity;

importandroid.content.Intent;

import android.os.Bundle;

publicclass main extends Activity {

/** Called when the activity is first created */

Ta sẽ xem xét lại phần code hiện th c BasicViewsExample ctivity j v để xem cách các loại

đ i tượng View hoạt động

Trư c tiên BasicViewsExampleActivity là một class extends class Activity của Android BasicViewsExampleActivity sẽ tạo thành một cửa sổ ctivity khi n được nạp lên bởi chương trình Ta

sẽ xem xét phương thức public void onCreate(Bundle savedInstanceState)để làm rõ cách hoạt động

của Button, ImageButton, EditText, CheckBox, ToggleButton, RadioButton và RadioButton

Phương thức public void onCreate(Bundle savedInstanceState) như t đã biết là phương thức

đầu tiên sẽ chạy khi một ctivity được nạp lên màn hình điện thoại Trên phương thức này ta sẽ gọi

phương thức setContentView(R.layout.basic_views); để thông báo cho Activity hiện tại nạp tất cả các

đ i tượng đồ hoạ được khai báo trong file basic_views.xml Được đ t trong thư mục res/layout/basic_views.xml) Sau khi nạp tất cả c c đ i tượng đồ hoạ từ file xml lên giao diện của Activity ta tiến hành tạo các liên kết đến c c đ i tượng đồ hoạ mà ta cần th y đổi thuộc tính ho c tác động các s kiện lên nó Để tạo liên kết đến đ i tượng Button c id là btnOpen đã được khai báo trong

Button btnOpen = (Button) findViewById(R.id.btnOpen);

Đầu tiên ta sử dụng phương thức findViewById(R.id.btnOpen); để tìm về đ i tượng Button có

id là btnOpen được kh i b o trong file xml Phương thức findViewById(R.id.btnOpen); sẽ trả về một

đ i tượng kiểu View nên ta cần ép kiểu đ i tượng được trả về thành kiểu Button và g n cho đ i tượng btnOpen kiểu Button Từ đây t c thể gọi c c phương thức để th y đổi các thuộc tính củ đ i tượng Button nằm trên giao diện đồ hoạ của Activity

Tiếp đến ta gọi phương thức btnOpen.setOnClickListener() để g n cho đ i tượng btnOpen

một đ i tượng d ng để lắng nghe s kiện người nhấn click lên đ i tượng btnOpen Một đ i tượng

mu n xử lý được s kiện người dùng nhấn lên Button thì đ i tượng đ phải cài đ t (implement) lại

interface OnClickListener Interface này ch có duy nhất một phương thức là public void onClick(View v) Đây là phương thức sẽ được gọi khi người dùng nhấn lên đ i tượng btnOpen

Ở ví dụ này ta sẽ không xây d ng một class riêng biệt để xử lý s kiện người dùng nhấn lên đ i tượng btnOpen mà sẽ sử dụng inner class ngay trong BasicViewsExample ctivity như phần code sau:

hiển thị đoạn text "You have clicked the Open button" bằng cách sử dụng đ i tượng Toast (Ta sẽ tạm không qu n tâm đến đ i tượng Toast trong mục này của giáo trình)

Bằng c ch này khi người dùng nhấn lên đ i tượng btnOpen thì hệ th ng sẽ gọi phương thức onClick kể trên Tham s View v đi kèm được truyền theo phương thức onClick chính là đ i tượng mà người dùng m i tương t c Trong trường hợp này cũng chính là đ i tượng btnOpen) Ta có thể sử dụng phương thức v getId để lấy về id củ đ i tượng được gởi kèm

V i đ i tượng Im geButton cũng tương t như Button nhưng c hỗ trợ thêm thuộc tính

android:src="@drawable/icon" để gán hình nền cho ImageButton

Lưu ý rằng tất cả các hình ảnh sử dụng trên giao diện của ứng dụng android cần phải đ t trong thư mục res/drawable và sử dụng cú ph p “@dr w ble/tenHinh nh” để sử dụng hình ảnh trên giao diện ứng dụng Android (VD: Gán hình nền cho ImageButton)

Ta tiếp tục xem xét đ i tượng CheckBox ở phần code sau:

CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave); checkBox.setOnClickListener(new View.OnClickListener()

Dễ dàng nhận thấy dòng lệnh CheckBox checkBox = (CheckBox)

findViewById(R.id.chkAutosave); sẽ tạo liên kết đ i đ i tượng CheckBox có id là chkAutosave Sau

đ t cũng tiếp tục g n đ i tượng lắng nghe s kiện người dùng nhấn lên CheckBox như của ví dụ về Button ở trên Trên hàm onClick củ inner cl ss được sử dụng để lắng nghe s kiện người dùng nhấn lên CheckBox kể trên sẽ ép kiểu đ i tượng v thành kiểu CheckBox và gọi phương thức getChecked()

để kiểm tra CheckBox hiện tại đ ng ở trạng thái checked hay unchecked và hiển thị đoạn text tương ứng

Cách sử dụng và thuộc tính củ ToggleButton cũng tương t như CheckBox, tuy nhiên ToggleButton có bổ sung thêm đèn b o light indicator để làm nổi bật ToggleButton

Tiếp đến ta sẽ xem xét cách sử dụng R dioButton và R dioGroup R dioButton cũng tương t như CheckBox tuy nhiên khi gom nh m c c R dioButton và đ t vào cùng một RadioGroup thì tại một thời điểm ta ch có thể chọn duy nhất một RadioButton trong cùng một nhóm

Ví dụ: Khi check chọn RadioButton có id là rdb1 thì rdb2 t chuyển thành trạng thái

unchecked Nếu chọn lại rdb2 thì rdb1 t động chuyển thành trạng thái unchecked

Ta xem xét phần code xml trích từ basic_views.xml sau:

Dòng lệnh RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1); sẽ tạo liên

kết đến R dioGroup c id là rdbGp1 S u đ gọi phương thức

radioGroup.setOnCheckedChangeListener() để g n cho r dioGroup đ i tượng sẽ xử lý s kiện khi mà

l a chọn củ c c R dioButton trong R dioGroup rdbGp1 th y đổi Đ i tượng này cũng là một khai báo

inner class tắt Trong đ cài đ t lại phương thức public void onCheckedChanged(RadioGroup

group, int checkedId) Đây là phương thức mà hệ th ng sẽ gọi khi s l a chọn của các RadioButton

trên group th y đổi Phương thức onCheckedChanged đơn giản là gọi phương thức displayToast để

in ra id của RadioButton hiện tại trong group đ ng ở trạng thái checked

Đ i tượng đồ hoạ tiếp theo chúng ta sẽ nghiên cứu là EditText Đây là một sub class của

TextView Ngoài chức năng hiển thị một đoạn văn bản như TextView t còn c thể ch nh sử đoạn text

trên EditText Đoạn text mà EditText hiển thị được x c định bằng thuộc tính android:text và có thể truy

xuất ho c th y đổi bẳng cách gọi phương thức EditText.getText() và EditText.setText() Ngoài ra nếu

bạn mong mu n EditText hiển thị một đoạn text dư i dạng các kí t đ c biệt nhằm che dấu nội dung

củ đoạn text thì t th y đổi thuộc tính ndroid p ssword=“true” như s u

<EditTextandroid:id="@+id/txtName"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:password="true"/>

2.1.1 ProgressBar View

ProcessBar là kiểu đối tượng View cung cấp một thông tin phản hồi trực quan về một tác

vụ đang thực thi dưới nền

VD: Việc download dữ liệu từ một trang web cần phải thể hiện phần trăm dữ liệu đã download được

Sử dụng ctivity đã tạo như bài trư c, thêm một s thành phần vào basicviews.xml:

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/a ndroid"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

Ví dụ: Gửi d liệu đến một webservice nào đ và chờ đợi s hồi đ p của server

Phần code dư i đây ch ra cách sử dụng luồng để th c thi một tác vụ và cập nhật lại trạng thái của ProcessBar sau khi tác vụ hoàn tất:

Private static int progress = 0;

private ProgressBar progressBar;

private int progressStatus = 0;

private Handler handler = new Handler();

// -do some work in background

thread -Thread updateProcessBarthread -Thread = new thread -Thread(new Runnable()

Phần code phía trên sử dụng một luồng tên là updateProcessBarThreadđể tăng giá trị của biến int processStatus từ 1 lên 10 Tất cả công việc kể trên được thực thi trong hàm run() của Thread với nội dung sau:

publicvoid run()

{

progressBar.setVisibility(View.GONE);

} });

}

Trong đ Thread sẽ th c hiện một vòng l p while th c thi liên tục khi processStatus<10 Vòng

l p while này sẽ gọi phương thức doSomeWork():

e.printStackTrace();

}

return ++progress;

}

Phương thức doSomeWork sẽ cho luồng updateProcessBarThread hiện tại tạm dừng 500ms

và s u đ tăng process lên một đơn vị và trả về Giá trị trả về sẽ gán cho biến processStatus Khi processStatus >=10 chương trình sẽ gọi phương thức h ndler post để post một đ i tượng implement

interface Runable() Interface Runable ch có duy nhất một phương thức run Dohandle là đ i tượng

được khởi tạo ở phần khai báo các thuộc tính của BasicViewsExampleActivity nên là một đ i tượng Handle gắn v i the d mà ctivity B sicViewsEx mple ctivity đ ng th c thi Do vậy khi ta post một

đ i tượng Run ble thì đ i tượng này sẽ được đư vào mess ge queue và th c thi trên thread của BasicViewsExampleActivity Điều này nghe chừng như làm rắc r i thêm phần code của chúng ta tuy nhiên nó là cần thiết bởi vì lệnh progressBar.setVisibility(View.GONE); không thể th c thi trên thread

updateProcessBarThread Tất cả các câu lệnh liên qu n đến th y đổi thuộc tính củ c c đ i tượng đồ

hoạ ch có thể th c thi trên UIThread Chính vì vậy ta phải gởi một đ i tượng Run ble đến thread của BasicViewsExampleActivity để th c thi việc th y đ i ProcessBar

Nếu bạn không mu n sử dụng ProcessBar v i chế độ Indeterminate, bạn có thể chuyển chế độ ProcessBar về chế độ hiển thị dư i dạng một thanh ngang thể hiện phần trăm của tác vụ