Thit k giao din trn Android

MultiUni
Trn V Tt Bnh

Tng quan
Trong Android, dng Activity hin th mn
hnh.
Mi activity s cha cc View theo dng cu
trc cy, ngha l mt Layout gc cha cc
view/layout con bn trong hoc ch c 1 view
duy nht. (lu Layout cng l mt view nh)
C th thit k giao din trong code java hoc
trong file xml trong th mc layout.

Tree view

Layout mu ca helloworld
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/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>

Mt s thuc tnh c bn
Layout_width, layout_height: chiu rng ca
view (fill_parent l to bng kch thc ca
layout cha view ny, wrap_content l va
ni dung cn hin th ca view)
Orientation: vi LinearLayout, vic sp xp
cc view l nm k nhau theo hng ngang hoc
hng dc, ta khai bo orientation chn sp
theo kiu no (horizontal/vertical)

Mt s thuc tnh c bn
Gravity: thuc tnh ny qui nh cc view nm
bn trong layout s t theo v tr no so vi
layout(trung tm, tri , phi, trn di)
Weight: cc view phan chia t l din tch
hin th trn mn hnh (t l tnh theo weight
ca tng view trn tng s weight, cc view ko
khai bo weight th s xem qua width v
height)

V d c bn
Cc bn vo link ny ly code cho vo ng
dng, lu c thm cc dng gii thch ting
Anh nh
http://developer.android.com/resources/tutorial
s/views/hello-linearlayout.html

Giao din vi LinearLayout

Gi s bn cn thit k mt mn hnh nh sau:

Giao din vi LinearLayout

Vi LinearLayout (LL), cc view bn trong n c t k
nhau theo hng ngang hoc hng dc (cn lu c im ny)
Vi v d va ri, ta thy cch phn tch nh sau:
Nguyn tc ch yu l phn nhm cc View lin tip k nhau (nh 3
TextView k nhau theo hng dc hoc hng ngang trong v d trn)
vo trong mt LL, phn r t ln n nh.
Nh vy mn hnh gm 1 LL ln bao bn ngoi, nhn thy bn trong
chia thanh 2 phn trn di r rng vy thuc tnh ca LL ny l dng
dc, sau chia i ra v phn tch tip.
Phn bn trn li chia thnh 2 na theo hng ngang l mt LL dng
ngang, li chia i: mt bn l 1 ImageView (v ch c 1 view nn ko
cn b vo trong LL), mt bn li l 1 LL cha 3 TextView theo hng
dc.
Na bn di ta thy r rng cha 3 TextView k nhau theo hng
ngang cho vo 1 LL dng ngang l xong.

Giao din vi LinearLayout

Xem cy:

Thc hnh ti ch
Lm mt layout hin th nh trong hnh:

Cc bc nh sau:
Phn tch thnh phn layout trn giy (tho lun)
Phn tch c im cc view
Add thm resource nh
Th trc vi vi tab layout (khi view file xml
trong eclipse)
a vo thc thi trn my, nh gi.

Mt s loi layout khc

FrameLayout: cc view bn trong c qui
nh v tr bng khong cch so vi bin tri v
trn so vi layout, cc view c th ln nhau.
RelativeLayout: cc view c thit k da
trn quan h gia chng vi nhau v vi
layout cha chng.
AbsoluteLayout: dnh cho bn no lm nhiu
vi C#, nhng ko khuyn khch vi Android
nh.

Lu khi thit k giao din

Hn ch sau ca cy
Vi cc Layout phc tp, ng dng
RelativeLayout
Nn chn vo d liu tm xem trc layout
hin th ra sao bn tab layout (trong eclipse),
nhng xong ri th nh xa d liu tm i.
FrameLayout c vn vi background
Mun tm thuc tnh g, bm android: ri i
suggestion s ra xem.

Code nhanh mt s v d
Th cng nhau ngi code nhanh nh (khi
hiu ri th lm s rt nhanh thi)
http://developer.android.com/resources/tutorials/vie
ws/hello-formstuff.html
http://developer.android.com/resources/tutorials/vie
ws/hello-webview.html

List
Rt hay dng trong Android. c bit cc ng
dng cn lu tr v hin th nhiu d liu.
List l mt danh sch cc view thng thng
c cng dng layout t lin nhau.

ApiDemos
M ng dng ApiDemos c sn:
New android project Create project from
existing source Browse m th mc SDK
platforms android-1.6 samples ApiDemos
OK Finish.
M th mc project trong eclipse src m
com.example.android.apis.view m file
List1.java

List1
Trong code ca List1, cc bn tch bch phn
to mi ArrayAdapter ra nh
ArrayAdapter adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, mStrings);
setListAdapter(adapter);

Adapter dng kt ni d liu cn a vo

list vi layout hin th v cung cp cho
ListView hin th.
Sau khi to xong adapter, truyn vo cho list
hin th (dng code bn di)

List1
Vi on to mt adapter, ta phn tch ra:
this: context, lc no lm view cng cn ri
android.R.layout.simple_list_item_1: layout hin
th mi item trong list, y ch c mt TextView
mStrings: mng cc chui k t, l d liu cn hin th

Gii thch on to adapter nh sau: to mt

adapter mi vi context ca activity hin ti, dng
layout simple_list_item_1 hin th mi item trong
list, d liu a vo ly t mng cc chui mStrings

List1
To mt project mi, copy code List1 b qua,
ri lm thm cc thao tc sau:
To 1 file layout c 1 TextView v 1 ImageView
Trong TextView thm dng ny
android:id=@+id/text

Sa li on to mi adapter cho n dng ci

layout va to. (tm xem c ci constructor no
gip ch chnh xc n ci TextView trong layout
hay ko)
Dng ny: ArrayAdapter(Context context, int resource,
int textViewResourceId, T[] objects)

Chy ng dng

List1
Gii thch:
Vi code mu ban u, layout ch c mt view duy
nht l TextView nn bn ko cn khai bo g khc
ngoi layout v a d liu dng mng String vo,
adapter s t hiu v x l.
Vi yu cu sau ny, layout ca b c nhiu hn 1
view, bn cn truyn thm id ca TextView vo (
y l R.id.text) adapter c th hiu bn mun d
liu ca bn c truyn vo view no trong
layout.

List14
M List14 ra, c v chy th.

Vi mc ch gip cho cc bn
khng n tham d lp vn c th
hiu c bi ging k cng nn
trong slide s c nhiu on ch
thch hi di.