Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Si has realizado alguna aplicacin utilizando otras plataformas, advertirs que eldiseo de la interfaz de usuario en Android sigue una filosofa muy diferente. En Android la interfaz de usuario no se disea en cdigo, sino utilizando un lenguaje de marcado similar al HTML.
Abre el proyecto creado en el captulo anterior y visualiza HolaMundo.java. comenta la ltima sentencia del programa y aade las tres que se muestran a continuacin en negrita: package
r::oitr. ex,:nf;l e
.
ho.i;.iltundli;
y
;
pubJ"ic class HolaMundo ext,ends Actlvity { i* ^ (.:.':..l.eil 'vhi:n t: h.<* :t::i: :!.v !.i .' :!.r .i.i..s:ii: <:i:ei;i.*<i. *,i
51
) )
'.'(::.vi.r::v
".i..rri.><trt: .;n.J..'o.ii. w.iiir:jr,t!.: .'i:exr.vi.e:w;". Otra alternativa es pulsar Ctil-Shiff-O, para que se aadan automticamenfe los paquetes
La interfaz de usuario de Android est basada en una jerarqua de objetos descendientes de la clase riew (vista). una vista es un objeto que se puede dibujar y se utiliza como un elemento en el diseo de la interfaz de usuario (un botn, una magen, una etiqueta de texto como en el utilizado en el ejemplo,...). Cada uno de estos elementos se defne como una subclase de la clase vew; la subclase para representar un texto es rexl\riew.
El ejemplo comienza creando un objeto de la clase rezrview. El constructor de la clase acepta como parmetro una instancia de la clase conrexr (cdntexto). Un contexto es un manejador del sistema que proporciona servicios como la resolucn de recursos, obtencin de acceso a bases de datos o preferencias. La clase ec[ivi.i.i- eS Una subclas d <]ort.ext, ] CofTto la clase ilell.DAri,lr.<:<i S una subclase de acri.v-ity, tambin es tipo conre]:r. Por ello, puedes pasdr rhs (el objeto actualde la clase HoraMundo) como contexto del rezrview. Despus se define el contenido del texto que se visualizar l rexrr/iew mediante setText {CharSequence) . Finalmente, mediant setContentrJiew O S indica la vista utilizada por la actividad.
Ejecuta el proyecto para verificar que
funciona.
a complicadas
y la lgica de la
52
accede
. Android proporciona una alternativa para el diseo de interfaces de usuario: los ficheros de diseo basados en XML. Ve"ros uno de estos ficheros. para ello
al
fichero res/layout/main.xml de nuestro proyecto.
continuacin. Este layouf o fichero de diseo proporciona un resultado similar que el ejemplo de diseo por cdigo anterior:
.-?,.::.1:.
se
muestra a
ver*cion=
i-
,,1 .
0,' encod.ing=
,,1if _g,,?:.
xmlns : an<lrr:iid=
,,iliir::
/,::r.:llr-rnas.all.dr.tt.i..1 .c:c>rn,'a_>krr.t:r::],/an.12..i.t.:.d,,
,, ,,
ren i-,,
l_
(-.()l
e.n t.,,
>
?i
,:-i. i, l:,r t i1 i:
Resulta sencillo interpretar su significado. Se introduce un elemento de tipo -ir'l'r.i.'I,.,i.,,orri: , como se estudiar ms adelante su funcin es contener otros elementos de tipo ii'j-ew. Este lirlrjai^L\,."ri. tiene cuatro atributos. El primero, :-lrs:1nd-i'i.,-1c, es una declaracin de un espacio de nombres de XML que utilizaremos en Android (Este parmetro solo es necesario especifcarlo en el primer elemento). El siguiente atributo indica que los elementos se van a distribuir de forma vertical' Los. dos siguientes permiten definir el ancho y alto de la vista. En
el texto a mostrar. No se ha indicado un texto en concreto si no una referencia, =:sr-iinq,h+a,r o". Esta referencia ha de estar definida en el fichero res/values/strings.xml. siabres este fichero, tienes elsiguiente contenido:
DentrO del T,j.irc;rrtrijr.t1-):rr-SOIO tenemOs un elementO de tipO T:xtvi.cv.,. ESte dispone de tres atributos. Los dos primeros definen el ancho y ,tto El ltimo indica
n iire= " lt
r_,:
i..1.
;', :"He
11
;;;;
:...1
..,
i.;4,
idiomas.
Esta es la prctica recomendada en Android para la insercin .. de textos en tu aplicacin, dado que facilita su localizacin a la hora de realizar la traduccin a otros idiomas. Es decir, utilizaremos los ficheros layout para introducir el diseo de los interfaces y el fichero sfnngs para introducir los-textos utilizJos en los distintos
53
1. Modifica algn valor del fichero resfualues/strings.xml. 2. Vuelve a ejecutar la aplicacin y visualiza el resultado.
Analicemos ahora la lnea en la que acabas de quitar el comentario:
con el diseo basado en cdigo, no quita velocidad y requiere menos espacio. El plug-in de Eclipse crea automticamente esta referencia en la clase n del proyecto
partir de todos los elementos de la carpeta res. Abre el fichero llamado gen/Rjava. Este fichero se muestra a continuacin:
package *onr. exanrrle . hol.amirrclo
pubLtc stat.Lc flnal clags drawable { publtc statlc ftnal Lot jcon*0x7f0ll000;
publtc etatLc flnal claes layout { public statlc fiaaL int majn*0x?f
t t
r).-Jr)0D0;
publtc gtalfc flnal cl^age sirinq { public etatlc flnal ia! app_name=0x'7f 0400'j.; public etatlc fLnal int hello=rtx?f 0411000;
i
Has de tener claro que las referencias de la clase R son meros nmeros que informan al gestor de recursos, que datos ha de cargar. por lo tanto no se trata de verdaderos objetos, estos sern creados en tiempo de ejecucin solo cuando sea necesario usarlos.
54
(lengeta main.xml)
.,.
Layout).
a:
Eding
tantig ddavll
it11,H,,.;a*,{Ft
li;;J}tj;r,;ir,-Jjiiir,;l,q"y
ri^*
.jiiii;e
Q Linutryort
tr- ldteY.'
::tryo*
@ 0ial..tilc.
,!
EJbloldct.iolt
EJlrp.ndrbldirt...
E]:r.hll.ycut
@criav;e.
-,,'i
Yrsr
'.t
(9 Sudrrevis
Sri*
@
viest"l
{nlogclc<k
I
1,-6)
,j.
j
: P-pe,t
'rcblemr "ln
i
t
r"s
TdpFornc
. I
i-.
lat"t"'
.-.-....I-:{,i..",!,'.1-l'silieh'
marco central aparece una representacin de cmo se ver el resultado. En la parte superior aparecen varios controles para representar esta vista en diferentes configuraciones. Cuando diseamos una vista en Android, hay que tener en
En el marco derecho se visualiza una lista con todos los elementos de la vista. En este momento Solo hay dos un I.,:i n*;:r:I.,:;1;i:rrr::: QUe contiene un :!te:i:vi ilw. En el
el
la
configuracin especfica elegida por el usuario. Por esta razn, resulta importante que verifiques que la vista se ve de forma adecuada en cualquier configuracin.
De izquierda a derecha podemos seleccionar el tamao en pulgadas y la resolucin del dispositivo, orientacin horizontal (lanscape) o vertical (portrait),
cnnfiguracin regional (locale), configuracin de utilizacin (escritorio o automvil), configuracin segn la hora del da (diurna o nocturna) y aplicacin de un tema. Para editar un elemento seleccinalo en el marco de la derecha pincha sobre l en la ventana de previsualizacin. Al seleccionarlo puedes modificar alguna de sus propiedades en el marco que aparece en la parte inferior. Si este marco no est visible, pulsa con el botn derecho sobre el elemento en el marco de la derecha y seleccionas Properties, aparecer el marco en la parte inferior con la
55
fista de propiedades. Pega un vistazo a las propiedades disponibles para TextView modifica alguna de ellas. Vers como en muchos casos te aparece un desplegable con las opciones disponibles.
Los dos marcos de la izquierda te permiten insertar de forma rpida nuevos elementos a la vista. Puedes anastrar cualquier elemento de Layout o de Vrbw a la ventana de previsualizacin.
2.2.2. Layouts
Si queremos combinar varios elementos de tipo vista tendremos que utiliza un objeto de tipo Layout. Un Layout es un contenedor de una o ms vistas y controla su comportamiento y posicin. Hay que destacar que un Layout puede contener a otro Layout y que es un descendiente de la clase Vew.
La siguiente lista describe los Layout ms utilizados en Android:
LinearLayouf
los
56
<Ln**.r&ayou t xmlns : andrr:rid= ',Ji !: i : ,' ; . . and:rocl: layout_he j.ght= " i . ; .i_r:.; i. r,.ri,-i ', a nd;:o d : a ,-<ru t_lr' i. tlt \t = " f i .'j._;r., :;t ',,: n t.',
1. .!.
,,ir+l
: i ;".';
"
,.
^',it.1
I r:,(iil i
r,;
(:
k
',r,:i-.:ti;_<: :'rr: (rji; i. " e i.,,
anCl:rclid: Ialrout_wi-dth=
ardroid : laycut*he ght = " i;;: air*,." .|ili a.ird::oi.d: text= "i.r .:'he ,:kB'tx",/>
.:
"i/,'i'-.?iL.:,:,i1r,ji i.
',
,.:ii i. "
iii_li
l:
ni]
iI
anclrO d : I a*Out-_v; i dt- h = " ri.-.'. :_,:' r:, ) i:,i) an<l::oi d : I ayor:t-_he gl-t = ",,r ti ,:)_..:. i !
>
it "
.]
;:),:,t:
il
" .,
|i
'
ayor-rL.....1,r i rltf i= " u,i'ri.:... ,:_.,_'l i- ,,--.r t ,, ardro id : layout_he iqht = " ri'.. ::*i-.,-;l it r:it i'
anclrr: i d : l an.dro
"
>
<
/ti n}ar:l,ayout>
id
i; ry i. .;t
..,7.i.
.1 :
i i,
r2
r',.',,,'
<Tabletayout :crnlnll : android= "l.t.:',:.it: ,, / . . , android : 1ays11_i161qht=,'f I J l..-pa.rent " android : 1ayor.rt.-_v;i. dL.h= " .f-:r i 1.._,: - rent- ,,>
<?ableRow>
.: A.i:
* <:s(-.l
.1.
<>i:
r.
uL....
C:1
avo
he i gl'Ll. =,,
r d D--t:
on
!_
eil i, ",/
:,
(:i:(:rr:'i
lloz
3-
andro i ii : ayorrt _lvi dt- h.= ', ryr^ap_c.rn t e.r? | ,, andro i d : i ayouL _he i ghf- = " .1^ir p_ rct L r?n i,,
<,/TableRaw>
<Tab:-eRow> 'iiri.ii. i,:ir). ar.drc i d : i ayou
tj'....rv.r d
L.h=
alidrci d : iaycruL..,,he icht = ", .:ir_i_'rri i en t a:r.ft oid : iext='r ii-r l.r- i. iin ",! :,
-jr.--^!:;i ^--
"w
[ i p_c o n t e rl y
"
.'
anCrrliC
: 1a,-oul......he
iittx=
_
,,w
) t
ap*r:ant eilt
J i d
"
.:'ui
i i) r a,' /.>
<lTableRow>
</Tabletayor:t:.
57
Rlativ',ayout xmlns :android= "htrp: /.i schemas. ., android: layout_height= " fi i i;arent android : layout_width=' i 1 i_pa ren t'
.:^irla l^ c;i;Cl arck android : id='
@
"
>
+ i d / Ana l. ogCi. ockA l' andro id : 1 ayouL_widt h= " vrrap_con t en t " andro id : layout_he ight = "rr'rap_con cen L o andro:ld : layout_al.:lgnParentTop= 'tr1.ten t' > .: riltie;r: k 3ox
android : d=' G + i d / CheckBox? l' andro d : layout_widbh=' w.rap_cont en c " android : 1ayou.t_height = "ri;:ap_conteiit " androld : layout_belovrs " @+ ld/ AnaLogeLock0
"
t'
:>
..:B',i:
android : d= " G + i- d / Bu t t o.n 0.1 " andro id : layorrt_wiclt}:^=' wrap_cont ent " android : l ayoul_he igh.t= "wrap_cotltent " android: text=' Lln bocn " andro:l d ; J. ayou t_b lovr' " + I d / Chec kBox 0 7 " / >
@
L.l'ext"Ve't
androd : id=
" Q +.i d
android : layout_a1 igmParntBol tom-'ru " andrcrid: Lext= "Lr Lexto cuaf guiera " '."
/Relativaf,ayout>
AbsoluteLayout permite indicar las coordenadas (x,y) donde queremos que se visualice cada elemento.
58
<Absol $t.I'yd)$ t xml.ns : andro id= 'ht tit : ,i ,1sl---he.nia-c . an.ci::o i. ri : l.ayout _he i. ght = " f .i .i J_p i.-r?d t " an.rft:oj.rl: l.ayout_krid.th= " i. i. i_:,.rr-e.n| "t .r;irr: oqi:. cl'.: anclro i d : 1 ayout-*w <ltirr= " wr el_c a ]1 t.. e n i " andro j-d: 1ayout*height.= "nl^a,n_cont ent
"
c.l<ilox
android: text= "i/I <::he<:kBox" android : layout....x- " 75 0gty" android: layout_y= u 50px" ,t ,
.:8
an.r}:o j. d : l.ayout _he i. ght =' rcr-ap_. android: t.exi= " iin l>oi i "
andro i d ; l ayou
a
ts-*',!
h= " '.:"w
e n t: "
nd ::o
i d : ayoi.rt
.1.
.h.e
i.g.h.t =
r ap-di-r n I r-?n f
i.:
a..l cii.:
i era "
"2
00px" t
>
/&bsoiutel,ayut:'
FrameLayouf posiciona todos los elementos usando todo el contenedor, sin distribuirlos espacialmente. Este Layouf suele utilizarse cuando queremos que varios elementos ocupen un mismo lugar pero solo uno ser visible. Para modificar la visibilidad de un elemento utilizaremos la propiedad visivility.
59
/ schemas. . .
,,>
"
ocl<
"
:,
o 7
t en " /
android : layout_w<lth=' wra.p_cont: eni n andro id : l ayout_he ight = ,,-t-ap_con t en f ,, android : text='tI checkBox", >
<3u
Ii
L1n
n
android : 1ayout_widttl= wrap_c cnt- ent " android : layoue_heigllrL= " w z'ap_cont ent. " android: text= "t/l botn" androld : vietbiLl ty= " inv i s ibf e ",/
>,
":'lext Vi e*-
"
u,raF_c, nL
arrdroid : layoub_he ight = " ?,'rap_c on t en L " android : text:.= " IJn text o cuaTqu iera "
nt
"
j.nvi.sib.!e" i
>
{,,r :i r ;tnli:
L,r:/illlt
:r
Layouts.
En algunas ocasiones, como en eJ AbsoluteLayout, tendremos que indicar las coordenadas donde ha de situarse un elemento. Dado que nuestra aplicacin podr ejecutarse en gran variedad de dispositivos con resoluciones muy diversas, Android nos permite indicar estas coordenadas de varias formas. En la siguiente tabla se muestran las diferentes posibilidades:
in (pulgadas): Distancia real medida sobre la pantalla. pt (puntos): Equivale a 1172 pulgadas.
dp o dip (pixeles independientes de la densidad): Presupone un dispositivo de 160 pxeles por pulgada. Si luego el dispositivo tiene otra densidad,
se realizar la conespondiente regla de tres.
60
1. Crea una vista basada en AbsoluteLayout. 2. Utiliza diferentes tipos de unidades para situar los elementos.
Tambin podemos utilizar otras clases de Layoufs, que son descritas a
continuacin:
varias
TabHost Proporciona una lista de ventanas seleccionables por medio de etiquetas que pueden ser pulsadas por el usuario para seleccionar la ventana que
desea visualizar.
NOTA: En el desarrollo del ejemplo hemos indicado que, para toder ejecutar la aplicacin necesitamos como versin mnima el SDK 3, correspondiente a Ia versin 1.5. No obstante, vamos a utilizar laversin del DSK L6, dado qtrc nos proporciona ciertos beneJicios respecto a versiones anteriores (por eiemplo iconos de la aplicacin en dif'erenles resolucitnrcs). Eslo es pe4fectamente posible, pero hav que tener precaucin de no utilizar ninguna caracter.sti<:a que no sea c'ontpatible c,on la
versin 1.5.
61
formada por un LinearLayout que contiene un lexView y cuatro Bufton. Trata de utilizar recursos para introducir los cinco textos que apareoen.
l,iiie arLal'out.
: r/,/ schema g . a:droid . ccm,/apk,/ res,/andrrr d ardroid : oriental-ion= "'erL ical r' android: 1ayor.rt....width= " f i.Il.....rrarent " android ; layout_he ight = " f i 1 l_..rcarent rt android: gravity= "ge3 u android: padtling= r'.i f ;! j. I ', <TeztView an<lroid: layou[_width=', f iil_parerrl "
"
andr:od : Layout_he j.ght = !'vr:':t.p_ccnt.ent' andro i d : L ext. = " i.ls t r ing// t i iuioApi :. cac i on'l a:rci:'i:i.i.: g:'avii:1'= ', cenier "
a:rii:'iti.il:
..:ir:-r'L
Le:':i:$.i.:i:e=
"
25sp
"
"
di
"
>
Lcn
ielriro
iri : i d= " G + i d i
1'
tent '
62
Li^,
="f
1 1._p a
r en i "
" ,r >
f?uitan02
"
ro <j : 1.a.yrrir b_iie :i,iil = " wr ep_c on!-- en t " android: 1aycut....wi,Jt.h= ', fj i i_p arent, a-iro ici : Le-\L = " 4.9 4.r' i n g / C on .i gt..r ar " f >
<g!i:- io
a
rl
: r<l:l'i::.i.11
:i. <1
" Q.+
d t/
Eu
t on
0-1 "
andrci.J : 1a;*oitt....he
ardrc,:i.<i : t.exL=
ir;1!11
= "r,r_Lror't en a "
f: "
'Gstring/Ar:ercade" i > <3':a:,nir .-.ndrord : !d=' 6 + id,t But ton 4', a-dr o i ct : I ai.c1 _1t* t <]i: t. = " i/rp- c-'on I e1 t a:'rcirr? i.i:i: ayout._w:. <i t:.it= " .f ii 7.J)arent " ar.lrciC : tezt= " Bst z' ing / Sat ir " i >
.L
"
<
L1:-14.n j:L:y'r:t1i: 2
:'
i.
name = "^/.t.r';r'4.t (:::-L- " :' rTuga r.: ;' s i:: l' i ttg :" name = " Cor: f i grul-ar " :.Conf i gurarr,.i,s i. ::i.n.q
name= "Ace-r-cde ">Acerca de .:,/s!.ring> nalne= "ia: l.i.r' " :'Sa1 i r.: ;' I i::' i ng:' <si.rin.gl name= "titu.7oA>1-icac-ior">Asteroides<',.--;"r:.'i.ni]>
<slring
.. s L !'
nane= "heJ-lo ">Hel1o Wor1d, Asteroides i rlg.. name = " alp_.Darile " :"As te ro i de s.: ' s: i: i inc >
! <,/:::'inq:.
63
Eiercicio
1. Crea la carpeta res/layout-land. 2. Copia en ella elfichero main.xml. 3. Crea una vista similar a la que ves a continuacin:
formada por un y que TableLayouf con dos Button contiene un lexVelv un LinearLayouf por columna.
64
i:.
,t t,
e:-.
andr-o j. d,,
android : ori.entaf.ion= "yerf i ca- " and r:o i d : 1 a yorr f._v;i.ilth= " f i i -'p a r en i
.1.
and ro j. d
"
android: grarri.ty= "ce.nte.: " android : pa.<1ili.rrg= " 3 )dip " >
{:!le}.i;i:V.:.*'d
and ro i d
: 1 a yorr : 1.a
andro id
f._vri.dtir= " f .i 1]_pa rn r " yorrt _he j.gl.t = " h'r:)_. con t .t L- "
t-
and ro i d : tex
"es
i r'..n9,/ i
:i
" "
r-
u.L
o,4pf.
:. c:a
cj
c.n "
: 1.a
you
"
d.p " i
"
>
andro j.d : l ayout_wi.dth= " fj 1.1.. _pare.ni andr:o id : l a yout-_he i.ght= 'f i .1 i.....l]a-r-en
arrdr:o j.d : gravi.
eRi::w >
i::
"
id= " 0 *.i ci, l}ut t on ().1 " and roi d : 1.a.you t_ltei girt = " vrrep__<:artr: ent " ardroid : l.ayoub_wi.dtil= "fj 7i_parent " and.r'oid : t-ext= " @:;tri.ng /Arrencar " i > <.[:iu!::i: i:in andr:oi.d: i.d= "8*.iciz l3uttant"2 " androi d : layout_hei girt = "w ap--cant ent. " a rdroi d : l. ayou f _w i.clt h= " f .i 7.i..-pa r ertt " androd: t,ext= "@striitg/Con.f igurar" / ,
{.t:ir
i:
*n
andr:o i.d
"
android : layouL_width= " f j I j3arenr " android : Lext:= " G st. r' ing /' Acer ca<ie,' / ;,
<
ll\i
:!n anclro i<i : icl= " d +i <i../ !]ut. t on 0 4 " andro i d : 1 ayorr L_he i ghL = " ra'rap_cor.l ti en f "
i:ri:
j3arent
"
"
r' .!.itg
Sa
J..i.r'
>
/"1':air.l
b.!. e
e !tcr,.r :,
<,'i'*
< .;1,,,i.
l.e.iorj.t
:)
>'
n++.:: i,,:"'.:)r1tr
65
Android utiliza una lista de sufijos para expresar recursos alternativos. Estos sufijos pueden hacer referencia a la orientacin del dispositivo, al lenguaje, la regin,la densidad de pxeles,la resolucin, elmtodo de entrada,...
Por ejemplo, si queremos traducir nuestra aplicacin al ingls, espaol y francs. Siendo el primer idioma el usado por defecto, crearamos tres versionei del fichero strings.xmly lo guardaramos en los siguientes tres directorios:
r:e s /v.1.1.r.ie.rs I st.
r'i.r:qs . xml
.
xml-
Lrincs . xnil
1. Crea la carpeta res/values-en. 2. Copia en ella elfichero strings.xml. 3. Traduce en este fichero todas las cadenas al ingls. 4. Ejecuta la aplicacin en el emulador y verifica que la aplicacin est en
ingls.
5.
Vamos a cambiar la configuracin de idioma delemulador. Para ello, accede alescritorio (Pulsando el botn con forma de casa). En la parte inferior aparecer un botn que permite desplegar un men con todas las aplicaciones instaladas.
Abre la aplicacin Seffings y desciende hasta enconlrar Locale & text. Dentro de esta opcin selecciona Se/ecf locale. Selecciona ahora
66
7.
rra ro
ejemplo de utilizacin de recursos diferenciados lo podemos ver al crear aplicacin con Eclipse a partir de la versin 1.6 de Android. En este caso no crear una nica carpeta drawable para almacenar el icono de la aplicacin, sino
les
re lr /'Jraviabl
e - irdp
res,/.alues -en-rt-iS/
r:e :r,./. l. ue g - e n - r:I-l
K-
strings . zml
Ir
i. ni:
:/ s
s . zln
1.
Pero cuidado, Android estiablece un orden Rredes encontrar una lista de estos sufijos en:
1:
a la hora de
encadenar sufijos.
1:
-iand:: <>:i. <i - ,;ilk - w:i. rtd.oi"fi / (i:i<-':l /i gu::. <1*7i i:-o; i.i:: t;,/.'iilttlr i I .in . h I::i.i.,llAi i::e ni; t. *R*if:-:i:)11]:(:es-:
x c'i lt,/:r'+r:ri:)u
(:iif -
Para ver los sufijos disponibles tambin puedes pulsar con el botn derecho sobre una carpeta de recursos y seleccionar rirr > orh,*"':'... Selecciona Android > fudroid XML File. Esta opcin te permite crear un nuevo fichero XML y poner el
sufijo deseado de forma correcta.
Wlut type of resourcc <onfigurdicn uould you
--lvailable
i
i
lrike?
r2.-
QuLifis.s - {acouniryCode
fi$ L"n9u"g" G{ l'{eflon
"-
""-
,., l l
hosen Qualifierr
sue{)
Ll--__:;1
Smalt Normal
i
Sc.reen Sie
i l:lllNetworh Code
Hl.cs*--**.-J
t$n"*o
d
lp
oientatian
Touch Screen
l$ fertlnput
rir f.lavigation
-11
I fi irne-r,sian,......................
67
Text: Vi er;
version= "1.. 0 " encotling= "utf-B "? > android r id= " 6+ i d.z'"ext V i ew0 1 " android : layout_widtl'= " wr ap_c ont ent " androd: layout_tre glrt= "wrap_content " xmlns : android= "itttp: /,/schemas. and'oi . com,tapk/res,/android" android:text="li.se proqrana ha si,Co desarroTlado como ejempTo en el. curso de and.roici para demostrar cmo se pueden Tanzar rlue\zas activiaaes desde 7a act!',,idad principaT.">
<
r''l'*xt."/i.ew."
Creamos ahora una nueva actividad, que ser la responsable de visualizar esta vista. Para ello crea el fichero AcercaDejava. Botn derecho sobre
por:
publ.Ic clase AcercaDe xterda Activity { ,r'** C;..Ll.r:<i wiic:ri Lhr activi.ty i.s first
(1,Cr,'erri-ce
cre;t'qd. t/'
t
i
l
Pasemos ahora a crear un controlador de botn en la clase Asteroides.java
para que cuando sea pulsado se lance la nueva actividad.
68
bAcereaDe;
r,vie:-i
,tr,
ile
onCre.rt:i: (t3rlrr(i:j.e f,:irv*d.!.ns.:ti:i*ni::eljt.*t-e) i
:* i.;i:;rr i:: . ma
public void
in);
bAcercaDe *
bAcercaDe . set.SnCl"
{Button} findViewByld (R. i.Button13} ickti s tener {new OnClicklistener() { public void onCliek{View vie} {
lazarAcercale () ;
jt'
t
]
i.::::;::r'\r::el<-'*D* i
pub1.i.c voi.cl
ii
NOTA: Para poder utilizar los objetos r?irr.-r;:, t'-tiii. l ji!, s;f ejier-.y ,,;t.q, hes de imporlar varios paquetes, para ello o puedes aadir a mano los ;ni:c:t-t.:.; ,recesarios
o tr
ulsar Ctrl-Shift-O, para que se aadan automticanxente los paquetes que faltan.
. El problema es que toda actividad que ha de ser lanzada por una aplicacin ha de ser regstrada en el fichero AndroidManifest.xmt. Para regiitrar la actividad abre AndroidManifest.xml y seleccona la lengeta Application. En Aplication Nodes pulsa el botn Add... y selecciona Activity". Rellena los campos de la derecha taLy como se muestra a continuacin:
69
Ttr
actini$ tag.d:<lares
an
en&rald.4g.lrlirlty
a p* of
1.,,,.id
ru
.*,,,,:,!
1,ffi;j
[i,t*,# [.'D**;
tht
Nmc*
Thcme
fs*-"-1
f,E**"|
tbcl kon
Iir;;] ru l**".1
!ffi
.v
android: name= " . Ace.t',:.ile " android: label= {A::et:ci,le . . . " / >'
70
Un tema es una coleccin de estilos que cambia elaspecto de una de nuestras stas. Est inspirada en las hojas de estilo en cascada (css) que se emplean en b pginas web. Puedes utilizar alguno de los temas disponibles en Android o crear el tuyo propio.
Para definir tus propios estilos has de almacenarlos en res/values/stytes.xmt. En este caso utilizaremos uno de los de Android. Para ello abre AndroidManifest.xmly selecciona la lengeta Application. En Aplication Nodes pulsa sobre .AcercaDe y a la derecha introduce en elcampo Theme: elvalor:
@android :styleffheme.Dialog.
c ir
v i.
i:',. andro id : name= " ^ ;,',i: e I t:: .).: " androi.<i : l.alel = "./].,:':.t:t;,,.')r: . " .
:i
"
ii'i.,:i.1.,:.'c.i "
androi.d : theme=
i.v.l.,:t,"j'.it*:: .
>
71
a las aplicaciones
que se
despliegan pulsando el botn men del telfono. Podemos asignar un men de este tipo a nuestra aplicacin de forma muy sencilla.
Crea una carpeta con nombre res/menu. Pulsar con el botn derecho sobre esta carpeta y seleccionar Neu > Other... Selecciona Android > Android XML File. lntroduce en el campo File: el valor menu.xml y verifica que queremos crear un fichero de tipo men. Aparecer una lista vaca de elementos de men. Pulsa en el botn Add.. aade un elemento de tipo ltem. lntroduce en el campo ld e! valor @+idlconfig y en el campo Title el valor Configuracin. Repite el proceso para introducir un nuevo tem con /d tomando el valor @+id/acercaDe y Title con el valor Acerca de ...
cAndroid Menu
f,der*r
fhmsnt
EI *o
t-.Ad;-l
[J
Basc
hem objccb.
fril;l ru
[: ur.,j
i".s*"]]
t::j lll:1i:ii::::::::::::::l:l
ld
Menu
catcaory
Ordcr in c*egory
Configurar
f.B***"1 t.:.::::1.:.:::::::::111*
f;ffi
r-...1
l,,Brcnlgr^*.!
>
..:it-en android: id= t'rPai,rcr:nf ig" anriro i.d: t i.tl.e= " (]onf i.gir'ac
.:
>
it
".jr+
ic/acercaDe
Para activar
Asteroides.java:
el
el
siguiente cdigo
al final
de
72
later
,-
return falae;
)
Estilos y Temas
En el apartado anterior hemos visto lo sencillo que resulta aplicar uno de los temas disponibles en Android para mejorar el aspecto de una vista. Ahora aprenderemos algo ms sobre estilos y temas, tambin crearemos nuestros
propios estilos.
73
an<i rcr
.1.
a.<ircri.<i :
Es equivalente a escribir:
<TextView s Lyle=
",8s t:y1
e/MiEsti
t.exto" />
10 "
<resources>
<sty1e
trMi.Estil.o{
,'aa;..rnciro
j. <i : *cl-y..
parent=
)ame= !'and::c i,.1.: .i.ayorrt ....irei.qirLr, >wrap_content< / item> < item ilame=,' and::oi d : textCclc:: " >#00FFO 0< / item> < i tem irame= !' encii-oiC : t-ypef ace', >monospace< / i tem>
<
rlame=!'anC.:-.i.,1
:1.a./'orlt.....,ri.dLh">fill3arent</it.em>
</sty1e> /resources>
observa como un estilo puede heredar la propiedades de un padre (parmetro parent) y a partir de estas propiedades rcalizat modificaciones.
74
Diseo de la interfaz de usuario Puedes encontrar una lista de todos los estilos disponibles en Android en: http://developer.a ndroid. com/reference/android/R.stvle. html
a aquellos elementos donde sea posible. Por ejemplo, CodeFont solo afectar al texto.
una vista individual. Cada elemento del estilo solo se aplicar
application:
Para aplicar un tema a toda una aplicacin edita el fichero AndrcidMarifest.xml y aade el parmetro android:thente en la etiqueta
<
app
l i c a t i on
a nci
rc,
r' >
Tambin puedes aplicar un tema a una actividad en concreto: act ivi t.y
<
ano::c.,
"
>
1. 2. 3.
Crea un tema que herede de android:style/Therne.Dialog. lndica que el tipo de fuente sea rnonospace y el color de texto sea rojo. Aplica este tema a toda la aplicacin.
<
?r:rri
-e ::s
orr==
"
"
gna-o.i-l:..g=,' u I. f -
"
j-
>
,:Pref erenieSci'e11
xinllla.:irldr:o:i.d="itc-tr;,, 1':,-tr_:!l4nat:.;,;Lndrci.i..1 .a:oin/1>.k/r!:(:::,,at:r.ir-t>_i_tf andr:o i d : k.ty= " rl e f e-z^en ci ari.....r-i rtcip.e l " -,
,,
75
C'h e c
hFcxP re f
r.:
r:r: :i c
android : key= "nr-c j ca ' anriroid : t.it le= " Ileprodu<: i r n s ica,' anclroid: summr:f= " Se rep.rr:duce nsi.ca de .f c:itdo" i
<
>.
LisLFreferelrce android: key= "graf icos " android: title= "Tipo de grf icos"
ardro j-d: sUmmial'f= "Se escoqe .i,a .r^e;-r-esen tacin anclro i.cl : en tri es= " G a.r' r ay,t pc> sGr a f i c o s "
dtl
g.r-f.i t:o.s',
"
android: entryvalues= " Garray/ riposGr:afi cosl,,alores anCroid : def aul t.Val ue-- " L " i >
<Eci t Tezt.Preference android: key= " 7'uo^en:os " anclro i. rl : t i. t. 1. e= " I,lt.ine.r o <.1e .F r a gme n t
s' trozas se
c>
cU'j,Ce
ul asleroi<je"
"-J ",'>
Para almacenar
los
el
fichero
76
i r inq - arr;r/
.: .: .i. i:: eni:-.b j<
ani=
"
t.
i po
s<|z' a
fi
<>
s,'
>,
i i-e:i>vectorial.: r i
1,-ren>3D<
I,eri>
er:
:'
i.
e'r.:r
i:-eci:' 1
":
.i i:eri:"
/ st.rlrrJ
- e-
Tr:a\i:,
j-Clcs
r::r(lr.'e;t:e
(:r
ilr.riiiil.e ;:.irye:l:tiit:ar:<::e;9t;t:ei i
;
i:r)u r c:rj
i F- .
xnr.l., s e
t t i ng s i
NOTA: En este cdigo no se han incluido los .iici>t,t'r, prrlsa Ctrl-Shift-O para
aad ir I os de for ma du t 0 mt ica.
No hay que olvidar registrar toda nueva actividad Ancrroic*4anif esr. xrnt.
Para activar la configuracin desde la opcin de men aade el siguiente cdigo en el fichero Jistercrrdes . ja.;;r en el mtodo oit(ipl-i.:lertemseiecteii i i
dentro delswtch.
caae R.i<l
.c<>nf i.g:
L':r':
break;
Ananca la aplicacin y verifica que puedes lanzar las preferencias mediante la opcin de men correspondiente.
1.
Modifica Asteroides.java parc que se pueda acceder a las preferencias tanto desde el men como desde el botn de la primera actividad.
77
e-'.'enceSc:::t1i?It >
...r/ >
<CheckBcxP::ef ei'ence
<.Pl:
<,/
Ejercicio
1.
2. 3.
Crea una nueva lista de preferencias <F:reference$c::een> dentro de la lista de preferencias del fichero res/xml/seftings.xml. Asgnale al parmetro arrdroid: r.lLie el valor "Modo multijugador". Crea tres elementos dentro de esta lista: Activar multijugador, Mximo de jugadores y Tipo de conexin. Para este ultimo han de poder escogerse los valores: Bluetooth, Wi-Fie lnternet.
e:'eic:e:ic ::'esrl.L
...r/ >
<fiteckBcxf,::ef ei"ence
<1:::ef er en(::eC* teclc:t'./:.
": ,/
.:
/ l? r'e f
continuacin
categoras:
7B
1.
Modifica el ejemplo anterior para que en lugar de mostrar las propiedades en dos pantallas, las muestre en una sola, taly como se muestra en la imagen anterior.
Para navegar por el sistema de ficheros de un dispositivo (tanto virtual como real) accede al men Windows > Show View > Others... > Android > File Expl. Busca el siguiente fichero: ldalaldatalorg.examples.asteroide/shared_prefs/
org.examples. asteroide_preferences.xml
79
t;r.-:s i-d.
:
ir::l.
i@
;-;hi; i;;i;;;itt'
'
3lttl-"
Sizr
Dc
Tim: Pmision
ip,(o"omrcffio{t'oPn*nn
org,mmple,Shape-Drawable
lfili :;;;:::
lllii
[:r
>
.:bcoleair t:.me='rnusica' value=ntr!le'r,/> .:st ri-ng i:ame= I'r:rf icos " >1'< /st ring> .,. i; r i. l:i; il.llle * rr f ra;ntel t: <:r,; n :' :i': r/ ; - t ' ttg t
1-.
!
<,/na.r>
public void lllottt.r'tr'Pref erefic:ai; ( ) { llirar.ecli:ref er'*nctest pr'*f - geLjhareiiPref erences: i it "org. example. ascerides-pref erencest' . tiifft$,, ii# Sl.r:,nc- s = I'msica: 'r + ptgf .lteiBocleani"musicat'.true) +',, grf icog: " + pref .,:fetStrili+i"graf icostt t)i\ s, Tcast'LENGTH-SHOR?)'show{) ; Ttrrst ..rike?eri {this,
il
'
String s y los mtodos preferencias. utilizan Se le asigna los valores de dos de las parmetros: ( que de dos ( disponen y pref.getstring ), pref.getBoolean ) el valof de itei, que quefemos buscaf (":mr;;i.r::;r" Y "g::r.f ir::<>r.1 ") y gl valof asignado por defecto en caso de no encontrar esta xe1'.
privado (solo nuestra aplicacin tiene acceso). A continuacin crea el
comienza creando el objeto pref de la clase Sharedpreferences y le asigna un fichero de preferencias, abrindolo en modo
La funcin
Finalmente se visualiza
el
resultado utilizando
parmetros indicados Son el contexto (nuestra actividad), el eltiempo que se estar mostrando esta informacin.
BO
1. Copia la funcin anterior en la clase Asferoldes. 2. Asgnala a un botn. Por ejemplo, Jugar. 3. Aade el resto preferencias que hayas introducido.
1. 2.
Asigna al botn Sa7 el siguiente cdigo finish ( ) ;, De esta forma la actividad pasar a un segundo plano al pulsarlo.
2.7. Depurar
2.7.1. Depurar con Eclipse
El plug-in de Android para Eclipse tiene una excelente integracin con el depurador de Eclipse. lntroduce un error en tu cdigo modificando el cdigo fuente d lli:1.3i,'tr.rirri<:, pdIS que tenga eSte aspecto:
public class i:ol.aMi-rilli<i exLends Acl:iviLi, { ;'** (:a11eG wliei: r-iie act- ivili' ig f irst- creat,eci.. k i
i.;!\!r \!..r''.1.i/
public void cin(::re;al:e {3u:.<jle s-rll',e<iI::t:;ai!{:eii;l:ir1:e) gup er . cr tiL- r c: l- 1: ( si vr,.:,;i I ii. s t lic e S t: ;.r I cr ) ; r);:rject c - nul1;
i.
:.1
;,1
r..).
. 1.;r.i.o'.
ma
in);
l
Este cambio introduce un NullPointerException en tu cdigo. Si ahora ejecutas tu aplicacin, te aparecer esto:
B1
y cerar la ventana
del
Para averiguar ms sobre el enor, inserta un punto de ruptura en el cdigo fuente en la lnea Object o = null; (el breakpoint se introduce haciendo doble clic en la bana de la izquierda). Entonces selecciona Run / Debug History / HolaMundo para entrar en modo debug. Tu aplicacin se reiniciar en el emulador, pero esta
ha
introducido. Entonces puedes recorer el cdigo en modo Debug, igual que se hara en cualquier otro entorno de programacin.
para verificar
'ItetJ.E
(l:
Enofs
i;o!J.i.iit:Warnings
82
public class I..o1.if,ii:ri(i(:] extendB Acl.i.v.i.i::i' { ;'** i.lalle.l when lh* c:ivi::-; isl iirsi::
rt;O..'e
:r'eeit-etl
*7r
::':!.
i:)f:
public void t::nilr'*i:::e illr.,rdl* r:iiv'e(lIrl$i:.in.c*ii::ii::e) i L$9. d ( oHolaltlundo'r,'rEntrarloa en oncreate'r ) i super . cncreat e i Ea1,'ealrst.ancegt.aLe ) Ot;j*ci:: t:; = null; c. i:-o:il:r.ing ii ; sie l::Ccn i::en tV: *w i R . 1 a irciii i:: . main I ;
I j
/ Others...
Para ver el fichero de Log desde Eclipse accede al men Window / Android / LogOat.
Show View
LogCat puede utilizarse para detectar errores o problemas en el cdigo. Por eiemplo, si no tenemos muy claro qu parte del cdigo caus el error del ejemplo anterior, podemos buscar el ltimo error y ver cul fue la llamada de nuestro codigo que lo gener. En el siguiente cuadro se muestra como el error lo ha
ocasionado "holaAndroid.java: 1 0"
Pid ! !rj
3g t!
E9
Ad"oid:l'rnt rr
A]r.ridi:,nIrr$
rqt1
6rc
3, 0
r-r;.iiivil t: ns
9fj
l{sgs ,:'issi r a! .r
br :aa :h? ilrjifote:Erce:ic ril,intlrrid rn..:yE,it..irr:rir!r.'i,.i tdc,r :) il,irql apt frsttrrielrf,rllor.1|\{tj.r;i?(hrslelilsi:xfrrtti.-\.:ja? eair.i.l FF. ct, :!i itTir.si F8i irlrunriAar- i ti t r ir. 1 r' : t rThrE : ri i ! !,J!,+
.rh.r?zrsi'i.r r1rrl;'.'i..i
83