List view y UI en Android

Post on 13-Jun-2015

1.221 views 2 download

Transcript of List view y UI en Android

ListView y UI en Android

Byron Ajin

Recursos

• https://github.com/byronap120/ListViewDemo1• https://github.com/byronap120/ListViewDemo2

Que es UI?

En Android el UI (User Interface ) es todo lo que el usuario puede ver y todo con lo que puede interactuar. Android ofrece una variedad de componentes de interfaz de usuario pre-construidos , tales como objetos de diseño estructurados y controles de interfaz de usuario que le permiten construir la interfaz gráfica de usuario para la aplicación

Vistas• Todos los elementos de la interfaz de usuario en una aplicación para

Android se construyen utilizando Vista y objetos ViewGroup

XML

• Para declarar su diseño, puede crear instancias de objetos de vista en el código y empezar a construir un árbol. pero la manera más fácil y efectiva para definir el diseño es con un archivo XML.

• XML ofrece una estructura legible para el diseño, similar al HTML.

XML

Layouts

Un Layout define la estructura visual de la interfaz de usuario de una actividad. Se pueden crear de dos maneras:

-Declarar los elementos de UI en el xml-Instanciar los elementos en codigo en tiempo de ejecución.

Layouts mas comunes• Cada subclase de la clase ViewGroup ofrece una manera única de mostrar

los elementos de una vista anidada en su interior.

Layouts con Adaptadores

Cuando el contenido de los layouts es dinámico y no es predeterminado, se pude utilizar un adaptador para poblar los layouts en tiempo de ejecución

Adaptador

• El adaptador se comporta como un intermediario entre la fuente de datos y el esquema de un View. El adaptador retiene los datos (a partir de una fuente tal como una vector o una consulta de base de datos) y convierte cada entrada en una vista que se puede agregar en el diseño AdapterView .

Referencias Layouts y UI

• http://developer.android.com/guide/topics/ui/declaring-layout.html

• http://developer.android.com/guide/topics/ui/index.html

Creando un ListView

Demo1

Ubicamos el Layout

Insertamos un ListView

Nos cambiamos al modo texto

Editamos el id del ListView

Ubicamos el MainActivity

Código para ListView

Creamos los datos

Referenciamos el ListView

Creamos el Adapater por defecto

Ejecutamos el Codigo

Posibles ProblemasEn Android Studio podemos ver que algo esta mal en nuestro codigo cuando algo aparece marcado de color rojo

En este caso lo podemos solucionar de 2 maneras 1) Nos colocamos sobre la palabra y presionamos alt+enter(solo funciona en

AndroidStudio) y no saldrá el error.2) En este caso el erro es porque aun no hemos importado las librerias así que al hacer el paso 1 lo hará automáticamente, pero nosotros las podemos importar manualmente:

Personalizando el ListView

Demo2

Nueva Vista para las filas

Poner nombre al .xml

En mi caso le puse el nombre de: filas_lista

Creamos el nuevo Layout

Modificamos nuestro MainActivity

Creamos nuestro propio adaptador

Modificamos el metodo getView

¿Preguntas?

¡Gracias por su atención!