Está en la página 1de 8

10/12/2014

Interfazdeusuario

LastPublished:01/26/201411:34:14

PDF

Interfaz de usuario
Views
Algunasclasestiles
Toast
AlertDialog
ProgressDialog
InputFilter
Layouts
Eventos
ActivitieseIntents
Fragmentos
Mensypreferencias
VisordeGoogleMaps
Enestasesinvamosaintroducireldiseoyprogramacindeinterfacesdeusuariobsicaspara
Android.LaAPIdeAndroidproporcionaelaccesoaunaseriedecomponentesdealtonivelquenos
ahorrantenerqueprogramarlosdesdecero.Porotroladosuusonospermitirdaranuestras
aplicacioneselmismoaspectoqueelrestodeaplicacionesdelsistema.

Views
Todosloscomponentesvisualesdelainterfazdeusuario,talescomobotones,camposdetexto,
selectores,etc,sedenominanViewsenAndroid.LosviewssepuedenagruparenViewGroupsque
sirvenparareutilizarcomponentesquesiemprevayanautilizarsejuntos.
LosviewssedistribuyensobreLayouts.Haydistintostiposdelayout,segnladistribucinde
componentesquequeramostenerenlapantalla.EllayoutquemsseutilizaeselLinearLayoutque
puededisponerloscomponentesunodespusdelotro,obienhorizontalmente,obienverticalmente.Para
hacercombinacionessepuedenincluirlayoutsmspequeosdentrodeotros.
Cualquierviewolayoutpuedeocupar,obieneltamaocompletoquesucontenedorlepermita:
fill_parent,obieneltamaomnimoquenecesiteparadarcabidaaloscomponentesycontenidos
quehayaenl:wrap_content.Estosdosvalorespuedenseraplicadostantoenhorizontalcomoen
vertical,mediantelosatributoslayout_widthylayout_height.
Aunquecualquierinterfazgrficosepodracrearprogramticamente,sinhacerusodeningnrecurso
XML,lonormalesdisearnuestroslayoutsenformatoXMLyconlaayudadeldiseadordeinterfaces
disponibleenelplugindeAndroidparaEclipse.As,podemosintroduciruncomponenteTextViewen
unlayoutllamadomain.xmlymostrarloennuestraactividadprincipal:
publicclassInterfacesextendsActivity{
/**Calledwhentheactivityisfirstcreated.*/

@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
((TextView)findViewByID(R.id.TextView01)).setText("HolaAndroid");

}
}

dondeelXMLdemain.xmlsera:
<?xmlversion="1.0"encoding="utf8"?>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

1/8

10/12/2014

Interfazdeusuario

android:layout_height="wrap_content">
<TextView

android:text="HolaAndroid"

android:id="@+id/TextView01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>
</LinearLayout>

ObienpodemosprescindirderecursosXMLyaadirlosviewsdesdeelcdigo:
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);

TextViewmiTextView=newTextView(this);
setContentView(miTextView);
miTextView.setText("HolaAndroid");
}
Porsupuesto,espreferibletrabajarconlosrecursosXMLcuandoseaposible,yaquefacilitanla
mantenibilidaddelprograma,ascomosudiseo,quevieneapoyadoporlaherramientadiseadoradel
pluginparaEclipse.
AlgunosviewsestndarqueAndroidproporcionasonlossiguientes:

TextView,etiquetadetexto.
EditText,campodetexto.
Button,botnpulsableconetiquetadetexto.
ListView,grupodeviewsquelosvisualizaenformadelistavertical.
Spinner,listadesplegable,internamenteesunacomposicindeTextViewydeListView.
CheckBox,casillamarcablededosestados.
RadioButton,casillaseleccionablededosestados,dondeungrupodeRadioButtonsslo

permitiraseleccionarunodeellosalmismotiempo.
ViewFlipper,ungrupodeViewsquenospermiteseleccionarquviewvisualizareneste
momento.
ScrollView,permiteusarbarrasdedesplazamiento.Slopuedecontenerunelemento,que
puedeserunLayout(conotrosmuchoselementosdentro).
DatePicker,permiteescogerunafecha.
TimePicker,permiteescogerunahora.
OtrosmsavanzadoscomoMapView(vistadeGoogleMaps)yWebView(vistadenavegador
web),etc.
Unabuenaprcticadeprogramacinesextenderelcomportamientodeloscomponentespormediode
herencia.Ascrearemosnuestrospropioscomponentespersonalizados.MsinformacinsobreViewsse
puedeobtenereneltutorialoficial:
http://developer.android.com/resources/tutorials/views/index.html .
Algunas clases tiles
EnlaAPIparainterfacesgrficoshayotrasclasestilesparalainteraccinconelusuario.Veamos
algunasdeellas.
Toast

LosToastsirvenparamostraralusuarioalgntipodeinformacindelamaneramenosintrusiva
posible,sinrobarelfocoalaactividadysinpedirningntipodeinteraccin,desapareciendo
automticamente.Eltiempoquepermanecerenpantallapuedeser,obienToast.LENGTH_SHORT,o
bienToast.LENGTH_LONG.Secreanymuestranas:
Toast.makeText(MiActividad.this,

"Preferenciadevalidacinactualizada",

Toast.LENGTH_SHORT).show();

Nohayqueabusardeellospues,siseacumulanvarios,irnapareciendounodespusdeotro,esperando
aqueacabeelanterioryquizsadestiempo.Sontilesparaconfirmaralgntipodeinformacinal
usuario,queledarseguridaddequeesthaciendolocorrecto.Nosontilesparamostrarinformacin
importante,niinformacinextensa.Porltimo,sisevanautilizarcomomensajesdeDebug,aunqueson
tilesesmuchomejorutilizarlainstruccinLOG.d("TAG","Mensajeamostrar")yseguirel
LogCatenelniveldedebugging.
AlertDialog

LosAlertDialogsontilesparapedirconfirmaciones,obienformularpreguntasquerequieran
pulsar"aceptar"o"cancelar".Acontinuacinsemuestraunejemplodeladocumentacinoficialde
Android:

AlertDialog.Builderbuilder=newAlertDialog.Builder(this);
http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

2/8

10/12/2014

Interfazdeusuario

builder.setMessage("Areyousureyouwanttoexit?")
.setCancelable(false)
.setPositiveButton("Yes",newDialogInterface.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,intid){
MyActivity.this.finish();
}
})
.setNegativeButton("No",newDialogInterface.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,intid){
dialog.cancel();
}
});
AlertDialogalert=builder.create();

Siqueremosunalistadelaqueseleccionar,podemosconseguirlodelasiguientemanera:
finalCharSequence[]items={"Red","Green","Blue"};
AlertDialog.Builderbuilder=newAlertDialog.Builder(this);
builder.setTitle("Pickacolor");
builder.setItems(items,newDialogInterface.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,intitem){
Toast.makeText(getApplicationContext(),items[item],Toast.LENGTH_SHORT).show();
}
});
AlertDialogalert=builder.create();

ProgressDialog

LosProgressDialogsirvenparaindicarprogreso.Porejemplo,

ProgressDialogdialog=ProgressDialog.show(MyActivity.this,"",

"Loading.Pleasewait...",true);
generaundilogoconindicadordeprogresoindefinido:

mientrasque

ProgressDialogprogressDialog;
progressDialog=newProgressDialog(mContext);
progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
progressDialog.setMessage("Loading...");
progressDialog.setCancelable(false);
generaundilogoconunabarradeprogresohorizontal:

Enestecaso,paraindicarelprogresoseutilizaelmtodoprogressDialog.setProgress(int)
indicandoelporcentajetotaldeprogreso,ylotpicoseraqueestallamadasehicieradesdeotrohilocon
unHandler,obiendesdeelmtodoAsyncTask.onProgressUpdate(String).
http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

3/8

10/12/2014

Interfazdeusuario
InputFilter

CuandoseintroducetextoenunEditText,elcontenidopermitidosepuedelimitary/ocorregirusando
unInputFilterounacoleccindeellos.HaydosInputFilteryacreados,unoesparaobligara
quetodoseanmaysculasyelotroesparalimitarlalongituddelcampo.Ademssepuedencrearfiltros
personalizados.Enelsiguienteejemploseasignantresfiltros(unodecadatipo)auncampodetexto.Los
filtrosseaplicanporelordenenelqueestnenelvector.
EditTexteditText=(EditText)findViewById(R.id.EditText01);
InputFilter[]filters=newInputFilter[3];
filters[0]=newInputFilter.LengthFilter(9);
filters[1]=newInputFilter.AllCaps();
filters[2]=newInputFilter(){
publicCharSequencefilter(CharSequencesource,intstart,intend,

Spanneddest,intdstart,intdend){
if(end>start){
StringdestTxt=dest.toString();
StringresultingTxt=destTxt.substring(0,dstart)+

source.subSequence(start,end)+destTxt.substring(dend);
if(!resultingTxt.matches("^[AF09]*$")){
if(sourceinstanceofSpanned){
SpannableStringsp=newSpannableString("");
returnsp;
}else{
return"";
}
}
}
returnnull;
}
};
dniEditText.setFilters(filters);

Elltimofiltrocompruebaquesecumplalaexpresinregular^[AF09]*$(caracteresdenmero
hexadecimal).

Layouts
LosLayoutssonunaextensindelaclaseViewGroupyseutilizanparaposicionarcontroles(Views)en
lainterfazdeusuario.Sepuedenanidarunosdentrodeotros.
LoslayoutsepuedendefinirenformatoXMLenlacarpetares/layout.Porejemplo,elsiguiente
layoutlinealdispondrsuselementos(TextViewyButton)unodebajodelotro:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right">

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>

<Buttonandroid:text="Siguiente"

android:id="@+id/Button01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>
</LinearLayout>
Paradisponerlosunoalladodelotroseutilizaorientation="horizontal".Porotrolado,el
atributogravityindicahaciaquladosevanaalinearloscomponentes.
Algunosdeloslayoutsmsutilizadosson:

LinearLayout,disponeloselementosunodespusdelotro.
FrameLayout,disponecualquierelementoenlaesquinasuperiorizquierda.
RelativeLayout,disponeloselementosenposicionesrelativasconrespectoaotros,ycon
respectoalasfronterasdellayout.
TableLayout,disponeloselementosenformadefilasycolumnas.
Gallery,disponeloselementosenunanicafiladesplazable.

Eventos
http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

4/8

10/12/2014

Interfazdeusuario

Paraquelosviewsseanusables,hayqueasignarmanejadoresaloseventosquenosinteresen.Por
ejemplo,paraunButtonpodemosasociaruncomportamientoasignndoleunonClickListener:
ImageButtonimageButton=(ImageButton)findViewById(R.id.ImageButton01);
imageButton.setOnClickListener(newOnClickListener(){

@Override

publicvoidonClick(Viewv){

Toast.makeText(getApplicationContext(),

"Graciasporpulsar.",Toast.LENGTH_SHORT).show();

});

Sepuedenescucharloseventosdecualquierotrotipodeview,inclusodelosTextView.

Activities e Intents
Yaestamosfamiliarizadosconlasactividadesdeandroid:setratadetareasquemuestranuninterfaz
grficoalusuario,yslopodemosverenpantallaunaActivityalavez.Muchasaplicacionestienenuna
actividadprincipalquepuedellevarnosaotrasactividadesdelaaplicacin,oinclusoaactividadesde
otrasaplicaciones.

Esteciclodevidapuededefinirsepormediodelossiguientesmtodos:
publicclassActivityextendsApplicationContext{
protectedvoidonCreate(BundlesavedInstanceState);
protectedvoidonStart();

protectedvoidonRestart();
protectedvoidonResume();
protectedvoidonPause();
protectedvoidonStop();
protectedvoidonDestroy();
}

http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

5/8

10/12/2014

Interfazdeusuario

Haytressubciclostpicosenlavidadeunaactividad:
TodoelciclodevidaocurredesdelaprimerallamadaaonCreate(Bundle)hastalallamada
(nica)almtodoonDestroy().Portantoenestaltimasedebenliberarlosrecursosque
quedenporliberar.
EltiempodevidavisibleocurreentreonStart()yonStop().Duranteestetiempoelusuario
verlaactividadenpantalla,inclusoaunquestanotengaelfocoenestemomentooesten
segundoplano(perovisible).LosmtodosonStart()yonStop()podrnserllamados
mltiplesveces,segnlaactividadsehagavisibleoseoculte.
EltiempodevidaenprimerplanoocurreentrelosmtodosonResumeyonPause.Laactividad
puedepasarconfrecuenciaentreelestadopausadoyprimerplano,demaneraqueelcdigode
estosmtodosdebeserrpido.
Nota
Cuandounaactividadsepausa,stapuedenovolvernuncaaprimerplanosinosermatadadebido
aqueelsistemaoperativolodecidaas,porfaltaderecursosdememoria.Portantotendremos
queintentarguardarlosestadosdenuestrasactividadesdetalmaneraquesilaactividadse
retomacononResume(),elusuariotengalamismaexperienciaquesiarrancalaaplicacinde
nuevo.ParaellonosayudaelparmetrodeonCreate(Bundle)queguardaelestadodelos
formulariosylosrellenadenuevo"automgicamente",sintenerqueprogramarlonosotros.

ParapasardeunaactividadaotraseutilizanlosIntent.UnIntentesunadescripcinabstractade
unaoperacinarealizar.SepuedeutilizarconelmtodostartActivityparalanzarunaactividad,
conbroadcastIntentparaenviarseacualquiercomponentereceptorBroadcastReceiver,y
constartServiceobindServiceparacomunicarconunservicio(Service)quecorreen
segundoplano.
Porejemplo,paralanzarlaactividadllamadaMiActividad,loharemosas:
Intentintent=newIntent(this,MiActividad.class);
startActivity(intent);
Parainiciarunallamadadetelfonotambinutilizaremosintents:
Intentintent=newIntent(Intent.ACTION_DIAL,Uri.parse("tel:965903400"));
startActivity(intent);
Podemospasaruncdigodepeticinalaactividad:
startActivityForResult(intent,CODIGO_INT);
Ypodemosesperarunresultadodelaactividad,generndoloas
Intentresultado=newIntent(null,Uri.parse("content://datos/1");
resultado.putExtra(1,"aaa");
resultado.putExtra(2,"bbb");
if(ok)

else

setResult(RESULT_OK,resultado);
setResult(RESULT_CANCELED,null);

finish();
yrecogiendoelresultadoconelmtodoonActivityResult()sobrecargado:
@Override
publicvoidonActivityResult(intreqCode,intresultCode,Intentdata){

switch(reqCode){

case1:

break;

case2:

break;

default:

}
}
AlgunasaccionesnativasdaAndroidson:
ACTION_ANSWER
ACTION_CALL
ACTION_DELETE
ACTION_DIAL
ACTION_EDIT
ACTION_INSERT
ACTION_PICK
ACTION_SEARCH
ACTION_SENDTO
ACTION_VIEW
ACTION_WEB_SEARCH
http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

6/8

10/12/2014

Interfazdeusuario

Fragmentos
Android3.0y4.0estpreparadoparatablets.Unodelosobjetivosquesepersiguenesquelas
aplicacionespuedanestarpreparadastantoparapantallasgrandescomoparapantallaspequeas.Los
Fragmentspermitenalprogramadorejecutarvariasactividadesenunamismapantalla.Deesta
manera,silapantallaesgrande(obiensilapantallaestenmodoapaisado),sepuedenmostrarvarias
actividades,quedeotramaneraseiranmostrandounaauna.Eltpicoejemploeseldeunalistapara
cuyositemssemuestraunapantallacondetalles.Podra,obienmostrarsecomounaactividadnuevaque
seabreysustituyealaanterior,obiencomootroFragmentalladodelaprimera.LosFragmentse
definenenXMLenloslayoutsyenellosseindicalarutadelaActivityquesecorrespondeconcada
Fragment.

Mens y preferencias
HayvariostiposdemensenAndroid:
los"iconmenu"queaparecenenlaparteinferiordelapantallacuandosepulsaelbotnfsicode
men
mensexpandidosqueaparecencuandoelusuariopulsaelbotn"ms"delinconmenu
lossubmensqueaparecenenformadeventanasflotantes,delasquesesaleconlateclafsica
"atrs"(o"cerrar")
losmenscontextualesqueseabrenalpulsarprolongadamentesobreuncomponente
UniconmensepuededefinirenunarchivoXML,porejemplo,enres/menu/menu.xml:
<?xmlversion="1.0"encoding="utf8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:title="Preferencias"android:id="@+id/item01"></item>
<itemandroid:title="Acercade..."android:id="@+id/item02"></item>
</menu>
Paraqueelmenseinflealpulsarelbotndebemossobrecargarlafuncin
onCreateOptionsMenu(Menum)denuestraactividad.Estafuncindeberdesplegarelmencon
lafuncingetMenuInflater().inflate(R.menu.menu,menu)ydevolvertrue:

@Override
publicbooleanonCreateOptionsMenu(Menum){

getMenuInflater().inflate(R.menu.menu,m);

returntrue;
}

Paraprogramarlasrespuestasalaspulsacionesdecadaopcindelmentenemosquesobrecargarel
mtodoonOptionsItemSelected():

@Override
publicbooleanonOptionsItemSelected(MenuItemitem){

switch(item.getItemId()){

caseR.id.item01:

break;

caseR.id.item02:

break;

returntrue;
}

Encuantoalosmenscontextuales,paracrearloshabrquesobrecargarlafuncin
onCreateContextMenu(ContextMenu)delcomponentecorrespondiente:

@Override
publicvoidonCreateContextMenu(ContextMenum){

super.onCreateContextMenu(m);

m.add("ContextMenuItem1");
}

Otraalternativaparalosmenscontextualesesregistrarelviewconelmtodo
registerForContextMenu(view),paraqueaselmencontextualparaesteviewsloest
disponibleenestaactividad,ynoencualquieractividadenlaqueseincluyaelview.

Visor de Google Maps


HaydosformasdeutilizarelserviciodeGoogleMaps.UnaeslanzandounnuevoIntentparaqueseabra
unaactividadapartedelaaplicacin.Apesardeabrirunanuevaaplicacinelefectoesigualqueelde
abrirotrapantalladelaaplicacin.Alpulsarelbotn"atrs",secerrarlaaplicacinGoogleMapsy
volveralaltimaactividad,ladelaaplicacinqueestabaenejecucin.
LaotraformaesabrirunaactividadquecontengadentrounvisordeGoogleMaps.Paraelloprimerohay
http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

7/8

10/12/2014

Interfazdeusuario

queaadirunvisordeGoogleMapsallayoutdelaactividad,porejemplo,main.xml.Paracontarcon
esecomponentenecesitamosquelaplataformaparalaquesedesarrollenuestroproyectosea"Google
API",seadelnivelquesea.
ParausarelMapViewdesdenuestraaplicacinnecesitamosobtenerunaclaveparalaAPIdeGoogle
Maps.stasegeneraapartirdelahuelladigitalMD5delcertificadodigitalqueusamosparafirmar
nuestrasaplicaciones.Paraeldesarrollosersuficienteconqueutilicemoselcertificadodedebugquese
creaporelAndroidSDKparadesarrollar.Sinembargostenonosservirparaproduccin.Paragenerar
laclaveparalaAPIdebemosseguirlossiguientespasos:
GenerarunahuelladigitalMD5paraelcertificadodedebug.Encuntraloenunficherollamado
debug.keystore,cuyarutaestindicadaenEclipseenlaspreferenciasdeAndroidBuild.Desdeel
directorioindicadoenlaruta,ejecutamos:
keytoollistkeystoredebug.keystore
Entramosenhttp://code.google.com/android/addons/googleapis/mapsapisignup.html y
rellenamoselformulario.ParaellotenemosqueautenticarnosconnuestracuentadeGoogle.Esah
dondepegaremosnuestrahuelladigital.FinalmentenosmuestralaclavedelaAPI,lacopiamosy
noslaguardamos.
Msinformacinenhttp://code.google.com/android/addons/googleapis/mapkey.html
EnladeclaracindelcomponenteMapViewdellayorintroduciremoslaclaveparalaAPIquehemos
obtenido.TambinsedebeaadiralAndroidManifest.xmlquelaaplicacinusalalibrerade
googlemaps,yquerequierepermisosparaInternet.
EnelmtodoonCreate()delaactividadsedebeobtenerlareferenciaalmapaycrearuncontrolador
MapControllerapartirdelMapViewparapodermoverlo.Desdeahsepuedecontrolarelmapa,por
ejemplo,hacerzoom.

LastPublished:01/26/201411:34:14
Copyright2014Depto.CCIA

http://www.jtech.ua.es/cursos/apuntes/moviles/daa2013/sesion02apuntes.html

8/8