C 4_2 XML-Layouts
-
Upload
pham-hoang-truong -
Category
Documents
-
view
228 -
download
4
Transcript of 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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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).
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
XML Layouts - Containers
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
XML Layouts - Containers
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
5 5
Hierarchy Viewer
XML Layouts - Containers
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
6 6
XML Layouts - Containers
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
9 9
1.1 Linear Layout: Orientation
horizontal
v
e
r
t
i
c
a
l
Linear Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
17 17
1.3 Linear Layout: Padding v Margin
Linear Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
18 18
1.3 Linear Layout: Padding V d: EditText c 30dip:
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
25
2. Relative Layout Example
25
Relative Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
30
3. Table Layout V d:
30
Gi columns: 0, 1
Trn ti column 3
Table Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
32
3. Table Layout Trong v d ny chng ta ko ct 2, 3, v 4.
32
...
...
Table Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
34
4. V d: ScrollView Layout
34
ScrollView Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
35
4. V d: ScrollView Layout
35
Scroller
TextView
ScrollView Layout
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
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
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
37
5. V d: Absolute Layout
37
Absolute Layouts
-
Trng i hc Cng ngh Si gn
Khoa Cng ngh Thng tin
Chng 4_2
38
XML Layouts - Containers
Cu hi n?
38