Análisis y Diseño de Software

Departamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.es

Interfaces de UsuarioLayouts y Vistas

Carlos A. Iglesias <cif@gsi.dit.upm.es>

Interfaces de Usuario 2

Temario● 4.1 Introducción a Android [Gar10, cap1-2 ]● 4.2 Desarrollo con Android [Gar10, cap3-5]● 4.3 Interfaces de Usuario [Gar10, cap6]

– 4.3.1 Ejemplo SobreTeleco– 4.3.2 Layouts y Views– 4.3.3 Widgets y Trazas. Interfaz del proyecto Yamba– 4.3.4 Hebras e Internacionalización. Interfaz Yamba

● 4.4 Intenciones y Servicios [Gar10, cap7-8]

● 4.5 Acceso a Datos [Gar10, cap9]

Interfaces de Usuario 3

Teoría

Ejercicio práctico en el ordenador

Ampliación de conocimientos

Lectura / Vídeo / Podcast

Práctica libre / Experimentación

Leyenda

Interfaces de Usuario 4

Bibliografía

● Libro de texto: – [Gar10] Learning Android, Marko Gargenta,

O'Reilly, 2010. Disponible en http://ofps.oreilly.com/titles/9781449390501/

– Capítulo 6

– http://www.youtube.com/watch?v=SW82-YOOMIs

● Android Developers– http://developer.android.com/guide/topics/fundamentals.html

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

Interfaces de Usuario 5

Bibliografía complementaria● Tutorial Android UI

– http://mobile.tutsplus.com/series/android-user-interface-design/

– http://developer.android.com/resources/tutorials/views/index.html

– http://www.droiddraw.org/widgetguide.html

– Notas de Victor Matos, basadas en The Busy Coder's Guide to Android Development, M. L. Murphy, CommonsWare, 2009.

● Vistas

– http://developer.android.com/reference/android/view/View.html

●Ejemplos

– http://apcmag.com/building-a-simple-android-app.htm

– http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/

Interfaces de Usuario 6

Objetivos

● Aprender a programar interfaces

● Entender cómo crear interfaces en Android

● Entender y saber usar Vistas (View) y Disposiciones (Layout)

● Aprender a gestionar eventos

Interfaces de Usuario 7

La interfaz● En Android, la interfaz es

un árbol de objetos de dos tipos:– Objetos View:

componentes “widget” (campo de texto, botón, imagen, …)

– Objetos ViewGroup: clase base para los layout (lineal, tabular, etc.)

Interfaces de Usuario 8

La clase View● La clase View es el componente básico para construir Uis

● Una Vista ocupa un área rectangular de la pantalla y es responsable de dibujarse y gestionar eventos

● View es la clase base de los widgets interactivos (botones, campos de texto, …)

● La clase ViewGroup es una subclase de View que es la base para los layouts, que son contenedores invisibles que contienen otros objetos View (o ViewGroup) y definen sus propiedades.

Interfaces de Usuario 9

Visualización actividad

● Cuando una actividad llama a setContentView, le pasa el nodo raíz del árbol

● Android lo recibe, y pinta este árbol– Pide a cada ViewGroup que “se pinte”– Cada hijo calcula su medida (ancho/alto) y posición. El

nodo padre puede imponer medidas– La medida puede ser

• Un número exacto• FILL_PARENT (tan grande como el padre menos padding)• WRAP_CONTENT (tan grande como el contenido más

padding)

Interfaces de Usuario 10

Atributos comunes de Viewy ViewGroup

orientation Orientación. Valores: horizontal, vertical

layout_width Ancho. Valor posible: exacto en dip (device independent pixels), fill_parent, wrap_content

layout_height Alto. Valor posible: exacto, fill_parent, wrap_content

layout_marginX Espacio alrededor de la vista X = Top, Bottom, Left, Right, ej. layout_marginTop)

layout_gravity Cómo las vistas hijas se posicionan. Valores: top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal, start, end

layout_weight Proporción del espacio disponible usado para la vista (valores: 1, 2, 3,..). Ej. 3 Vistas con peso 1, 1, 2, ocuparían 1/5, 1/5, 2/5 del total

layout_x Coordenada x de la vista

layout_y Coordenada y de la vista

gravity Cómo se posiciona el contenido del widget respecto del mismo (mismos valores que layout_gravity)

id Identificador del widget. Convenio @+id/nombre (+ → Crear id en R)

text Texto del widget. Convenio: @string/nombre (referencia values/strings.xml)

Interfaces de Usuario 11

Nota: gravity vs layout_gravity

Interfaces de Usuario 12

Usando objetos View● Dar valores a propiedades (p.ej. Al texto de un TextView,

o...). Las propiedades con valores conocidos durante el desarrollo se pueden fijar en ficheros XML de layout

● Fijar el foco. Pasar el foco a una vista con requestFocus()

● Fijar 'listeners'. Registrar listeners que serán notificados de cambios. P. ej. un botón expone un listener para notificar a los clientes cuándo ha sido pulsado.

● Fijar visibilidad. Puedes ocultar/descubrir vistas con setVisibility(int)

http://developer.android.com/reference/android/view/View.html

Interfaces de Usuario 13

Programar el layout

● Podemos hacerlo:– De forma declarativa: en XML (layout.xml),

nos proporciona layouts estáticos– De forma programática: en Java, podemos

crear layouts de forma dinámica

● Es más sencillo, más reutilizable y más sencillo de mantener el enfoque declarativo

Interfaces de Usuario 14

Programático vs Declarativo

strings.xml

layout.xml

Interfaces de Usuario 15

Layouts predefinidos

● FrameLayout: pinta todas las vistas en la esquina superior izda

● LinearLayout: pinta las vistas de izda a derecha (o arriba-abajo, según el atributo orientation)

● TableLayout: pinta las vistas en filas y columnas

● RelativeLayout: permite indicar posición relativa al la vista padre o a otra vista

Interfaces de Usuario 16

Algunos Layouts (ViewGroup)http://developer.android.com/resources/tutorials/views/index.html

FrameLayout

Interfaces de Usuario 17

Algunas vistas (widgets)

Interfaces de Usuario 18

TextView

Interfaces de Usuario 19

EditText

http://www.droiddraw.org/widgetguide.html

android:inputType=”phone”

Interfaces de Usuario 20

AnalogClock, DigitalClock

Interfaces de Usuario 21

Button

Interfaces de Usuario 22

Spinner

http://developer.android.com/resources/tutorials/views/hello-spinner.html

Interfaces de Usuario 23

RadioGroup/RadioButton

Interfaces de Usuario 24

DatePicker, TimePicker

Interfaces de Usuario 25

Imágenes

Interfaces de Usuario 26

ProgressBar

Interfaces de Usuario 27

Muchas más

● Consulta en:●http://developer.android.com/reference/android/widget/package-summary.html

Interfaces de Usuario 28

Relación XML y Java

● En XML declaramos un id

– android:id="@+id/imageViewEtsit"

● En Java accedemos a un widget con findViewById– ImageView foto = (ImageView) findViewById(R.id.imageViewEtsit);

● Como vimos, la clase R se genera a partir del layout XML, y en la la clase Java de la actividad decíamos qué layout se usaba con setContentView(R.layout.main)

Interfaces de Usuario 29

Resumen

● En este tema hemos revisado los principios de los layouts en Android

● Hemos conocido la diferencia entre View y ViewGroup, y los principales atributos

● Hemos visto algunos widgets disponibles

● Hemos revisado la relación entre XML y Java en las interfaces

Interfaces de Usuario 30

¿Preguntas?