c 4_2 xml-layouts

Trng i hc Cng ngh Si gn

Khoa Cng ngh Thng tin

Android

XML Layouts

Tham kho:

Android user interface development

by Jason Morris

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

Android Developers

http://developer.android.com/index.html



Chng 4_2

2

XML Layouts - Containers

2

Thit k giao din phc tp

Nhiu chuyn gia thit k cho rng LinearLayout l mt cng c ph bin nht. N cung cp mt m hnh dng Box ging vi Box-layout trong Java-Swing.

Thng thng, mt thit k UI l t hp cc hp lng nhau v cc thnh phn trong mi hp c sp xp theo hng ngang (horizontal) hoc hng dc (vertical).



Chng 4_2

3 3

Android containers c s dng ph bin gm

1. LinearLayout (m hnh box)

2. RelativeLayout (m hnh da trn cc lut)

3. TableLayout (M hnh li)

4. ScrollView: mt container c thit k c cha thanh trt.

5. Other (ListView, GridView, WebView, MapView,) t nghin cu




Chng 4_2

4 4

Frame Layout

1. Layout n gin nht: Frame Layout.

2. Mt Frame Layout l mt container hnh ch nht m mi

thnh phn ca n (child) c nh ti gc trn bn tri container.

3. Khi thm mt view mi vo mt frame layout, n c xp chng ln trn cc view hin c




Chng 4_2

5 5

Hierarchy Viewer




Chng 4_2

6 6




Chng 4_2

7

Linear Layout

7

1. Linear Layout

LinearLayout l dng m hnh Box cc widgets hay cc

container con c xp hng theo hng ct hoc hng

Cu hnh LinearLayout, bn c 5 khu vc iu khin chnh

bn cnh ni dung ca trnh cha:

orientation,

fill model,

weight,

gravity,

padding ,

margin



Chng 4_2

8 8

1. Linear Layout Orientation quy nh LinearLayout biu din dng hng hay dng ct. Gi tr ca thuc tnh android:orientation ca phn t LinearLayout ti XML

layout: gi tr horizontal cho dng hng, vertical cho dng ct. C th sa orientation trong khi chy

bng m chng trnh vi lnh setOrientation()

horizontal

v

e

r

t

i

c

a

l

Linear Layout



Chng 4_2

9 9

1.1 Linear Layout: Orientation

horizontal

v

e

r

t

i

c

a

l

Linear Layout



Chng 4_2

10 10

1.2 Linear Layout: Fill Model Cc Widgets c mt kch thc t nhin da trn ni dung vn bn i km Khi chy kch thc ca chng khng chnh xc ph hp vi chiu rng mn

hnh android->c vn vi khng gian cn li

Khng gian trng

Size t nhin

Linear Layout



Chng 4_2

11 11

1.2 Linear Layout: Fill Model Tt c cc widget trong mt LinearLayout phi t gi tr cc thuc tnh kch thc android:layout_width and android:layout_height cung cp thng tin gii quyt vn empty space. Cc gi tr cho height v width: 1. Xc nh mt kch thc c th, chng hn 125dip (device independent pixels)

2. wrap_content, ngha l widget s ly khng gian n cn (khng gian t nhin), nu n qu ln th Android c th dng kiu word-wrap co n li cho va.

3. fill_parent, ngha l widget s ly ht khng gian cn li ca container nu cn tha.

Linear Layout



Chng 4_2

12 12

1.2 Linear Layout: Fill Model

125 dip

entire row (320 dip on G1)

G1 phone phn gio 320 x 480 dip (3.2 in).

Linear Layout



Chng 4_2

13 13

1.2 Linear Layout: Weight Cp pht khng gian theo t l cho cc widget trong mt view. Gn mt gi tr (1, 2, 3,) cho android:layout_weight quy nh t l khng gian

dnh cho widget .

V d:

C hai widget:TextView v Button

trong v d trc . Nu thm thuc

tnh

Button: android:layout_weight="1"

EditText: android:layout_weight="2"

Mc nh gi tr=0

Gi tr: 2 /(1+1+2) Ca khng gian mn hnh

Linear Layout



Chng 4_2

14 14

1.3 Linear Layout: Gravity Thuc tnh ny iu khin l thnh phn trn mn hnh. Mc nh l: left v top. S dng thuc tnh: android:layout_gravity= sp xp v tr khc left, center, right, top, bottom, vv.

Button c

gravity l right

Linear Layout



Chng 4_2

15 15

1.3 Lu : gravity so snh vi layout_gravity Phn bit gia:

android:gravity quy nh ni t ni dung ca mt i tng bn trong chnh i

tng theo trc x v trc y.

android:layout_gravity v tr ca view i vi container ca n.

android:gravity="center"

android:layout_gravity="center"

Linear Layout



Chng 4_2

16 16

1.4 Linear Layout: Padding Quy nh khng gian gia cc bin ca cha widget v ni dung ca

chnh widget .

Nu mun tng khng gian trng gia cc cnh v ni dung, s dng: android:padding Hay gi trong code setPadding().

Lu : Padding ging margins trong winword!!!!!!!!!.

Linear Layout



Chng 4_2

17 17

1.3 Linear Layout: Padding v Margin

Linear Layout



Chng 4_2

18 18

1.3 Linear Layout: Padding V d: EditText c 30dip:



Chng 4_2

19 19 19

1.4 Linear Layout: Marging gia cc Widget Mc nh, cc widgets c khong h rt nh so vi cc widget k cnh tng khong h ta s dng thuc tnh android:layout_margin

...

Tng khong h

Linear Layout



Chng 4_2

20

Relative Layout

20

2. Relative Layout RelativeLayout sp xp cc widget theo quan h gia cc widget trong cng

mt container v vi container.

A

C B

V d: A top ca cha C di A, bn phi B di A, bn tri C



Chng 4_2

21 21

2. Relative Layout - : android:layout_alignParentTop says the widget's top should align with the top of the

container android:layout_alignParentBottom the widget's bottom should align with the bottom of the

container android:layout_alignParentLeft the widget's left side should align with the left side of the

container android:layout_alignParentRight the widget's right side should align with the right side of

the container

android:layout_centerInParent the widget should be positioned both horizontally and vertically at the center of the container

android:layout_centerHorizontal the widget should be positioned horizontally at the center of the container

android:layout_centerVertical the widget should be positioned vertically at the center of the container

Relative Layout



Chng 4_2

22 22

2. Relative Layout android:layout_above indicates that the widget should be placed

above the widget referenced in the property

android:layout_below indicates that the widget should be placed

below the widget referenced in the property

android:layout_toLeftOf indicates that the widget should be placed to

the left of the widget referenced in the property

android:layout_toRightOf indicates that the widget should be placed

to the right of the widget referenced in the property

Relative Layout



Chng 4_2

23 23

2. Relative Layout android:layout_alignTop indicates that the widget's top should be aligned

with the top of the widget referenced in the property

android:layout_alignBottom indicates that the widget's bottom should be

aligned with the bottom of the widget referenced in the property

android:layout_alignLeft indicates that the widget's left should be aligned

with the left of the widget referenced in the property

android:layout_alignRight indicates that the widget's right should be

aligned with the right of the widget referenced in the property

android:layout_alignBaseline indicates that the baselines of the two

widgets should be aligned

Relative Layout



Chng 4_2

24 24

2. Relative Layout

1. Khai bo thuc tnh id cho cc thnh phn (android:id)

2. C php: @+id/... (V d EditText: android:id="@+id/ediUserName")

3. Tham kho widdget khc s dng thng qua id ca n:

android:layout_below="@+id/ediUserName"

Relative Layout



Chng 4_2

25

2. Relative Layout Example

25

Relative Layout



Chng 4_2

26

Table Layout

3. Table Layout 1. TableLayout cho php t cc widget theo dng li c th

nhn din theo rows v columns. 2. Columns phi shrink hoc stretch theo ni dung. 3. TableLayout lm vic cng vi thnh phn TableRow.

26



Chng 4_2

27

3. Table Layout

Cc Row c khai bo t cc widgwt nh l con ca

TableRow bn trong TableLayout.

S column c nh ngha bi Android ( chng ta iu khin

mt cch gin tip).

Do nu c 3 hng, mt hng c 2 widget, mt hng 3

widget v mt 4 widget chng s c 4 column

27

0 1

0 1 2

0 1 2 3

Table Layout



Chng 4_2

28

3. Table Layout

Do mt widget c th t hn mt column bng thuc tnh

android:layout_span=s ct

28

Table Layout



Chng 4_2

29

3. Table Layout Thng thng cc widget c da vo ct u tin ca hng.

V d:

Label (URL) ct u tin (column 0)

TextField s ct qua thao tc trn 3 ct 13

29

Label

(URL)

EditText EditText-span

EditText-span

Column

0

Column

1

Column 2

Button

Cancel

Column 3

Button

OK

android:layout_span="3"

android:layout_columns="2"

Table Layout



Chng 4_2

30

3. Table Layout V d:

30

Gi columns: 0, 1

Trn ti column 3

Table Layout



Chng 4_2

31

3. Table Layout

Mc nh , mi ct s c iu chnh kch thc li ph

thuc vo widget c kch thc ln nht.

Nu ni dung c vn c th s dng thuc tnh

TableLayout :

android:stretchColumns =

Gi tr ny l gi tr n hay mt danh sch (ngn cch du

phy). Cc ct ny s c ko gin ph thuc vo khng

gian ca hng.

31

Table Layout



Chng 4_2

32

3. Table Layout Trong v d ny chng ta ko ct 2, 3, v 4.

32

...

...

Table Layout



Chng 4_2

33

ScrollView Layout

4. ScrollView Layout Dng ScrollView khi d liu cn hin th di hn 1

trang mn hnh. Cho php ko thanh cun xem tng phn. Tng t 1 trang web.

33



Chng 4_2

34

4. V d: ScrollView Layout

34

ScrollView Layout



Chng 4_2

35

4. V d: ScrollView Layout

35

Scroller

TextView

ScrollView Layout



Chng 4_2

36

Absolute Layouts

5. Absolute Layout ( lc hu, nn thay bng

layout khc) layout cho php quy nh chnh

xc ta (x,y) ca cc thnh phn trong container.

36



Chng 4_2

37

5. V d: Absolute Layout

37

Absolute Layouts



Chng 4_2

38


Cu hi n?

38

c 4_2 xml-layouts

Documents