Author: Nguyn Vn Kin St.

Tm hiu cc Layout c bn trong Android

thit k giao din trong android, cc bn s s dng cc View v cc ViewGroup m android cung cp. Cc bn c th hnh dung c phn no cch th hin mt giao din qua s sau :

u tin l mt ViewGroup, tip bn trong ViewGroup c th cha cc ViewGroup khc v cc View khc, (c th hiu l cc View lng cc View) tuy nhin Android khuyn bn khng nn lng qu nhiu View trong mt giao din ca mt Activity (nn <10). Chng ta cng tm hiu mt s Widget c bn trong Android. Android cung cp mt s widget c bn sau nh: Button, EditText, RadioButton, CheckBox, TextView . Gi chng ta cng tm hiu cch hin th cc widget c bn sau. Hin th Button: Trong file main.xml bn khai bo thm dng m sau trong Linear layout mc nh ca file n: <Button android:layout_width =fill_parent android:layout_height=wrap_content android:text =Click Me ! /> Android hiu l: hin th 1 button c chiu rng bng chiu rng mn hnh, chiu cao s bng ni dung ca Text ca Button v cui cng text ca Button l : Click Me !. Cc thuc tnh trong cc View ca android cc bn c th tham kho ti a ch sau: http://developer.android.com/reference/android/widget/TextView.html Hin th TextView:

<TextView android:layout_width =fill_parent android:layout_height=wrap_content android:text=This's my TextView /> Hin th EditText: <EditText android:layout_width =fill_parent android:layout_height=wrap_content /> Hin th CheckBox: <CheckBox android:layout_width =wrap_content android:layout_height=wrap_content android:text=you cant check it, now /> <RadioButton android:layout_width =wrap_content android:layout_height=wrap_content android:text=you cant check it, now /> cch hin th mt image trong android cc bn lm nh sau, bn vo th mc project ca bn tm n th mc res, v tm n cc file drawable-hdpi, drawable-ldpi, drawable-mdpi, sau b nh m bn mun s dng cho cc View trong project ca bn. Bn s c thuc tnh xml sau li nh ra :
android:drawable="@drawable/ten_file_anh

v d trc quan, khng v d y, demo th v hn

1.Linear Layout
y l mt trong nhng layout tng i c s dng nhiu b cc cc View mt cch n gin nhng hiu qu, cc View c bao trong Linear Layout s c hin th theo chiu dc hoc theo chiu ngang. Chng ta cng i vo c th d phn tch k hn layout ny: Input l on xml sau:
<?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"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"

android:layout_weight="1"> <TextView android:text="red" android:gravity="center_horizontal" android:background="#aa0000" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="green" android:gravity="center_horizontal" android:background="#00aa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="blue" android:gravity="center_horizontal" android:background="#0000aa" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="yellow" android:gravity="center_horizontal" android:background="#aaaa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="row one" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row two" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row three" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row four"

android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout> </LinearLayout>

utput ta c c giao din sau:

Phn tch code: u tin chng ta s dng mt th Lineat Layout bao tt c cc giao din, v cc bn h chng ta s dng thuc tnh: android:orientation="vertical". y l thuc tnh mun

ni cho android bit chng ta mun tt c nhng g tn ti trong th Linear layout ny hin th theo chiu dc v nhn vo giao din cc bn cng c th thy hai Linear layout hin th theo chiu dc (tc l c layout trn v layout di). Gi chng ta cng i vo cc linear layout con cha bn trong linear layout cha. Cc bn hy n phn trn ca giao din ny cc bn s thy cc TextView c mu sc khc nhau, cc bn c thy nhng TextView ny c hin th theo chiu ngang khng, iu ny l do chng ta s dng thuc tnh: android:orientation="horizontal", tc l ni vi android l linean layout ny ti mun hin th theo chiu ngang. Cc bn hy rng tt c cc phn t cha bn trong th Linear layout cha th u chu s nh hng khi chng ta thm hay bt mt s thuc tnh ca Linear layout cha.Cc bn gii thch hon ton tng t cho Linear layout con cn li. Gi chng ta cn b sung kin thc mt s thuc tnh m chng ta khai bo trong cc TextView style View v d trn: android:orientation="vertical" // mun cc View hin th theo chiu dc, ch s //dng trong th Linear layout cha. android:orientation="horizontal" // mun cc View hin th theo chiu ngang, ch s dng trong th Linear layout cha. android:layout_width="fill_parent" // chiu rng m th chng ta s dng s rng bng // mn hnh

android:layout_height="wrap_content" // chiu di m chng ta s dng c cao bng // vi ni dung m chng ta khai bo android:layout_weight="1">// tng m cho text android:text="blue" // to text trn View android:textSize="15pt" // khai bo kch thc cho View android:gravity="center_horizontal" // iu hng View theo hng gia android:background="#aa0000" // to nn cho View

2. Relative Layout
y l Layout c th cho ngi thit k ty bin r rng hn trong giao din ca mnh, cc thnh phn trong layout ny c th c nh v thng qua nhau bng thuc tnh id . y l iu m Linear layout khng th lm c. Chng ta cng i vo 1 v d hiu hn v Relative Layout: input l file xml sau:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Type here:"/> <EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/label"/> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancel" /> </RelativeLayout>

V output ta c giao din sau :

Tng t nh trong linear layout chng ta cng c mt s thuc tnh cho th cha, gi cc bn hiu cc th ny lm g ri. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> Trong giao din ny u tin cc bn s c mt TextView vi on text l : Type here: sau cc bn khai bo thuc tnh id cho n y id ca TextView u tin l : android:id="@+id/label" (tc l tn id l lable), cc bn ch khai bo id ta c c php sau : android:id="@+id/ tn id". Tip sau l cc bn s c mt EditText cho ngi dng nhp d liu vo l khai bo id cho n l : android:id="@+id/entry" v android:layout_below="@id/label"/> V cui cng trong giao din ta thy c hai button.Cc bn hy ch n cc thuc tnh khai bo trong hai button ny l c trng ca Relative Layout. Th nht Button 1: android:layout_below="@id/entry" android:layout_alignParentRight="true" Android s hiu l Button 1 s quan h vi EditText trn n, v di EditText (thng qua thuc tnh ndroid:layout_below="@id/entry", cc bn hy l trn EditText ta khai bo android:layout_below="@id/label"/> tc l chng ta mun c ci g pha di n. Cui cng trong Button ny ta s dng android:layout_alignParentRight="true" khng nh Button ny s quan h vi EditText v n s bn phi ca EditText. Trong Button cui cng cc thuc tnh trong n l : android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" Android s hiu rng button ny s nm nh bn tri ca Button 1 (tc l button c id l ok). id c tn l ok c vit l @ thm du cng ri n ch id.

3. Table Layout

Tn ca Layout ny cng c th hiu phn no chc nng ca n, ta s s dng n dn cc View theo hng. <?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" /> <TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content" > <TableRow> <TextView android:text="Username :" android:textSize="14dp" android:width="80dp" android:textStyle="bold" android:id="@+id/text_name" /> <EditText android:width="240dp" android:id="@+id/edit_name" /> </TableRow> <TableRow> <TextView android:text="Password :" android:textSize="14dp" android:width="80dp" android:textStyle="bold" android:id="@+id/text_pass" /> <EditText android:id="@+id/edit_pass" android:width="240dp" android:password="true" /> </TableRow> </TableLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center">

<CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Remember password" android:paddingLeft="50dp" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send to" android:width="200dp"

/> </LinearLayout> </LinearLayout> C th ni l layout ny tuy di nhng rt d chu, Cc View cc bn mun cho n hin th trn mt hng cc bn c th bao chng trong <TableRow> </TableRow> Trong giao din ny cc bn c th thy chng ti s dng Mt linear layout cha v mt linear layout con cha bn trong. Linear layout con bn trong bao mt checkbox v Button.

4.FrameLayout:
L mt layout dung cha cc View con v i vi cc View con cha trong layout ny n hot ng theo kiu stack(chng ln nhau khng phi LIFO), cc View ci t trc s b cc View sau ln.

V d:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent " android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text =Button 1 /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text =Button 2 /> </FrameLayout>

Vi on m xml nh vy th button 2 s ln button 1 v ngi dng ch nhn thy button 2. chnh v cch hot ng nh vy m ta nn dng n vo kiu giao din nh sau :

Mt Layout na : AbsoluteLayout cho php nh v ta ca cc View m n cha.

<?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" > <Button android:layout_width="188px" android:layout_height="wrap_content" android:text="Button" android:layout_x="126px"

android:layout_y="361px" /> <Button android:layout_width="113px" android:layout_height="wrap_content" android:text="Button" android:layout_x="12px" android:layout_y="361px" />

</AbsoluteLayout>