Curso 10/11

Curso de Enseanzas Propias Programacin en Android

Interfaces de Usuario en

Desarrollo de aplicaciones Android

Contenido

Diseo de la interfaz de usuario Asociar datos a controles (bsico) Programar la funcionalidad en!es Cuadros de dilogo

Interfaces de Usuario

[2]

Desarrollo de aplicaciones Android

Diseo de la IU en

Interfaces de Usuario

[3]

Desarrollo de aplicaciones Android

De qu se compone la IU?

Objeto View

"idgets# piezas bsicas$ %estionan las interacciones con su rea rectangular asociada (a)outs# disposicin en la pantalla$

UI de )) .ie/%roup UI**+erar,u-a +erar,u-a denodos nodos.ie/ .ie/ .ie/%roup

&b'eto ViewGroup

Interfaces de Usuario

[4]

Desarrollo de aplicaciones Android

Cmo Android dibuja la IU

ventana.xml
<?xml version="1.0" encoding="utf-8"?> <TableLa out android!id=""#id$%idget&8" android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent" xmlns!android="(tt)!$$sc(emas.android.. > <*ditText android!id=""#id$%idget&+" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!text="*ditText" android!text,i-e="18s)" > <$*ditText> <.utton android!id=""#id$%idget/0" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!text=".utton" > <$.utton> <0(ec1.ox android!id=""#id$%idget/1" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!text="0(ec1.ox" > <$0(ec1.ox> <$TableLa out>

,et0ontent2ie%34.la out.ventana5 ,et0ontent2ie%34.la out.ventana5

Interfaces de Usuario

[5]

Desarrollo de aplicaciones Android

Diseo de la IU

ediante cdigo
public class 6irst7)) extends 7ctivit 8 public class 6irst7)) extends 7ctivit 8 .utton btn9 .utton btn9 $:: 0alled %(en t(e activit is first created. :$ $:: 0alled %(en t(e activit is first created. :$ ";verride ";verride public void on0reate3.undle saved<nstance,tate5 8 public void on0reate3.undle saved<nstance,tate5 8 super.on0reate3saved<nstance,tate59 super.on0reate3saved<nstance,tate59 btn = new .utton3this59 btn = new .utton3this59 set0ontent2ie%3btn59 set0ontent2ie%3btn59 = =

ediante un fic0ero 1 (
2cil depuracin ) mantenimiento E3isten 0erramientas

Interfaces de Usuario

[6]

Desarrollo de aplicaciones Android

Elementos de la IU y recursos

4odo ob'eto de la interfaz tiene un ID asociado# es un recursos (a forma de referenciarlo en nuestro programa es estndar
<.utton <.utton android!id=""#id$m android!id=""#id$m 'button" 'button" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la android!la out'(eig(t="%ra)'content" out'(eig(t="%ra)'content" android!text=""string$m android!text=""string$m 'button'text"$> 'button'text"$> .utton .utton mm .utton .utton == 3.utton5 R.id.my_button 59 3.utton5 find2ie%. find2ie%. <d3 <d3 R.id.my_button 59

Interfaces de Usuario

[ ]

Desarrollo de aplicaciones Android

ayouts
4ipo (ineal 4able Absolute 8elati5e 2rame Descripcin (os elementos se ubican en orden$ Puede indicarse si 0orizontalmente o 5erticalmente$ (os elementos se organizan en filas ) dentro de cada una6 podemos ubicar 5arios elementos$ 7e indican las coordenadas e3actas donde deben ubicarse los elementos 7e especifica una posicin relati5a a otro elemento o la)out (os elementos pueden superponerse$ El marco ocupa toda la pantalla$

Interfaces de Usuario

[!]

Desarrollo de aplicaciones Android

inear layout
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <LinearLa out xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android" <LinearLa out xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android" android!orientation="vertical" android!la out'%idt(="fill')arent" android!orientation="vertical" android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent"> android!la out'(eig(t="fill')arent"> <.utton android!text=".utton01" android!id=""#id$.utton01" <.utton android!text=".utton01" android!id=""#id$.utton01" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" $> android!la out'(eig(t="%ra)'content" $> <.utton android!text=".utton0&" android!id=""#id$.utton0&" <.utton android!text=".utton0&" android!id=""#id$.utton0&" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" $> android!la out'(eig(t="%ra)'content" $> <$LinearLa out> <$LinearLa out> <?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <LinearLa out xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android" <LinearLa out xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android" android!orientation="(ori-ontal" android!la out'%idt(="fill')arent" android!orientation="(ori-ontal" android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent"> android!la out'(eig(t="fill')arent"> <.utton android!text=".utton01" android!id=""#id$.utton01" <.utton android!text=".utton01" android!id=""#id$.utton01" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" $> android!la out'(eig(t="%ra)'content" $> <.utton android!text=".utton0&" android!id=""#id$.utton0&" <.utton android!text=".utton0&" android!id=""#id$.utton0&" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" $> android!la out'(eig(t="%ra)'content" $> <$LinearLa out> <$LinearLa out> 2uente# 0ttp#99///$programacion$com9articulo9introducion:a:los:la)outs:para:android:;<<

Interfaces de Usuario

["]

Desarrollo de aplicaciones Android

!able layout
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <TableLa out android!id=""#id$TableLa out01" <TableLa out android!id=""#id$TableLa android!la out'%idt(="fill')arent" out01" android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent" android!la out'(eig(t="fill')arent" xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> <Table4o% android!id=""#id$Table4o%01"> <Table4o% android!id=""#id$Table4o%01"> <Text2ie% android!id=""#id$Text2ie%01" android!text="6irst <Text2ie% android!id=""#id$Text2ie%01" android!text="6irst >ame!" >ame!" android!%idt(="100)x" $> android!%idt(="100)x" $> <*ditText android!id=""#id$*ditText01" android!%idt(="&&0)x" $> <*ditText android!id=""#id$*ditText01" android!%idt(="&&0)x" $> <$Table4o%> <$Table4o%> <Table4o% android!id=""#id$Table4o%0&"> <Table4o% android!id=""#id$Table4o%0&"> <Text2ie% android!id=""#id$Text2ie%0&" android!text=",econd <Text2ie% android!id=""#id$Text2ie%0&" android!text=",econd >ame!" $> >ame!" $> <*ditText android!id=""#id$*ditText0&" $> <*ditText android!id=""#id$*ditText0&" $> <$Table4o%> <$Table4o%> <Table4o% android!id=""#id$Table4o%0/"> <Table4o% android!id=""#id$Table4o%0/"> <.utton android!id=""#id$.utton01" <.utton android!id=""#id$.utton01" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!la out'(eig(t="%ra)'content" android!text=",ubmit" $> android!text=",ubmit" $> <.utton android!id=""#id$.utton0&" <.utton android!id=""#id$.utton0&" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!text="4eset" android!la out'(eig(t="%ra)'content" android!text="4eset" android!%idt(="100)x" $> android!%idt(="100)x" $> <$Table4o%> <$Table4o%> <$TableLa out> <$TableLa out> 2uente# 0ttp#99///$programacion$com9articulo9introducion:a:los:la)outs:para:android:;<<

Interfaces de Usuario

[10]

Desarrollo de aplicaciones Android

"elati#e layout
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <4elativeLa out android!id=""#id$4elativeLa out01" <4elativeLa out out'%idt(="fill')arent" android!id=""#id$4elativeLa out01" out'(eig(t="fill')arent" android!la android!la android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent" xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> <Text2ie% android!id=""#id$Text2ie%01" <Text2ie% android!id=""#id$Text2ie%01" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!text="6irst >ame!" android!la out'(eig(t="%ra)'content" android!text="6irst >ame!" android!%idt(="100)x" $> android!%idt(="100)x" $> <*ditText android!id=""#id$*ditText01" android!la out'%idt(="&&0)x" <*ditText android!id=""#id$*ditText01" android!la out'%idt(="&&0)x" android!la out'(eig(t="%ra)'content" android!la out'(eig(t="%ra)'content" android!la out'to4ig(t;f=""#id$Text2ie%01" android!la out'to4ig(t;f=""#id$Text2ie%01" android!la out'belo%=""#id$4elativeLa out01" $> android!la out'belo%=""#id$4elativeLa out01" $> <*ditText android!id=""#id$*ditText0&" android!la out'%idt(="&&0)x" <*ditText android!id=""#id$*ditText0&" android!la out'%idt(="&&0)x" android!la out'(eig(t="%ra)'content" android!la out'(eig(t="%ra)'content" android!la out'belo%=""#id$*ditText01" android!la out'belo%=""#id$*ditText01" android!la out'alignLeft=""#id$*ditText01" $> android!la out'alignLeft=""#id$*ditText01" $> <Text2ie% android!id=""#id$Text2ie%0&" <Text2ie% android!id=""#id$Text2ie%0&" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!text=",econd >ame!" android!la out'(eig(t="%ra)'content" android!text=",econd >ame!" android!%idt(="100)x" android!la out'belo%=""#id$*ditText01" android!%idt(="100)x" android!la out'belo%=""#id$*ditText01" android!la out'toLeft;f=""#id$*ditText0&" $> android!la out'toLeft;f=""#id$*ditText0&" $> <.utton android!text=",ubmit" android!id=""#id$.utton01" <.utton android!text=",ubmit" android!id=""#id$.utton01" android!la out'%idt(="100)x" android!la out'(eig(t="%ra)'content" android!la out'%idt(="100)x" android!la out'(eig(t="%ra)'content" android!la out'belo%=""id$*ditText0&" android!la out'belo%=""id$*ditText0&"$> android!la out'alignLeft=""id$*ditText0&" android!la out'alignLeft=""id$*ditText0&" $> <.utton android!text="4eset" android!id=""#id$.utton0&" <.utton android!text="4eset" android!id=""#id$.utton0&" android!la out'%idt(="100)x" android!la out'(eig(t="%ra)'content" android!la out'%idt(="100)x" android!la out'(eig(t="%ra)'content" android!la out'belo%=""id$*ditText0&" android!la out'belo%=""id$*ditText0&" $> android!la out'align4ig(t=""id$*ditText0&" android!la out'align4ig(t=""id$*ditText0&" $> <$4elativeLa out> <$4elativeLa out>

2uente# 0ttp#99///$programacion$com9articulo9introducion:a:los:la)outs:para:android:;<<

Interfaces de Usuario

[11]

Desarrollo de aplicaciones Android

Absolute layout

<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <7bsoluteLa out android!id=""#id$7bsoluteLa out01" <7bsoluteLa outout'%idt(="fill')arent" android!id=""#id$7bsoluteLa out01" android!la android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent" android!la out'(eig(t="fill')arent" xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> <*ditText android!id=""#id$*ditText01" android!la out'%idt(="&00)x" <*ditText android!id=""#id$*ditText01" android!la out'%idt(="&00)x" android!la out'(eig(t="%ra)'content" android!la out'x="1&)x" android!laout' out'(eig(t="%ra)'content" android!la out'x="1&)x" android!la ="1&)x" $> android!la out' ="1&)x" android!id=""#id$.utton01" $> <.utton android!text=",earc(" <.utton android!text=",earc(" android!id=""#id$.utton01" android!la out'%idt(="100)x" android!la out'%idt(="100)x" android!la out'(eig(t="%ra)'content" android!la out'(eig(t="%ra)'content" android!la out'x="&&0)x" android!la out' ="1&)x" $> android!la out'x="&&0)x" android!la out' ="1&)x" $> <$7bsoluteLa out> <$7bsoluteLa out>

2uente# 0ttp#99///$programacion$com9articulo9introducion:a:los:la)outs:para:android:;<<

Interfaces de Usuario

[12]

Desarrollo de aplicaciones Android

$rame layout
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <6rameLa out android!id=""#id$6rameLa out01" <6rameLa out android!id=""#id$6rameLa android!la out'%idt(="fill')arent" out01" android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent" android!la out'(eig(t="fill')arent" xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> xmlns!android="(tt)!$$sc(emas.android.com$a)1$res$android"> <<mage2ie% android!id=""#id$<mage2ie%01" <<mage2ie% android!id=""#id$<mage2ie%01" android!src=""dra%able$android" android!src=""dra%able$android" android!la out'%idt(="fill')arent" android!la out'%idt(="fill')arent" android!la out'(eig(t="fill')arent" android!la out'(eig(t="fill')arent" android!scaleT )e="center" $> android!scaleT )e="center" $> <Text2ie% android!text="7ndroid ?arta1er" <Text2ie% android!text="7ndroid ?arta1er" android!id=""#id$Text2ie%01" android!id=""#id$Text2ie%01" android!la out'%idt(="%ra)'content" android!la out'%idt(="%ra)'content" android!la out'(eig(t="%ra)'content" android!la out'(eig(t="%ra)'content" android!la out'margin.ottom="&0di)" android!la out'margin.ottom="&0di)" android!la out'gravit ="center'(ori-ontal@bottom" android!la out'gravit ="center'(ori-ontal@bottom" android!)adding="10di)" android!)adding="10di)" android!text0olor="A770000" android!text,t le="bold" android!text0olor="A770000" android!text,t le="bold" android!text,i-e="&0)x" android!bac1ground="A00000000" $> android!text,i-e="&0)x" android!bac1ground="A00000000" $> <$6rameLa out> <$6rameLa out>

2uente# 0ttp#99///$programacion$com9articulo9introducion:a:los:la)outs:para:android:;<<

Interfaces de Usuario

[13]

Desarrollo de aplicaciones Android

Ejercicio %

Crear un layout para un formulario de una aplicacin ,ue permita introducir los datos de un TODO list$ (os elementos ,ue debe tener son6 al menos# Entrada de te3to6 seleccin de fec0a90ora6 un spinner para indicar un ni5el de importancia$

Interfaces de Usuario

[14]

Desarrollo de aplicaciones Android

&ecesitamos al'o de cdi'o

Spinners ) LisViews necesitan de un origen de datos para mostrar contenido$ Es necesario un adaptador ,ue se indica mediante el m=todo ,et7da)ter Para modificar la 5ista de los elementos6 no 0a) ,ue modificar el control sino el adaptador

Interfaces de Usuario

[15]

Desarrollo de aplicaciones Android

(ostrando informacin en nuestro control )pinner

public class T;B;List extends 7ctivit implements ;n<tem,electedListener 8 ,tringCD elementos = 8"alta"E"media"E"baFa"=9 $:: 0alled %(en t(e activit is first created. :$ ";verride public void on0reate3.undle saved<nstance,tate5 8 super.on0reate3saved<nstance,tate59 set0ontent2ie%34.la out.form59 ,)inner s)in = 3,)inner5find2ie%. <d34.id.spinner159 s)in.set;n<tem,electedListener3this59 7rra 7da)ter<,tring> aa = new 7rra 7da)ter<,tring>3thisEandroid.4.la out.simple_spinner_itemEelementos59 aa.setBro)Bo%n2ie%4esource3android.4.la out.simple_spinner_dropdown_item59 = s)in.set7da)ter3aa59

";verride public void on<tem,elected37da)ter2ie%<?> arg0E 2ie% arg1E int arg&E long arg/5 8 $$ TODO 7uto-generated met(od stub Toast.makeText3thisE elementosCarg&DE Toast.LENGTH_LONG5.s(o%359 = ";verride public void on>ot(ing,elected37da)ter2ie%<?> arg05 8 $$ TODO 7uto-generated met(od stub Toast.makeText3thisE ">ada ,eleccionado"E Toast.LENGTH_LONG5.s(o%359 = =

Interfaces de Usuario

[16]

Desarrollo de aplicaciones Android

(ostrando informacin en nuestro control )pinner *alternati#a+

,)inner s1 = 3,)inner5 find2ie%. <d34.id.s)inner159 7rra 7da)ter ada)ter = 7rra 7da)ter.create6rom4esource3t(isE 4.arra .colorsE
ada)ter.setBro)Bo%n2ie%4esource3android.4.la out.sim)le's)inner'dro)do%n'item59

android.4.la out.sim)le's)inner'item59

s1.set7da)ter3ada)ter59

Interfaces de Usuario

[1 ]

Desarrollo de aplicaciones Android

ist,ie- y customi.acin de los /tems mostrados

public class B namicBemo extends List7ctivit 8 public class B namicBemo extends List7ctivit 8 ";verride ";verride public void on0reate3.undle icicle5 8 public void on0reate3.undle icicle5 8 super .on0reate3icicle59 super.on0reate3icicle59 set0ontent2ie%34.la out.main59 set0ontent2ie%34.la out.main59 setList7da)ter3 new G 7da)tador3559 setList7da)ter3new G 7da)tador3559 = = class Gi7da)tador extends 7rra 7da)ter 8 class Gi7da)tador extends 7rra 7da)ter 8 <conic7da)ter35 8 <conic7da)ter35 8 super3B namicBemo.thisE 4.la out.mifilaE items59 super3B namicBemo.thisE 4.la out.mifilaE items59 = = public 2ie% get2ie%3int )ositionE 2ie% convert2ie%E public 2ie% get2ie%3 int )arent5 )ositionE 2ie%Hrou) 8 2ie% convert2ie%E 2ie%Hrou) )arent5 La out<nflater inflater=getLa8out<nflater359 La out<nflater inflater=getLa out. out<nflater359 2ie% ro%=inflater.inflate34.la rowE )arentE false59 2ie% ro%=inflater.inflate34.la out. row<d34.id. E )arentE false Text2ie% label=3Text2ie%5ro%.find2ie%. label 59 59 Text2ie% label=3Text2ie%5ro%.find2ie%. <d34.id. label 59 label.setText3itemsC)ositionD59 label.setText3itemsC)ositionD59 <mage2ie% icon=3<mage2ie%5ro%.find2ie%. <d34.id.icon59 <mage2ie% if 3...5 8 icon=3<mage2ie%5ro%.find2ie%. <d34.id.icon59 if 3...5 8 icon.set<mage4esource34.dra%able. delete59 icon.set<mage4esource34.dra%able. delete59 = else 8 = else 8 icon.set<mage4esource34.dra%able. ok59 icon.set<mage4esource34.dra%able. ok59 = = return3ro%59 return3ro%59 = = = = = =

Interfaces de Usuario

[1!]

Desarrollo de aplicaciones Android

Ejercicio 0

Crear un layout para una acti5idad ,ue muestre en forma de lista los elementos del arra) con las >tareas por 0acer?$ Para mostrar la importancia6 un icono de diferente color ser utilizado$

Interfaces de Usuario

[1"]

Desarrollo de aplicaciones Android

en!es en

Interfaces de Usuario

[20]

Desarrollo de aplicaciones Android

(en1es

en! de opciones# aparece cuando el usuario presiona el botn E@U$ en! de conte3to# opciones ,ue aparecen cuando el usuario toca ) mantiene el elemento ,ue tiene asociado dic0o men!$ 7ubmen!# aparece cuando el usuario selecciona una entrada del men!$

Interfaces de Usuario

[21]

Desarrollo de aplicaciones Android

Elaboracin de un men1

Definir el men! como un recurso ms en su fic0ero 1 ( Ainc0ar (inflate) el men! mediante cdigo# cargarlo como un ob'eto programable

<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <menu <menu xmlns!android="(tt)!$$sc(emas.android.com$a)1$r xmlns!android="(tt)!$$sc(emas.android.com$a)1$r es$android"> es$android"> <item android!id=""#id$ne%'game" <itemandroid!icon=""dra%able$ic'ne%'game" android!id=""#id$ne%'game" android!icon=""dra%able$ic'ne%'game" android!title=""string$ne%'game" $> android!title=""string$ne%'game" $> <item android!id=""#id$(el)" <itemandroid!icon=""dra%able$ic'(el)" android!id=""#id$(el)" android!icon=""dra%able$ic'(el)" android!title=""string$(el)" $> android!title=""string$(el)" $> <$menu> <$menu>

";verride ";verride )ublic boolean onCreateOptionsMenu3Genu menu5 8 )ublic boolean onCreateOptionsMenu 3Genu menu5 8 Genu<nflater inflater = getGenu<nflater359 Genu<nflater inflater = getGenu<nflater359 inflater.inflate34.menu.game'menuE menu59 inflater.inflate34.menu.game'menuE menu59 return true9 return true9 = =

Interfaces de Usuario

[22]

Desarrollo de aplicaciones Android

"ecurso2 menu
<?xml version="1.0" encoding=" tf!""?> <?xmlxmlns!android= version="1.0""#ttp$%%sc#emas.android.com%apk%res%android" encoding=" tf!""?> <menu > <menu xmlns!android= "#ttp$%%sc#emas.android.com%apk%res%android" > <item android!id="&'()'packa*e$)id%reso rce_name" <itemandroid!title= android!id="&'()'packa*e$)id%reso rce_name" "strin*" android!title="strin*""strin*" android!title0ondensed= android!title0ondensed= "strin*" android!icon= "&'packa*e$)drawable%drawable_reso rce_name" android!icon= "&'packa*e$)drawable%drawable_reso rce_name" android!on0lic1="met#od+name" android!on0lic1= "met#od+name" android!s(o%7s7ction='"if4oom" @ "never" @ "%it(Text" @ "al%a s"D android!s(o%7s7ction= '"if4oom" @ "never" @ "%it(Text" @ "al%a s"D android!actionLa out="&'packa*e$)la,o t%la,o t_reso rce_name" android!actionLa out="&'packa*e$)la,o t%la,o t_reso rce_name" android!action2ie%0lass= "class+name" android!action2ie%0lass= "class+name" android!al)(abetic,(ortcut="strin*" android!al)(abetic,(ortcut= "strin*" android!numeric,(ortcut= "strin*" android!numeric,(ortcut= android!c(ec1able= '"true" "strin*" @ "false"D android!c(ec1able= '"true" @ @ "invisible" "false"D android!visible='"visible" @ "gone"D android!visible= ' "visible" @ "invisible" @ "gone"D android!enabled='"enabled" @ "disabled"D android!enabled='"enabled" @ "disabled"D android!menu0ategor ='"container" @ "s stem" @ "secondar " @ "alternative"D android!menu0ategor = ' "container" @ "s stem" @ "secondar " @ "alternative"D android!order<n0ategor ="inte*er" $> android!order<n0ategor = "inte*er" $> <grou) android!id="&'()'packa*e$)id%reso rce+name" <grou)android!c(ec1able.e(avior= android!id="&'()'packa*e$)id%reso '"none" @ rce+name" "all" @ "single"D android!c(ec1able.e(avior= '"none" @ "all" @ "single"D android!visible= '"visible" @ "invisible" @ "gone"D android!visible= ' "visible" @ "invisible" @ "gone"D android!enabled='"enabled" @ "disabled"D android!enabled= ' "enabled" @ "disabled"D android!menu0ategor ='"container" @ "s stem" @ "secondar " @ "alternative"D android!menu0ategor ='= "container" android!order<n0ategor "inte*er" > @ "s stem" @ "secondar " @ "alternative"D android!order<n0ategor ="inte*er" > <item $> <item $> <$grou)> <$grou)> <item > <item > <menu> <menu> <item $> <item $> <$menu> <$menu> <$item> <$item> <$menu> <$menu>

Interfaces de Usuario

[23]

Desarrollo de aplicaciones Android

3ro'ramar las acciones del men1

Ante una seleccin6 el sistema llama on;)tions<tem,elected Bnico argumento del tipo Genu<tem
";verride ";verride public boolean
on;)tions<tem,elected3Genu<tem item5 8 public boolean on;)tions<tem,elected3Genu<tem item5 8 $$ Iandle item selection $$ Iandle item selection switch 3item.get<tem<d355 8 switch 3item.get<tem<d355 8 case 4.id.ne%'game! case 4.id.ne%'game! ne%Hame359 ne%Hame359 return true9 return true9 case 4.id.(el)! case 4.id.(el)! s(o%Iel)359 s(o%Iel)359 return true9 return true9 default! default! return super.on;)tions<tem,elected3item59 return super.on;)tions<tem,elected3item59

= =

Interfaces de Usuario

[24]

Desarrollo de aplicaciones Android

C) 8egistrar el men!

(en1es de conte4to
register6or0ontextGenu3getList2ie%3559 register6or0ontextGenu3getList2ie%3559

D) Definir la apariencia
";verride ";verride public void on0reate0ontextGenu30ontextGenu menuE 2ie% vE0ontextGenu<nfo menu<nfo5 8 public void on0reate0ontextGenu30ontextGenu menuE 2ie% vE0ontextGenu<nfo menu<nfo5 8super.on0reate0ontextGenu3menuE vE menu<nfo59 super.on0reate0ontextGenu3menuE vE menu<nfo59 Genu<nflater inflater = getGenu<nflater359 Genu<nflater inflater = getGenu<nflater359 inflater.inflate34.menu.context'menuE menu59 = inflater.inflate34.menu.context'menuE menu59 =

E)Atender los e5entos

";verride ";verride public boolean on0ontext<tem,elected3Genu<tem item5 8 public boolean on0ontext<tem,elected3Genu<tem item5 8 7da)ter0ontextGenu<nfo info = 37da)ter0ontextGenu<nfo5 item.getGenu<nfo359 7da)ter0ontextGenu<nfo info switch 3item.get<tem<d355 8 = 37da)ter0ontextGenu<nfo5 item.getGenu<nfo359 switch 3item.get<tem<d355 8 case 4.id.edit! case 4.id.edit! edit>ote3info.id59 edit>ote3info.id59 return true9 return true9 case 4.id.delete! case 4.id.delete! delete>ote3info.id59 delete>ote3info.id59 return true9 return default ! true9 default return ! super.on0ontext<tem,elected3item59 = return super.on0ontext<tem,elected3item59 = = =

Interfaces de Usuario

[25]

Desarrollo de aplicaciones Android

Ejercicio 5

Programar un men! de opciones para la acti5idad >(ista de 4areas? (@ue5a6 Forrar ) Editar)$ Programar un men! conte3tual para el -tem de la lista de tareas (Eliminar ) Editar)$

Interfaces de Usuario

[26]

Desarrollo de aplicaciones Android

Programar la funcionalidad

Interfaces de Usuario

[2 ]

Desarrollo de aplicaciones Android

6estin de e#entos de la IU

Aa) ,ue implementar el m=todo asociado con el e5entos ,ue ,ueremos interceptar () registrarlo)
";verride ";verride public void on0reate3.undle saved<nstance,tate5 8 public void on0reate3.undle saved<nstance,tate5 8 super.on0reate3saved<nstance,tate59 super.on0reate3saved<nstance,tate59 btn = 3.utton5find2ie%. <d34.id.miboton59 btn = 3.utton5find2ie%. <d34.id.miboton59 btn.set;n0lic1Listener3this59 btn.set;n0lic1Listener3this59 set0ontent2ie%34.la out.main59 set0ontent2ie%34.la out.main59 = = public void on0lic132ie% v5 8 public void on0lic132ie% v5 8 $$ TODO 7uto-generated met(od stub $$ TODO 7uto-generated met(od stub btn.setText3new Bate35.to,tring3559 btn.setText3new Bate35.to,tring3559 = =

Interfaces de Usuario

[2!]

Desarrollo de aplicaciones Android

E#ent isteners
E5ento onClicG on(ongClicG on2ocusC0ange onHe) on4ouc0 onCreateConte3t enu (istener .ie/$&nClicG(istener .ie/$&n(ongclicG .ie/$&n2ocusC0ange(istener .ie/$&nHe)(istener .ie/$&n4ouc0(istener .ie/$&nCreateConte3t enu(istener #ie$.set%n[&vent]'istener

Interfaces de Usuario

[2"]

Desarrollo de aplicaciones Android

Ejercicio 7

Programar los mane'adores de e5entos para los botones (%uardar ) Cancelar) del formulario de Edicin9Creacin de tareas$

Interfaces de Usuario

[30]

Desarrollo de aplicaciones Android

Cuadros de dilogo

Interfaces de Usuario

[31]

Desarrollo de aplicaciones Android

Di8lo'os

ostrarlo usando s(o%Bialog3int5 (a primera 5ez ,ue crea6 Android llama a on0reateBialog3int5 Antes de mostrarlo6 Android llama a on?re)areBialog3intEBialog5 Cierre usando dimiss o dimissBialog3int5

Captura del e5ento de cierre onBimiss

>Puesta a cero? del estado con removeBialog3int5

[32]

Interfaces de Usuario

Desarrollo de aplicaciones Android

AlertDialo'
7lertBialog..uilder builder = new 7lertBialog..uilder3this59 7lertBialog..uilder builder = newou 7lertBialog..uilder3 this59 builder.setGessage3"7re ou sure %ant to exit?"5 builder.setGessage3"7re ou sure ou %ant to exit?"5 .set0ancelable3false5 .set0ancelable3false5 .set?ositive.utton3"Jes"E new Bialog<nterface.;n0lic1Listener35 8 .set?ositive.utton3"Jes"E new Bialog<nterface.;n0lic1Listener35 8 public void on0lic13Bialog<nterface dialogE int id5 8 public void on0lic13Bialog<nterface dialogE int id5 8 G 7ctivit .this.finis(359 G 7ctivit .this.finis(359 = = =5 =5 .set>egative.utton3">o"E new Bialog<nterface.;n0lic1Listener35 8 .set>egative.utton3">o"E new Bialog<nterface.;n0lic1Listener35 8 public void on0lic13Bialog<nterface dialogE int id5 8 public void on0lic13Bialog<nterface dialogE int id5 8 dialog.cancel359 dialog.cancel359 = = =59 =59 alert = builder.create359 7lertBialog 7lertBialog alert = builder.create359
final 0(ar,eKuenceCD items = 8"4ed"E "Hreen"E ".lue"=9 final 0(ar,eKuenceCD items = 8"4ed"E "Hreen"E ".lue"=9 7lertBialog..uilder builder = new 7lertBialog..uilder3this59 7lertBialog..uilder builder = new 7lertBialog..uilder3this59 builder.setTitle3"?ic1 a color"59 builder.setTitle3"?ic1 new a color"59 builder.set<tems3itemsE Bialog<nterface.;n0lic1Listener35 8 builder.set<tems3itemsE new Bialog<nterface.;n0lic1Listener35 8 public void on0lic13Bialog<nterface dialogE int item5 8 public void on0lic13Bialog<nterface dialogE int item5 8 Toast.ma1eText3get7))lication0ontext35E itemsCitemDE Toast.L*>HTI',I;4T5.s(o%359 Toast.ma1eText3get7))lication0ontext35E itemsCitemDE Toast.L*>HTI',I;4T5.s(o%359 =

=59 = =59 7lertBialog alert = builder.create359 7lertBialog alert = builder.create359

Interfaces de Usuario

[33]

Desarrollo de aplicaciones Android

AlertDialo' *II+
7lertBialog..uilder builder = new 7lertBialog..uilder3this59 7lertBialog..uilder builder = new 7lertBialog..uilder3this59 builder.setTitle3"?ic1 a color"59 builder.setTitle3"?ic1 a color"59 builder.set,ingle0(oice<tems3itemsE -1E new Bialog<nterface.;n0lic1Listener35 8 builder.set,ingle0(oice<tems3itemsE -1E new Bialog<nterface.;n0lic1Listener35 8 public void on0lic13Bialog<nterface dialogE int item5 8 public void on0lic13Bialog<nterface dialogE int item5 8 Toast.ma1eText3get7))lication0ontext35E itemsCitemDE Toast.L*>HTI',I;4T5.s(o%359 Toast.ma1eText3get7))lication0ontext35E itemsCitemDE Toast.L*>HTI',I;4T5.s(o%359 =

=59 = =59 7lertBialog alert = builder.create359 7lertBialog alert = builder.create359

?rogressBialog dialog = ?rogressBialog.s(o%3G 7ctivit .t(isE ""E ?rogressBialog dialog = ?rogressBialog.s(o%3G 7ctivit .t(isE ""E "Loading. ?lease %ait..."E true59 "Loading. ?lease %ait..."E true59

?rogressBialog )rogressBialog9 ?rogressBialog )rogressBialog = )rogressBialog9 ne% ?rogressBialog3m0ontext59 )rogressBialog = ne% ?rogressBialog3m0ontext59 )rogressBialog.set?rogress,t le3?rogressBialog.,TJL*'I;4<L;>T7L59 )rogressBialog.set?rogress,t le3?rogressBialog.,TJL*'I;4<L;>T7L59 )rogressBialog.setGessage3"Loading..."59 )rogressBialog.setGessage3"Loading..."59 )rogressBialog.set0ancelable3false59 )rogressBialog.set0ancelable3false59

Interfaces de Usuario

[34]

Desarrollo de aplicaciones Android

Di8lo'os a medida

Disear la apariencia del dilogo de la misma manera ,ue 0emos 5isto para las IU de las acti5idades Asociar el la)out al ob'eto Dialog mediante set0ontent2ie% Para modificar el aspecto por defecto de un dilogo# set2ie%

4oma como argumento un ob'eto .ie/ con nuestras preferencias (uso de Inflater)
[35]

Interfaces de Usuario

Desarrollo de aplicaciones Android

Di8lo'os a medida2 ejemplos

0ontext m0ontext = get7))lication0ontext359 0ontext m0ontext = get7))lication0ontext359 Bialog dialog = ne% Bialog3m0ontext59 Bialog dialog = ne% Bialog3m0ontext59 dialog.set0ontent2ie%34.la out.custom'dialog59 dialog.set0ontent2ie%34.la out.custom'dialog59 dialog.setTitle3"0ustom Bialog"59 dialog.setTitle3"0ustom Bialog"59 Text2ie% text = 3Text2ie%5 dialog.find2ie%. <d34.id.text59 Text2ie% text = 3Text2ie%5 dialog.find2ie%. <d34.id.text59 text.setText3"IelloE t(is is a custom dialogM"59 text.setText3"IelloE t(is is a custom dialogM"59 <mage2ie% image = 3<mage2ie%5 dialog.find2ie%. <d34.id.image59 <mage2ie% image = 3<mage2ie%5 dialog.find2ie%. <d34.id.image59 image.set<mage4esource34.dra%able.android59 image.set<mage4esource34.dra%able.android59
7lertBialog..uilder builder9 7lertBialog..uilder builder9 7lertBialog alertBialog9 7lertBialog alertBialog9 0ontext m0ontext = get7))lication0ontext359 0ontext m0ontext = get7))lication0ontext359 La out<nflater inflater = 3La out<nflater5 La out<nflater inflater = 3La out<nflater5 m0ontext.get, stem,ervice3L7J;NT'<>6L7T*4',*42<0*59 m0ontext.get, stem,ervice3L7J;NT'<>6L7T*4',*42<0*59 2ie% la out = inflater.inflate34.la out.custom'dialogE 2ie% la out = inflater.inflate34.la out.custom'dialogE 32ie%Hrou)5 find2ie%. <d34.id.la out'root559 32ie%Hrou)5 find2ie%. <d34.id.la out'root559 Text2ie% text = 3Text2ie%5 la out.find2ie%. <d34.id.text59 Text2ie% text = 3Text2ie%5 out.find2ie%. <d34.id.text59 text.setText3"IelloE t(is is la a custom dialogM"59 text.setText3"IelloE t(is is la a custom dialogM"59 <mage2ie% image = 3<mage2ie%5 out.find2ie%. <d34.id.image59 <mage2ie% image = 3<mage2ie%5 la out.find2ie%. <d34.id.image59 image.set<mage4esource34.dra%able.android59 image.set<mage4esource34.dra%able.android59 builder = ne% 7lertBialog..uilder3m0ontext59 builder = ne% 7lertBialog..uilder3m0ontext59 builder.set2ie%3la out59 builder.set2ie%3la out59 alertBialog = builder.create359 alertBialog = builder.create359

Interfaces de Usuario

[36]

Desarrollo de aplicaciones Android

Ejercicio 9

Programar alg!n dilogo para nuestra aplicacin ) me'orarla$ Por e'emplo6 pedir confirmacin antes de borrar un elemento de la lista de tareas para siempre$

Interfaces de Usuario

[3 ]

Desarrollo de aplicaciones Android

)i'ue siendo demasiado?

Estructura de una aplicacin Android

[3!]