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.