Interfaz de Usuario Android

7/25/2019 Interfaz de Usuario Android

1/17

INTERFAZ DE USUARIO ANDROID LAYOUTS:

Son elementos no visuales destinados a controlar la distribucin, posicin ydimensiones de los controles que se insertan en su interior. Estos componentesextienden a la clase base ViewGroup, como muchos otros componentescontenedores, es decir, capaces de contener a otros controles. A continuacin sedescribe los Layouts ms utili!ados en Android.

". FrameLayout.#ste es el ms simple de todos los layouts de Android. $n %rameLayout coloca todossus controles hi&os alineados con su esquina superior i!quierda, de 'orma que cadacontrol quedar oculto por el control si(uiente. )or ello, suele utili!arse paramostrar un *nico control en su interior, a modo de contenedor +placeholdersencillo.Los componentes incluidos en un %rameLayout podrn establecer sus propiedadesandroid:layout_widt y android:layout_ei!t, que podrn tomar los valores-matchparent/ o -wrapcontent/.

E&emplo0

"12345678"9""

:%rameLayout xmlns0android;=res=android< android0layoutwidth;


2/17

Al i(ual que en un %rameLayout, los elementos contenidos en un LinearLayout

pueden establecer sus propiedades android:layout_widt y

android:layout_ei!tpara determinar sus dimensiones dentro del layout.

"12345678"9"""1"2"3"4

:LinearLayout xmlns0android;=res=android< android0layoutwidth;


3/17

2. Ta"leLayout

$n @ableLayout permite distribuir sus elementos hi&os de 'orma tabular, deniendo

las las y columnas necesarias, y la posicin de cada componente dentro de la

tabla.

La estructura de la tabla se dene de 'orma similar a como se hace en J@KL, es

decir, indicando las las que compondrn la tabla +ob&etos @ableow, y dentro de

cada la las columnas necesarias, con la salvedad de que no existe nin(*n ob&eto

especial para denir una columna sino que directamente insertaremos los controles

necesarios dentro del @ableow y cada componente insertado corresponder a una

columna de la tabla. He esta 'orma, el n*mero nal de las de la tabla se

corresponder con el n*mero de elementos @ableow insertados, y el n*mero total

de columnas quedar determinado por el n*mero de componentes de la la que

ms componentes conten(a.

)or norma (eneral, el ancho de cada columna se corresponder con el ancho del

mayor componente de dicha columna, pero existen una serie de propiedades que

nos ayudarn a modicar este comportamiento0

android:#tret$%olumn#.Mndicar las columnas que pueden expandir para

absorver el espacio libre de&ado por las dems columnas a la derecha de la

pantalla.

android:#rin&%olumn#. Mndicar las columnas que se pueden contraer

para de&ar espacio al resto de columnas que se puedan salir por la derecha de

la palntalla.

android:$olla'#e%olumn#. Mndicar las columnas de la tabla que se

quieren ocultar completamente.


4/17

Ntra caracterIstica importante es la posibilidad de que una celda

determinada pueda ocupar el espacio de varias columnas de la tabla

+anlo(o al atributo colspan de J@KL. Esto se indicar mediante la

propiedad android0layoutspan del componente concreto que deber tomardicho espacio.

"12345678

"9"""1"2"3"4"

5"6"7"8191"11

12

:@ableLayout xmlns0android;=res=android< android0layoutwidth;


5/17

3. (ridLayout

GridView es un ViewGroup que muestra elementos de una, re&illa despla!able de

dos dimensiones. Los elementos de la cuadrIcula se insertan automticamente altra!ado utili!ando un ListAdapter. )ara una introduccin a cmo se puede insertar

de 'orma dinmica vistas utili!ando un adaptador.

4. Relati)eLayout

Este layout permite especicar la posicin de cada elemento de 'orma relativa a su

elemento padre o a cualquier otro elemento incluido en el propio layout. He esta

'orma, al incluir un nuevo elemento O podremos indicar por e&emplo que debe

colocarse debajo del elemento Yya lineado a la derecha del layout padre.


6/17

"12345678"9"""1"2"3"4"5

:elativeLayout xmlns0android;=res=android< android0layoutwidth;


7/17

android0layoutali(ni(ht

android0layoutali(n@op

android0layoutali(nottom

android0layoutali(naseline

)osicin relativa al layout padre0

android0layoutali(n)arentLe't

android0layoutali(n)arenti(ht

android0layoutali(n)arent@op

android0layoutali(n)arentottom

android0layoutcenterJori!ontal

android0layoutcenterVertical

android0layoutcenterMn)arent

*ID(ETS

Los wid(ets son una parte esencial de la personali!acin de la pantalla de inicio.

)uedes ima(inarlos como vistas -de un vista!o/ de los datos ms importantes de tu

app y que es 'undamental que sea accesible desde la pantalla de inicio del usuario.

%ONTROLES DE ENTRADA

Los controles de entrada son los componentes interactivos de la inter'a! de usuario

de su aplicacin. Android o'rece una amplia variedad de controles que puede utili!ar


8/17

en la inter'a! de usuario, como botones, campos de texto, buscar bares, casillas de

vericacin, botones de !oom, botones de conmutacin, y muchos ms.

%ommon %ontrol#.+ Dontroles comunes que se pueden utili!ar

,. TE-TIE*

$n @extView muestra de texto para el usuario y opcionalmente les permite editarlo.

$n @extView es un editor de texto completo, sin embar(o, la clase bsica est

con(urado para no permitir la edicin.

1. LAR(E/ 0EDIU0/ S0ALL TE-T

Son textos estticos de la subclase de @extView que posibilita editar un atributo que

dene el tamaQo de la 'uente. Su propsito es in'ormar o (uiar el recorrido en la

aplicacin. Su equivalente OKL es el componente :@extView?

1. 2UTTON


9/17

$n botn consiste en texto o un icono +o texto y un icono que comunica lo que se

produce la accin cuando el usuario toca.

En 'uncin de si desea un botn con el texto, un icono, o ambos, puede crear el

botn en su diseQo de tres maneras0

o Don el texto, usando el utton la clase0

:utton

android0layoutwidth ;


10/17

Las DJEDRNOES permiten al usuario seleccionar una o ms opciones de uncon&unto. )or lo (eneral, usted debe presentar cada opcin casilla en una listavertical.

)ara crear cada opcin casilla, crear un Dhec>ox en su diseQo. Hebido a una seriede opciones de casilla de vericacin permite al usuario seleccionar varioselementos, cada casilla se (estiona por separado y debe re(istrar un clic deescucha para cada uno.

6. TO((LE 2UTTONS

$n @o((le uttons permite al usuario cambiar un a&uste entre dos estados. Se puede

a(re(ar un botn bsica de palanca a su disposicin con el @o((leutton ob&eto.Android 3.9 +nivel de A)M "3 introduce otro tipo de botn de activacin llama unS*IT%4 que proporciona un control desli!ante, que puede a(re(ar con uninterruptor de ob&eto.Si necesita cambiar el estado de un botn usted mismo, usted puede utili!ar losDompoundutton.setDhec>ed + o Dompoundutton.to((le + mtodos.

7. S7INNERS

Spinners proporcionan una manera rpida para seleccionar un valor de un con&unto.En el estado por de'ecto, una ruleta muestra su valor seleccionado. Al tocar elspinner muestra un men* desple(able con todos los valores disponibles, de lascuales el usuario puede seleccionar uno nuevo

$sted puede a(re(ar un control de (iro a su diseQo con la Spinnerob&eto. )or

re(la (eneral deber hacerlo en su diseQo de OKL con

un :Spinner?elemento. )or e&emplo0

:Spinner

android0id ;


11/17

android0layoutwidth ;


12/17

new@hread+newunnable+U publicvoidrun+U while+m)ro(ressStatus :"99U m)ro(ressStatus ;door>+T

== $pdate the pro(ress bar mJandler.post+newunnable+U publicvoidrun+U m)ro(ress.set)ro(ress+m)ro(ressStatusT W WT W W W.start+T W

W

Ntros estilos de barra de pro(reso que o'rece el sistema son0o id(et.)ro(ressar.Jori!ontalo id(et.)ro(ressar.Smallo id(et.)ro(ressar.Lar(eo id(et.)ro(ressar.Mnverseo id(et.)ro(ressar.Small.Mnverseo id(et.)ro(ressar.Lar(e.Mnverse

,,.RATIN(2AR

$n atin(ar es una extensin de See>ar y )ro(ressar que muestra unaclasicacin de estrellas. El usuario puede tocar = arrastre o utili!ar las teclas deXecha para a&ustar la calicacin cuando se utili!a el atin(ar tamaQopredeterminado. El estilo ms pequeQo atin(ar +ratin(arStyleSmall y el estilodel indicador slo ms (rande +ratin(arStyleMndicator no son compatibles con lainteraccin del usuario y slo deben utili!arse como indicadores.Duando se utili!a un atin(ar que soporta la interaccin del usuario, la colocacinde wid(ets a la i!quierda o a la derecha del atin(ar se desanime.

,.SEE52AR$n See>ar es una extensin de )ro(ressar que aQade un pul(ar pueda arrastrar.El usuario puede tocar el pul(ar y arrastre hacia la i!quierda o la derecha paraa&ustar el nivel de pro(reso actual o utilice las teclas de Xecha. La colocacin de los

wid(ets en'ocables a la i!quierda oa la derecha de un See>ar no se recomienda.Dlientes del See>ar puede ad&untar una See>ar.NnSee>arDhan(eListener paraser noticados de las acciones del usuario

"2. *E2IE*$na visin que muestra las p(inas web. Esta clase es la base sobre la que sepuede rodar su propio nave(ador web o simplemente mostrar al(unos contenidosen lInea dentro de su actividad. $tili!a el motor de renderi!ado ebRit para mostrarlas p(inas web e incluye mtodos para nave(ar hacia adelante y hacia atrs atravs de una historia, acercar y ale&ar, reali!ar b*squedas de texto y ms. @en(a encuenta que, para que su actividad para acceder a las p(inas web de Mnternet y decar(a en un ebView, debe a(re(ar los permisos de Mnternet a su archivo deAndroid Kaniesto0

:usesYpermission android0name;


13/17

TE-T FIELDS

$n campo de texto le permite al usuario escribir texto en su aplicacin. )uede seruna sola lInea o de varias lIneas. Si toca un campo de texto coloca el cursor ymuestra automticamente el teclado. Adems de escribir, los campos de textopermiten una variedad de otras actividades, como la seleccin de texto +cortar,copiar, pe(ar y datos de consulta a travs de autoYreali!acin.Entre los text leds que podemos encontrar estn0 7lain Te;t/ 7er#on Name/7a##word/ 7a##word puede mostrar la 'echa y = o hora actual como una cadena con 'ormato.Este punto de vista hace honor a la con(uracin del sistema de 'ormato de 13horas. Domo tal, es posible y recomendable para proporcionar dos patrones de'ormato di'erentes0 uno para mostrar la 'echa = hora en el modo de 13 horas y unopara mostrar la 'echa = hora en el modo de "1 horas. La mayorIa de las personasque llaman se quieren utili!ar los valores por de'ecto, sin embar(o, que serapropiado para la con(uracin re(ional del usuario.Es posible determinar si el sistema est actualmente en modo de 13Yhorasllamando is13JourKodeEnabled +.

1. ANALO(%LO%5Este wid(et de mostrar un relo& anal(ico con dos manos de horas y minutos.

2. DI(ITAL%LO%5Li>e Analo(Dloc>, but di(ital. Shows seconds

3. %4RONO0ETERDlase que implementa un contador de tiempo simple.

)uede darle una hora de inicio en la base de tiempo elapsedealtime +, y quecuenta a partir de eso, o si no se le da un tiempo de base, se utili!ar el tiempo enel que se llama a start +. )or de'ecto se mostrar el valor actual del tempori!adoren la 'orma


14/17

Aunque Hialo(%ra(ment 'ue introducido primero en la plata'orma de Android 2.9+nivel de A)M "", si su aplicacin es compatible con las versiones de Android tienenms de 2,9, incluso tan ba&as como Android ".5 puede utili!ar el Hialo(%ra(mentclase que est disponible en la biblioteca de soporte para la compatibilidad conversiones anteriores .

Cota0 Los e&emplos de cdi(o si(uientes muestran cmo crear cuadros de dilo(opara un selector de tiempo y selector de 'echa utili!ando las bibliotecas de soporteA)M para Hialo(%ra(ment. Si de su aplicacin minSd>Version es "" o superior, en sulu(ar puede utili!ar la versin de la plata'orma de Hialo(%ra(ment.Dreacin de un Selector de @iempo)ara mostrar una @ime)ic>erHialo( usando Hialo(%ra(ment, es necesario denir unaclase 'ra(mento que se extiende Hialo(%ra(ment y devolver una @ime)ic>erHialo(partir del 'ra(mento onDreateHialo( + mtodo.

Cota0 Si su aplicacin es compatible con las versiones de Android anteriores a 2.9,ase(*rese de que haya con(urado su proyecto Android con la biblioteca desoporte como se describe en Don(uracin de un proyecto para utili!ar unabiblioteca.

Extendiendo Hialo(%ra(ment para un selector de tiempo

)ara denir un Hialo(%ra(ment para un @ime)ic>erHialo(, usted debe0

Henir el onDreateHialo( + mtodo para devolver una instancia de@ime)ic>erHialo(Mmplementar el @ime)ic>erHialo(.Nn@imeSetListener inter'a! para recibir unadevolucin de llamada cuando el usuario establece el tiempo.Je aquI un e&emplo0

public static class @ime)ic>er%ra(ment extends Hialo(%ra(ment implements @ime)ic>erHialo(.Nn@imeSetListener U

Nverride public Hialo( onDreateHialo(+undle savedMnstanceState U == $se the current time as the de'ault values 'or the pic>er nal Dalendar c ; Dalendar.(etMnstance+T int hour ; c.(et+Dalendar.JN$N%HAZT int minute ; c.(et+Dalendar.KMC$@ET

== Dreate a new instance o' @ime)ic>erHialo( and return it return new @ime)ic>erHialo(+(etActivity+, this, hour, minute, Hate%ormat.is13Jour%ormat+(etActivity+T W

public void on@imeSet+@ime)ic>er view, int hourN'Hay, int minute U == Ho somethin( with the time chosen by the user WW


15/17

Ver el @ime)ic>erHialo( clase de in'ormacin sobre los ar(umentos del constructor.

Ahora todo lo que necesita es un evento que a(re(a una instancia de este'ra(mento de su actividad.

Kostrando el selector de tiempo

$na ve! que haya denido una Hialo(%ra(ment como la que se muestra ms arriba,se puede visuali!ar el selector de tiempo mediante la creacin de una instancia dela Hialo(%ra(ment y llamar a show +.

)or e&emplo, aquI hay un botn que, al hacer clic, llama a un mtodo para mostrarel cuadro de dilo(o0

:uttonandroid0layoutwidth ; erHialo( + View v U

Hialo(%ra(ment new%ra(ment ; new @ime)ic>er%ra(ment +Tnew%ra(ment . show + (etSupport%ra(mentKana(er +, er< T

WEste mtodo llama + muestra en una nueva instancia de la Hialo(%ra(ment denidoanteriormente. El show + mtodo requiere una instancia de %ra(mentKana(er y unnombre de etiqueta *nica para el 'ra(mento.

)recaucin0 Si su aplicacin es compatible con las versiones de Android in'eriores a2.9, ase(*rese de que usted llama (etSupport%ra(mentKana(er + para adquirir unainstancia de %ra(mentKana(er. @ambin ase(*rese de que su actividad quemuestra el selector de tiempo se extiende %ra(mentActivity lu(ar de la normaActividad clase.Dreacin de un Selector de %echaDrear un Hate)ic>erHialo( es como crear un @ime)ic>erHialo(. La *nica di'erenciaes el dilo(o que cree para el 'ra(mento.

)ara mostrar una Hate)ic>erHialo( usando Hialo(%ra(ment, es necesario denir unaclase 'ra(mento que se extiende Hialo(%ra(ment y devolver una Hate)ic>erHialo(partir del 'ra(mento onDreateHialo( + mtodo.

Cota0 Si su aplicacin es compatible con las versiones de Android anteriores a 2.9,ase(*rese de que haya con(urado su proyecto Android con la biblioteca desoporte como se describe en Don(uracin de un proyecto para utili!ar unabiblioteca.

Extendiendo Hialo(%ra(ment para un selector de 'echas

)ara denir un Hialo(%ra(ment para un Hate)ic>erHialo(, usted debe0

Henir el onDreateHialo( + mtodo para devolver una instancia deHate)ic>erHialo(Mmplementar el Hate)ic>erHialo(.NnHateSetListener inter'a! para recibir unadevolucin de llamada cuando el usuario establece la 'echa.


16/17

public static class Hate)ic>er%ra(ment extends Hialo(%ra(ment implements Hate)ic>erHialo(.NnHateSetListener U

Nverride

public Hialo( onDreateHialo(+undle savedMnstanceState U == $se the current date as the de'ault date in the pic>er nal Dalendar c ; Dalendar.(etMnstance+T int year ; c.(et+Dalendar.ZEAT int month ; c.(et+Dalendar.KNC@JT int day ; c.(et+Dalendar.HAZN%KNC@JT

== Dreate a new instance o' Hate)ic>erHialo( and return it return new Hate)ic>erHialo(+(etActivity+, this, year, month, dayT W

public void onHateSet+Hate)ic>er view, int year, int month, int day U == Ho somethin( with the date chosen by the user WW

Ver el Hate)ic>erHialo( clase de in'ormacin sobre los ar(umentos del constructor.

Ahora todo lo que necesita es un evento que a(re(a una instancia de este

'ra(mento de su actividad.

Kostrando el selector de 'echas

$na ve! que haya denido una Hialo(%ra(ment como la que se muestra ms arriba,se puede visuali!ar el selector de 'echa mediante la creacin de una instancia de laHialo(%ra(ment y llamar a show +.

)or e&emplo, aquI hay un botn que, al hacer clic, llama a un mtodo para mostrarel cuadro de dilo(o0

:utton

android0layoutwidth ; erHialo( + View v U

Hialo(%ra(ment new%ra(ment ; new Hate)ic>er%ra(ment +Tnew%ra(ment . show + (etSupport%ra(mentKana(er +, er< T

WEste mtodo llama + muestra en una nueva instancia de la Hialo(%ra(ment denidoanteriormente. El show + mtodo requiere una instancia de %ra(mentKana(er y unnombre de etiqueta *nica para el 'ra(mento.


17/17

http0==developer.android.com=intl=es=re'erence=android=wid(et=pac>a(eYsummary.html

http0==www.s(oliver.net=blo(=inter'a!YdeYusuarioYenYandroidYlayouts=
http://developer.android.com/intl/es/reference/android/widget/package-summary.htmlhttp://developer.android.com/intl/es/reference/android/widget/package-summary.htmlhttp://www.sgoliver.net/blog/interfaz-de-usuario-en-android-layouts/http://developer.android.com/intl/es/reference/android/widget/package-summary.htmlhttp://developer.android.com/intl/es/reference/android/widget/package-summary.htmlhttp://www.sgoliver.net/blog/interfaz-de-usuario-en-android-layouts/

Interfaz de Usuario Android

Documents

Transcript of Interfaz de Usuario Android