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

Phát triển ứng
dụng
Smartphone
Tài liệu lưu hành nội bộ
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-
Phát triển ứng dụng Smartphone – Android

1



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

Phần 02: Giao diện người dùng
c Huy
Email:
Phát triển ứng dụng Smartphone – Android

2

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
Phát triển ứng dụng Smartphone – Android

3


Ti thm này, bn có th thy rng thành phn ca mt ng dng android chính là
Activity. Activity
t vin trong m
n viwindow
t giao dii dùng bc setContentView(View). Ta có
th xem Activity là mt ca s ng dng. M

toàn màn hình (full screen window), m
trong mActivityGroup). Ca s ng dng mà Activity to ra có th cha các
widgets ng,  xây dng giao dii dùng ta s dng
file xml   ha mun th hin lên giao dii
dùng cùng vi các thung quynh cách thc th hi ha s
ng dngt ví d  ha th hin giao dii
dùng ca ng dng:
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
xmlns:android="
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"/>
</LinearLayout>
c thi, giao di hc np t c onCreate()
bng cách s dc setContentView() ca Activity  ch nh file xml mong mun.
Ví dụ:
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
Khi mã code cc biên dch, mi phn t c biên dch thành
nh hng cùng vi các thuc cung cp kèm theo các phn t trong
th  to ra các th hin c hi dùng cung cp cho
c np.

Vic xây dng mt giao dii dùng bng cách s dng file xml rn, tuy nhiên s
tn rt nhiu thi gian nu nhà lp trình cn phi xây dng giao di hi dùng mt các linh
Phát triển ứng dụng Smartphone – Android

4

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 hi dùng bng cách s dng câu lnh.
Views and ViewGroups
Mt Activity chng View ng ViewGroup. Mng View là
m ho dùng hin th ni dung lên màn hình. Ví d: Button, l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  b 
ho cha trong nó mt cách phù hp. Có th s d b tr  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 
LinearLayout
AbsoluteLayout
TableLayout
RelativeLayout
FrameLayout
ScrollView
i các bài hc s nói rõ v tng loi ViewGroup mt cách chi ti
rng, trong các bài thng xuyên lng các loi ViewGroup v xây dng
mt giao dii dùng.
1 ViewGroup
Tạo 1 Project đơn giản
ng dn này, chúng ta s to mt project android vi các thông s 
Project name: UIExample
Build target: Android 2.3.3.

Application name: UI Example
Package name: android.uiexample
Create Activity: main
Phát triển ứng dụng Smartphone – Android

5

1.1 LinearLayout
LinearLayout là loi ViewGroup cho phép sp xng View (cha trong nó) trong
mt c thy cách mt LinearLauout làm vi nào, hãy b sung
vào file main.
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android=" />ndroid"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
Trong file main.xml này, ta quan sát thy rng phn t gc là <LinearLayout> và nó có cha
mt thành phn <TextView>. Phn t <LinearLayout>  s nh cách hin th ca các ng
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:
Thuộc tính
Đặc tả
layout_width

nh chiu rng ca mt View hoc ViewGroup
layout_height
nh chiu cao ca mt View hoc ViewGroup
layout_marginTop
nh phn m rng phía bên trên ca View hoc ViewGroup
layout_marginBottom
nh phn m ri ca View hoc ViewGroup
layout_marginLeft
nh phn m rng phía bên trái ca View hoc ViewGroup
layout_marginRight
nh phn m rng phía bên phi ca View hoc ViewGroup
layout_gravity
ng View con
layout_weight
nh phc th hin ca View hoc ViewGroup (S dng
vi thuc tính layout_width ho  c gán giá tr
fill_parent wrap_contentc giá tr c nh: 100px)
layout_x
nh to  x ca the View hoc ViewGroup
layout_y
nh to  y ca the View hoc ViewGroup
Phát triển ứng dụng Smartphone – Android

6

Chú ý rng mt vài các thuc tính trên ch c s dng khi m
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-  ng hp này nó bng vi chiu rng màn hình). Chiu cao trong
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 n text.
ng hp , chiu rng ca TextView t là 105 pixels.
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
<TextView
android:layout_width="105px"
android:layout_height="wrap_content"
android:text="@string/hello">
</TextView>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:text="Button">
</Button>
</LinearLayout>
Khi phn code giao dic np lên Activity s c giao din :
Phát triển ứng dụng Smartphone – Android

7

M nh ca LinearLayout s sp x     ho (View) trong nó theo chiu
ngang, nu bn mui nó thành chiu dc bn có th sa phn code phn t gc LinearLayout
l
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="
<TextView
android:layout_width="105px"
android:layout_height="wrap_content"
android:text="@string/hello">
</TextView>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:text="Button">
</Button>
Phát triển ứng dụng Smartphone – Android

8

</LinearLayout>

B   i thuc tính android:orientation=“vertical”    i cách
LinearLayout sp x ho bên trong nó. Thuc tính android:orientation có th gán
hai giá tr ng sau:

- vertical  ho cha trong LinearLayout c sp xp
theo chiu dc.
- horizontal  ho cha trong LinearLayout c sp
xp theo chiu ngang.
Giá tr ca thuc m ho c phân thành hai loi:
- Giá tr c nh c th giá tr 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 ho mun hin th.Vi View thì nn
i ViewGroup là các phn t con mà nó cha.
Phát triển ứng dụng Smartphone – Android

9

o Phn 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 
sau:
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"/>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:text="Button"

android:layout_gravity="right"
android:layout_weight="0.2"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="0.8"/>
</LinearLayout>
Hình sau s hin th Button c gán vào bên phi ca phn t cha c
này là LinearLayout) s dng thuc tính layout_gravity, và s dng thuc tính layout_weight cho
các Button, EditText (tng giá tr ca layout_weight bng 1). Sau khi np phn giao din trên vào
Activity ta s c giao di
Phát triển ứng dụng Smartphone – Android

10


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”nh
chiu rng và chiu cao LinearLayout s chim toàn chiu rng và chiu cao cng
ch LinearLayout này là th gc (Th ngoài cùng) nên nó s t
n thoi khi ng dc m lên. Vì vy nó s chim toàn b chiu rng
và chiu cao cn thong hp giá tr c ca mi
 ho là linh hot và ph thuc vào không gian còn trng cng cha (Trong
ng hn thoa gì h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 c chiu ngang ca TextView
s chim toàn b khong trng còn li 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 hin th ).
Phát triển ứng dụng Smartphone – Android

11

- Th Button có thuc tính android:layout_width=“100px”c chiu rng
ca nó là 100pxng hp mà giá tr c ca m ho là
c nh (Chiu rng = 100px).
- Th Button có thuc tính android:layout_gravity="right"nh rng Button
c np lên giao din s canh l bên phi so v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:
Giá trị
Mô tả
top

này không .
bottom

.
left

.
right

.
center_vertical

.
fill_vertical


nó.
center_horizontal

.
fill_horizontal


center
 
.
fill
 ViewGroup

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
Phát triển ứng dụng Smartphone – Android

12

Thuc tính android:layout_gravity có th gán nhi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 ng: Button: 0.2 EditText: 0.8.Nu thuc tính kích
c ca m ho (android:layout_height và android:layout_width) nh là
wrap_content c này s v  hin th ni dung ca nó (Vi View thì ni dung này là
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ì c c 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 
sau:
- Ta có mt th gc LinearLayout chng TextView, Button, EditText. C ba
c sp xp theo chiu dc t trên xung.
- Chiu cao ca TextView là “wrap_content” có m cao v  hin th
mn text c -Ta s bàn v khái nim @string/hello  phn sau
ca giáo trình).
- c chiu cao ca TextView thì ta s còn li mt khong tr
sp xp Button và EditText. Ta gi khong trng này là H. Chiu cao cng
wrap_content android:layout_weightl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ng tng android:layout_weightc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"?>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
<Button
android:layout_width="188px"
android:layout_height="wrap_content"
android:text="Button"

android:layout_x="126px"
android:layout_y="361px"
/>
<Button
Phát triển ứng dụng Smartphone – Android

13

android:layout_width="113px"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="12px"
android:layout_y="361px"
/>
</AbsoluteLayout>
Khi np phn code xml trên lên Activity thì ta s c giao di

 ví d trên xut hin thêm hai thuc tính là:
- android:layout_x: nh to  x cng trong to  Oxy.
- android:layout_ynh to  x cng trong to  Oxy.
Gc to nh m trên cùng  góc trái ca ViewGroupgn
nht cha nó.
Phát triển ứng dụng Smartphone – Android

14

1.3 TableLayout
TableLayout  t chc các ng Viewi dng mt bng gm nhiu hàng, nhiu
ct. Mc th hin bng mt th <TableRow>i dòng có th cha mt hoc
nhing View. M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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.
Ví d:
<?xmlversion="1.0"encoding="utf-8"?>
<TableLayout
xmlns:android="
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#000044">
<TableRow>
<TextView
android:text="User Name:"
android:width="120px"
/>
<EditText
android:id="@+id/txtUserName"
android:width="200px"/>
</TableRow>
<TableRow>
<TextView
android:text="Password:"
/>
<EditText
android:id="@+id/txtPassword"
android:password="true"
/>
</TableRow>
<TableRow>
<TextView/>
<CheckBox

android:id="@+id/chkRememberPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Remember Password"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/buttonSignIn"
android:text="Log In"/>
Phát triển ứng dụng Smartphone – Android

15

</TableRow>
</TableLayout>
Khi np phn code xml trên lên Activity thì ta s c giao di

 ví d trên, giao di ho c t chi dng mt bàng gm có bn dòng vi hai ct.
Ô  i ô cha TextView Password có mt th <TextView/>rng. Nt th này, thì
CheckBox Remember Password s xut hii TextView 
Phát triển ứng dụng Smartphone – Android

16


1.4 RelativeLayout
RelativeLayout cho phép bn ch nh mi quan h gia các ng View/ViewGroup. Ta
xét ví d sau:
<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayout
android:id="@+id/RLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
>
<TextView
android:id="@+id/lblComments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comments"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
Phát triển ứng dụng Smartphone – Android

17

/>
<EditText
android:id="@+id/txtComments"
android:layout_width="fill_parent"
android:layout_height="170px"
android:textSize="18sp"
android:layout_alignLeft="@+id/lblComments"
android:layout_below="@+id/lblComments"
android:layout_centerHorizontal="true"
/>
<Button
android:id="@+id/btnSave"
android:layout_width="125px"

android:layout_height="wrap_content"
android:text="Save"
android:layout_below="@+id/txtComments"
android:layout_alignRight="@+id/txtComments"
/>
<Button
android:id="@+id/btnCancel"
android:layout_width="124px"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_below="@+id/txtComments"
android:layout_alignLeft="@+id/txtComments"
/>
</RelativeLayout>
Chú ý rng m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 
- layout_alignParentTop: Thuc tính này có hai giá tr true/false. N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    i
 ho này s nm sát i cùng ca RelativeLayout cha nó.
- layout_alignParentLeft:Thuc tính này có hai giá tr true/false. N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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 nh id cng View hoc ViewGroup mà nó
s nm  bên trái c
Phát triển ứng dụng Smartphone – Android

18

- layout_alignRight: Thuc tính nh id cng View hoc ViewGroup mà nó
s nm  bên phi c
- layout_below: Thuc tính nh id cng View hoc ViewGroup mà nó s
nm  bên i c
- layout_above: Thuc tính nh id cng View hoc ViewGroup mà nó s
nm  
- layout_centerInParent: Thuc tính này có hai giá tr true/false. N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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
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

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

19

1.5 FrameLayout
FrameLayout là c biêt có th s d hin th mt t c các i
ng t trong FrameLayout s luôn  trên cùng bên trái ca FrameLayout.
Xem xét n code xml sau:
<?xmlversion="1.0"encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/widget68"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
<FrameLayout

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="40px"
android:layout_y="35px">
<ImageView
android:src="@drawable/android_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</FrameLayout>
</AbsoluteLayout>
  có mt FrameLayout bên trong mt AbsoluteLayout. Bên trong FrameLayout, bn
nhúng mt ImageView. Sau khi np phn code xml trên lên Activity bn s c giao di
Phát triển ứng dụng Smartphone – Android

20


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
c :
<?xmlversion="1.0"encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/widget68"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_x="40px"
android:layout_y="35px"
>
<ImageView
android:src="@drawable/android_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Phát triển ứng dụng Smartphone – Android

21

/>
<Button
android:layout_width="124px"
android:layout_height="wrap_content"
android:text="Print Picture"
/>
</FrameLayout>
</AbsoluteLayout>
Sau khi np lên Activity ta s c giao di

Bn có th thêm nhiu View vào  chnh ca View
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 ng hc bit ca FrameLayout  i s dng
cun qua mng View hoc ViewGroup chim gi không gian hin th l
so v  n thoi h tr. ScrollView ch có th cha duy nht m ng View hoc
ng là LinearLayout).
Phát triển ứng dụng Smartphone – Android

22

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 ng có liên h vc t 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n code trên bn s c kt qu au:
<?xmlversion="1.0"encoding="utf-8"?>
<ScrollView
android:id="@+id/widget54"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="
>
<LinearLayout
android:layout_width="310px"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1"
/>
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2"

/>
<Button
android:id="@+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3"
/>
<EditText
android:id="@+id/txt"
android:layout_width="fill_parent"
android:layout_height="300px"
/>
<Button
android:id="@+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
Phát triển ứng dụng Smartphone – Android

23

android:text="Button 4"
/>
<Button
android:id="@+id/button5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5"
/>
</LinearLayout>
</ScrollView>

Sau khi np phn code xml trên lên Activity ta s c giao di

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 i lên.
Phát triển ứng dụng Smartphone – Android

24

2 View
 n ca giao di ho trên Android chính là View. M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.
t danh mc các loi View mà chúng ta s  cp trong bài này:
- Basic View: ng xuyên s dng 
Button.
- Picker Viewi dùng ng dng la chn mt
ng hin th i dng mt danh
sách các la ch
- Display View         hin th hình    
ImageSwitcher.
- Menu to giao din menu la chn
- Additional View: nh
To mt project mi vi các thông s 
Project name: UIExample
Build target: Android 2.3.3.
Application name: UI Example
Package name: android.uiexample
Create Activity: main
2.1 Basic Views
Trong phn này, ta s n trong android mà cho phép hin th mn

vc hin mt s các la chn. Ta s tin hành tìm hiu v 
- TextView
- EditText
- Button
- ImageButton
- CheckBox