Android Chapter05 XML Layouts - 2 PDF

9/21/2009
5
Android
BasicXMLLayouts
VictorMatos
ClevelandStateUniversity
Notesarebasedon:
TheBusyCoder'sGuidetoAndroidDevelopment
Th
B
C d ' G id t A d id D l
t
byMarkL.Murphy
Copyright20082009CommonsWare,LLC.
ISBN:9780981678009
&
AndroidDevelopers
http://developer.android.com/index.html
5.Android UI BasicXMLLayouts
BasicXMLLayouts Containers
DeclaringLayout
YourlayoutisthearchitecturefortheuserinterfaceinanActivity.It
y
pp
definesthelayoutstructureandholdsalltheelementsthatappear
totheuser.Youcandeclareyourlayoutintwoways:
1. DeclareUIelementsinXML.Androidprovidesa
straightforwardXMLvocabularythatcorrespondstotheView
classesandsubclasses,suchasthoseforwidgetsandlayouts.
2. Instantiatelayoutelementsatruntime.Yourapplicationcan
createView andViewGroup objects(andmanipulatetheir
properties)programmatically.
9/21/2009
AndroidsLinearLayout offersa"box"modelsimilartothe
JavaSwingBoxLayout.
Thegeneral(andproven)strategyistoobtainthedesiredUI
g
(
p
)
gy
structurethroughtherightcombinationofnested boxes.
InadditionAndroidsupportsarangeofcontainersproviding
differentlayoutorganizations.
CommonlyusedAndroidcontainersare:
1
1.
2.
3.
4.
Li
LinearLayout
L
(h b
(theboxmodel),
d l)
RelativeLayout (arulebasedmodel),and
TableLayout (thegridmodel),alongwith
ScrollView,acontainerdesignedtoassistwithimplementingscrolling
containers.
3
Beforewegetstarted
1. Androidssimplestlayoutmanageriscalled:FrameLayout.
p
y
g
y
2. AFrameLayoutisarectangularcontainerthatpinseachchild
toitsupperleftcorner.
3. Addingmultipleviewstoaframelayoutjuststacksoneon
topoftheother(overlappingtheviews)
9/21/2009
Beforewegetstarted
HierarchyViewer(\tools)
1. LinearLayout
LinearLayout isaboxmodel
is a box model widgetsorchildcontainersarelined
widgets or child containers are lined
upinacolumn orrow,oneafterthenext.
ToconfigureaLinearLayout,youhavefivemainareasofcontrol
besidesthecontainer'scontents:
orientation,
fillmodel,,
weight,
gravity,and
padding
6
9/21/2009
1. LinearLayout
Orientation
indicateswhethertheLinearLayout representsarow oracolumn.
Addtheandroid:orientation propertytoyourLinearLayout
elementinyourXMLlayout,settingthevaluetobehorizontal fora
roworvertical foracolumn.
Theorientationcanbemodifiedatruntimebyinvoking
setOrientation()
1.1 LinearLayout:Orientation
indicateswhethertheLinearLayout representsarow (HORIZONTAL)

oracolumn(VERTICAL).
or
a column (VERTICAL)
horizontal
v
e
r
t
i
c
a
l
<?xmlversion="1.0"encoding="utf8"?>
<LinearLayout
android:id="@+id/myLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0033cc"
android:padding="4px"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal">
<TextView
android:id="@+id/labelUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffff0066"
android:text="UserName"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#ff000000"
>
</TextView>
<EditText
android:id="@+id/ediName"
>
</EditText>
<Button
android:id="@+id/btnGo"
android:text="Go"
>
</Button>
</LinearLayout>
9/21/2009
1.2 LinearLayout:FillModel
Widgetshavea"natural"sizebasedontheiraccompanyingtext.
Whentheircombinedsizesdoesnotexactly matchthewidthoftheAndroid
device'sscreen,wemayhavetheissueofwhattodowiththeremaining
space.
naturalsizes
emptyscreenspace
AllwidgetsinsideaLinearLayout mustsupplydimensionalattributes
android:layout_width andandroid:layout_height tohelpaddress
theissueofemptyspace.
Valuesusedindefiningheigth andwidthare:
1.
2
2.
3.
Specificaparticulardimension,suchas125pxtoindicatethewidgetshould
takeupexactly125pixels.
Provide wrap content which means the widget should fill up its natural
Providewrap_content,whichmeansthewidgetshouldfillupitsnatural
space,unlessthatistoobig,inwhichcaseAndroidcanusewordwrap as
neededtomakeitfit.
Providefill_parent,whichmeansthewidgetshouldfillupallavailablespace
initsenclosingcontainer,afterallotherwidgetsaretakencareof.
10
9/21/2009
125px
entirerow(240px
(
onG1))
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
android:orientation="vertical"
xmlns:android="http://schemas
xmlns:android=
http://schemas.android.com/apk/res/android
android com/apk/res/android"
>
<TextView
android:text="User Name"
>
</TextView>
<EditText
i
i
18
>
</EditText>
<Button
android:layout_width="125px"
android:text="Go"
>
</Button>
</LinearLayout>
11
G1phoneresolutionis:240x320px.
1.2 LinearLayout:Weight
Itisusedtoproportionallyassignspacetowidgetsinaview.
Yousetandroid:layout_weight toavalue(1,2,3,)toindicateswhatproportion
ofthefreespaceshouldgotothatwidget.
Example
BoththeTextView andtheButton widgets
havebeensetasinthepreviousexample.
Bothhavetheadditionalproperty
android:layout_weight="1"
whereastheEditText controlhas
android:layout_weight="2"
Takes:2/(1+1+2)
ofthefreespace
12
9/21/2009
1.3 LinearLayout:Gravity
Itisusedtoindicatehowacontrolwillalignonthescreen.
Bydefault,widgetsareleft andtopaligned.
YoumayusetheXMLproperty
android:layout_gravity=
tosetotherpossiblearrangements:
left,center,right,top,bottom,etc.
Buttonhas
right gravity
13
1.4 LinearLayout:Padding
Bydefault,widgetsaretightlypackednexttoeachother.
Ifyouwanttoincreasethewhitespacebetweenwidgets,youwillwantto
usetheandroid:padding property(orbycallingsetPadding()atruntimeon
thewidget'sJavaobject).
Thepaddingspecifieshowmuchspacethereisbetweentheboundariesof
thewidget's"cell"andtheactualwidgetcontents.
N t P ddi i
Note:Paddingisanalogoustothemarginsonawordprocessingdocument.
l
t th
i
d
i d
t
14
9/21/2009
Bydefault,widgetsaretightlypackednexttoeachother.
Ifyouwanttoincreasethewhitespacebetweenwidgets,youwillwantto
usetheandroid:padding property(orbycallingsetPadding()atruntimeon
thewidget'sJavaobject).
Thepaddingspecifieshowmuchspacethereisbetweentheboundariesof
thewidget's"cell"andtheactualwidgetcontents.
N t P ddi i
Note:Paddingisanalogoustothemarginsonawordprocessingdocument.
l
t th
i
d
i d
t
15
16
9/21/2009
Example:
TheEditText boxhasbeenchangedtodisplay30pxofpaddingallaround
<EditText
android:padding="30px
>
</EditText>
/EditText
...
17
2.RelativeLayout
RelativeLayout placeswidgetsbasedontheirrelationshiptootherwidgetsin
places widgets based on their relationship to other widgets in
thecontainerandtheparentcontainer.
Example:
Aisbytheparentstop
CisbelowA,toitsright
BisbelowA,totheleftofC
A
B
18
9/21/2009
2.RelativeLayout Referringtothecontainer
SomepositioningXML(boolean)propertiesmappingawidgetaccordingtoits
location respect to the parentssplaceare:
locationrespecttotheparent
place are:
android:layout_alignParentTop saysthewidget'stopshouldalignwiththetopof
thecontainer
android:layout_alignParentBottom thewidget'sbottomshouldalignwiththe
bottomofthecontainer
android:layout_alignParentLeft thewidget'sleftsideshouldalignwiththeleft
sideofthecontainer
android:layout_alignParentRight thewidget'srightsideshouldalignwiththeright
sideofthecontainer
id f th
t i
android:layout_centerHorizontal thewidgetshouldbepositionedhorizontallyat
thecenterofthecontainer
android:layout_centerVertical thewidgetshouldbepositionedverticallyatthe
centerofthecontainer
android:layout_centerInParent thewidgetshouldbepositionedbothhorizontally
andverticallyatthecenterofthecontainer
19
2.RelativeLayout Referringtootherwidgets
Thefollowingpropertiesmanagepositioningofawidgetrespecttoother
The
following properties manage positioning of a widget respect to other
widgets:
android:layout_above indicatesthatthewidgetshouldbeplacedabove
thewidgetreferencedintheproperty
android:layout_below indicatesthatthewidgetshouldbeplacedbelow
thewidgetreferencedintheproperty
android:layout_toLeftOf indicatesthatthewidgetshouldbeplacedtothe
l f f h id
leftofthewidgetreferencedintheproperty
f
di h
android:layout_toRightOf indicatesthatthewidgetshouldbeplacedto
therightofthewidgetreferencedintheproperty
20
10
9/21/2009
2.RelativeLayout Referringtootherwidgets cont.
android:layout_alignTop
android:layout
alignTop indicatesthatthewidget
indicates that the widget'sstopshouldbealigned
top should be aligned
withthetopofthewidgetreferencedintheproperty
android:layout_alignBottom indicatesthatthewidget'sbottomshouldbe
alignedwiththebottomofthewidgetreferencedintheproperty
android:layout_alignLeft indicatesthatthewidget'sleftshouldbealigned
withtheleftofthewidgetreferencedintheproperty
android:layout_alignRight indicatesthatthewidget'srightshouldbe
alignedwiththerightofthewidgetreferencedintheproperty
android:layout_alignBaseline
d id l
li B li indicatesthatthebaselinesofthetwo
i di
h h b li
f h
widgetsshouldbealigned
21
In order to use Relative Notation in Properties you need to consistently:
InordertouseRelativeNotationinPropertiesyouneedtoconsistently:
1.
Putidentifiers(android:id attributes)onallelements thatyouwill

needtoaddress.Syntaxt is:@+id/... (forinstanceanEditText boxcould
beXMLcalled:android:id="@+id/ediUserName")
2.
Referenceotherwidgetsusingthesameidentifiervalue(@+id/...)already
giventoawidget.ForinstanceacontrolbelowtheEditText boxcouldsay:
android:layout_below="@+id/ediUserName"
d id l
t b l
"@+id/ diU
N
"
22
11
9/21/2009
In order to use Relative Notation in Properties you need to consistently:
InordertouseRelativeNotationinPropertiesyouneedtoconsistently:
1.
Putidentifiers(android:id attributes)onallelements thatyouwill

needtoaddress.Syntaxt is:@+id/... (forinstanceanEditText boxcould
beXMLcalled:android:id="@+id/ediUserName")
2.
Referenceotherwidgetsusingthesameidentifiervalue(@+id/...)already
giventoawidget.ForinstanceacontrolbelowtheEditText boxcouldsay:
d id l
t b l
"@+id/ diU
N
"
23
2.RelativeLayout Example
<EditText
<RelativeLayout
android:id="@+id/ediUserName"
android:id="@+id/myRelativeLayout"
@
/
android:layout_below="@+id/lblUserName"
android:background="#ff000099"
android:layout_alignParentLeft="true"
xmlns:android="http://schemas.android.com/apk/res/andr android:layout_alignLeft="@+id/myRelativeLayout"
oid">
android:padding="20px">
</EditText>
<TextView
android:id="@+id/lblUserName"
<Button
android:layout_alignRight="@+id/ediUserName"
android:text="Go"
android:layout_alignParentTop="true"
android:textStyle="bold">
android:layout_alignParentLeft="true">
</Button>
</TextView>
<Button
android:id="@+id/btnCancel"
android:layout_toLeftOf="@+id/btnGo"
android:text="Cancel"
android:textStyle="bold">
</Button>
</RelativeLayout>
24
12
9/21/2009
2.RelativeLayout Comment(asofAug.2009)
UsetheEclipseADTLayoutEditor forlayingoutRelativeLayouts.
DroidDraw isofverylittlehelpinthisrespect.
is of very little help in this respect
25
3.TableLayout
1 Android's
1.
Android sTableLayout
TableLayout allowsyoutopositionyourwidgetsina
allows you to position your widgets in a
gridmadeofidentifiablerows andcolumns.
2. Columnsmightshrink orstretch toaccommodatetheircontents.
3. TableLayout worksinconjunctionwithTableRow.
4. TableLayout controlstheoverallbehaviorofthecontainer,with
thewidgetsthemselvespositionedintooneormoreTableRow
containers, one per row in the grid.
containers,oneperrowinthegrid.
26
13
9/21/2009
3.TableLayout
Rowsaredeclaredbyyoubyputtingwidgetsaschildrenofa
R
d l db
b
tti
id t
hild
f
TableRow insidetheoverallTableLayout.
The numberofcolumnsisdeterminedbyAndroid(youcontrolthe
numberofcolumnsinanindirectway).
Soifyouhavethreerows,onewithtwowidgets,onewiththree
So
if you have three rows one with two widgets one with three
widgets,andonewithfourwidgets,therewillbeatleastfour
columns.
27
3.TableLayout
However,asinglewidgetcantakeupmorethanonecolumnby
However
a single widget can take up more than one column by
includingtheandroid:layout_span property,indicatingthenumber
ofcolumnsthewidgetspans(thisissimilartothecolspan attribute
onefindsintablecellsinHTML)
<TableRow>
<TextView android:text="URL:" />
<EditText
android:id="@+id/entry"
android:layout_span="3" />
</TableRow>
28
14
9/21/2009
3.TableLayout
O di il
Ordinarily,widgetsareputintothefirstavailablecolumnofeachrow.
id t
t i t th fi t
il bl
l
f
h
Inthepreviousfragment,thelabel(URL)wouldgointhefirstcolumn
(column0,ascolumnsarecountedstartingfrom0),andtheTextField
wouldgointoaspannedsetofthreecolumns(columns1through3).
android:layout_span="3"
Label
(URL)
EditText
EditTextspan
EditTextspan
Column0
Column1
Column2
Button
Cancel
Column3
Button
OK
android:layout_columns"2"
29
3.TableLayout
Example

<TableLayout
android:id="@+id/myTableLayout"
android:orientation vertical
>
<TableRow>
<TextView
android:text="URL:" />
<EditText android:id="@+id/ediUrl"
android:layout_span="3"/>
Strech uptocolumn3
</TableRow>
<View
android:layout_height="3px"
android:background="#0000FF" />
<TableRow>
<Button android:id="@+id/cancel"
android:layout_column="2"
Skipcolumn:1
android:text="Cancel" />
<Button android:id="@+id/ok"
android:text="OK" />
</TableRow>
<View
android:background="#0000FF" />
</TableLayout>
30
15
9/21/2009
3.TableLayout
Bydefault,eachcolumnwillbesizedaccordingtothe"natural"size
B
d f lt
h l
ill b i d
di t th " t l" i
ofthewidestwidgetinthatcolumn.
Ifyourcontentisnarrowerthantheavailablespace,youcanuse
theTableLayout property:
android:stretchColumns ==
Itsvalueshouldbeasinglecolumnnumber(0based)oracomma
delimitedlistofcolumnnumbers.Thosecolumnswillbestretched
totakeupanyavailablespaceyetontherow.
31
3.TableLayout
Inourrunningexamplewestretchcolumns2,3,and4tofillthe
restoftherow.
t f th
...
<TableLayout
android:id="@+id/myTableLayout"
i
i
i
i
android:stretchColumns ="2,3,4"
>
...
TODO:trytostretchonecolumnatthetime1,then2,andsoon.
32
16
9/21/2009
4.ScrollView Layout
Whenwehavemoredatathanwhatcanbeshownonasingle
Wh
h
d t th
h t
b h
i l
screenyoumayusetheScrollView control.
Itprovidesaslidingorscrollingaccesstothedata.Thiswaytheuser
canonlyseepartofyourlayoutatonetime,buttherestisavailable
viascrolling.
Thisissimilartobrowsingalargewebpagethatforcestheuserto
scrollupthepagetoseethebottompartoftheform.
33
4.ExampleScrollView Layout
<ScrollView
android:id="@+id/widget28"
android la o t idth "fill parent"
android:background="#ff009999"
>
<LinearLayout
android:id="@+id/myLinearLayoutVertical"
>
<LinearLayout
android:id="@+id/myLinearLayoutHorizontal1"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/myPicture"
android:src="@drawable/icon" />
<TextView
android:id="@+id/textView1"
android:text="Line1"
android:textSize="70px" />
</LinearLayout>
<TextView
android:background="#ffccffcc" />
<TextView
android la o t height " rap content"
<TextView
<TextView
<TextView
<TextView
<TextView
<TextView
</LinearLayout>
</ScrollView>
34
17
9/21/2009
4.ExampleScrollView Layout
Simple
TextView
Combiningan
ImageView &TextView
inahorizontalLinear Layout
Scroller
35
4.ScrollView Layout Example
<View
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/androi android:background="#aa8844" />
<TextView android:text="#aa8844"
d"
android:paddingLeft="4px"
android:layout height="wrap
android:layout_height
wrap_content
content">
>
android:layout gravity="center
android:layout_gravity
center_vertical
vertical"
<TableLayout
</TableRow>
<TableRow>
<View
android:stretchColumns="0">
android:background="#ffaa88" />
<TableRow>
<TextView android:text="#ffaa88"
<View
android:layout_gravity="center_vertical"
android:background="#000000"/>
</TableRow>
<TextView android:text="#000000"
<TableRow>
<View
android:layout_gravity="center_vertical" />
</TableRow>
android:background="#ffffaa" />
<TableRow>
<TextView android:text="#ffffaa"
<View
android:layout height="80px"
android:layout_height
80px
android:paddingLeft
4px
android:background="#440000" />
</TableRow>
<TableRow>
<View
</TableRow>
android:background="#ffffff" />
<TableRow>
<TextView android:text="#ffffff"
<View
android:background="#884400" />
</TableRow>
</TableLayout>
</ScrollView>
</TableRow>
<TableRow>
/>
/>
/>
/>
36
18
9/21/2009
4.ScrollView Layout Example
Scrollingbar
Up/down
37
5.Miscellaneous.
AbsoluteLayout
Alayoutthatletsyou
specifyexactlocations(x/y
coordinates)ofitschildren.
Absolutelayoutsareless
fl ibl
flexibleandharderto
dh d t
maintainthanothertypes
oflayoutswithoutabsolute
positioning.
38
19
9/21/2009
5.MiscellaneousAbsoluteLayout(cont.)
<AbsoluteLayout
xmlns:android="http://schemas.android.com
/apk/res/android"
>
<TextView
d id l
id h "fill
"
android:layout_x="0px"
android:layout_y="-1px"
>
</TextView>
<EditText
android:layout_y="38px"
>
</EditText>
<Button
d id id "@ id/b
"
android:layout_width="125px"
android:text="Go"
Button
android:layout_y="98px"
location
>
</Button>
</AbsoluteLayout>
39
Questions?
40
20

Android Chapter05 XML Layouts - 2 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Android Chapter05 XML Layouts - 2 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

9/21/2009

indicateswhethertheLinearLayout representsarow (HORIZONTAL)

<?xml version="1.0" encoding="utf-8"?>

Putidentifiers(android:id attributes)onallelements thatyouwill

Putidentifiers(android:id attributes)onallelements thatyouwill

<?xml version="1.0" encoding="utf-8"?>

Você também pode gostar