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>

1.1 24/04/13

Actividades 2

Temario● 4.1 Introducción a Android ● 4.2 Introducción Desarrollo con Android

● 4.3 Ejemplo Desarrollo y Depuración ● 4.4 Actividades● 4.5 Interfaces de Usuario

● 4.6 Intenciones● 4.7 Acceso a Datos● 4.8 Preferencias● 4.9 Hebras e internacionalización

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

● 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 en Botones● Aprender a crear menús

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: componentes “contenedor”, 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• MATCH_PARENT (tan grande como el padre menos padding)• WRAP_CONTENT (tan grande como el contenido más padding)

Interfaces de Usuario 10

Programar interfaces

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

nos proporciona layouts y componentes estáticos

– De forma programática: en Java, podemos crear la interfaz de forma dinámica

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

Interfaces de Usuario 11

Programático vs Declarativo

strings.xml

layout.xml

Interfaces de Usuario 12

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 13

Declaración layout XML res/layout/miFichero.xml

Interfaces de Usuario 14

¿Qué es un layout XML?

● Es un fichero XML que describe el árbol de componentes (View y ViewGroup) que representan una pantalla

● Las propiedades de los elementos XML se llaman propiedades, y describen su aspecto o comportamiento. Ej. android:text=”hola”

● Los atributos también pueden fijarse con métodos en Java (ej. setText).

Interfaces de Usuario 15

Atributos comunes de Viewy ViewGroup

orientation Orientación. Valores: horizontal, vertical

layout_width Ancho. Valor posible: exacto en dp (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 16

Medidas● Pixels (px): pixels de la pantalla

● Tamaño físico de la pantalla: pulgadas (in), milímetros (mm) o puntos (pt), 1/72 de una pulgada

● Density Independent Pixels (dp): unidad abstracta basada en la densidad física de la pantalla, relativo a pantalla de 160 dpi.

● Scale Independent Pixel (sp): como dp pero escalado a las preferencias de letras (font) del usuario, recomendado para tamaños de letra

● Conclusión: para que sea adaptable a múltiples dispositivos, intentar usar siempre dp/sp.

Interfaces de Usuario 17

gravity vs layout_gravity

Interfaces de Usuario 18

Usando objetos View

● Dar valores a atributos (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 19

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 20

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

FrameLayoutScrollView

Interfaces de Usuario 21

LinearLayout

http://developer.android.com/guide/topics/ui/layout/linear.html

Interfaces de Usuario 22

RelativeLayout

http://developer.android.com/guide/topics/ui/layout/relative.html

Interfaces de Usuario 23

ListView

● Android usa Adaptadores (Adapter) para pasar datos a las listas (ListView,Spinner)

● La interfaz Adapter está implementada por BaseAdapter y tiene dos subclases principales– ArrayAdapter: datos en un array o un List– SimpleCursorAdapter: datos en base de

datos o ContentProvider

Intenciones y Servicios 24

Crear Lista Opciones

ListView para ver una lista@android:id/list →

identificador de Android para listas

@android:id/empty → id si la lista está vacía

Intenciones y Servicios 25

Crear Lista opciones

ListActivity en vez de Activity

Fuente de datos

Adaptador de lista,

simple_list_item_1 está predefinido, puedo definir un

layout R.layout.row p.ej.

Listener de la selección

Intenciones y Servicios 26

¡Lanzamos!

Interfaces de Usuario 27

Algunas vistas (widgets)

Interfaces de Usuario 28

TextView

Métodos getText() / setText()

Interfaces de Usuario 29

EditText

http://developer.android.com/guide/topics/ui/controls/text.html

Valores comunes para inputType: “textEmailAddress”, “textUri”,

“number”, “phone”, “textCapSentences”,

“textCapWords”, “textAutoCorrect”, “textPassword”, “textMultiline”

Métodos getText() / setText()

Interfaces de Usuario 30

AnalogClock, DigitalClock

Interfaces de Usuario 31

Button

Interfaces de Usuario 32

Spinner

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

http://developer.android.com/guide/topics/ui/controls/spinner.html

Usamos un adaptador tipo Array

Interfaces de Usuario 33

RadioGroup/RadioButton

Interfaces de Usuario 34

ToggleButton

http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Interfaces de Usuario 35

DatePickerDialog, TimePickerDialog

Disponible en Android 3.0

http://developer.android.com/guide/topics/ui/controls/pickers.html

Interfaces de Usuario 36

Imágenes

Interfaces de Usuario 37

ProgressBar

Interfaces de Usuario 38

Muchas más

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

Interfaces de Usuario 39

Botón con más detalle

● Button es una subclase de TextView ● Un botón tiene texto, un icono o ambos y

comunica qué acción se produce al pulsarlo●Tenemos botones de texto (Button), con

imagen (ImageButton)

http://developer.android.com/guide/topics/ui/controls/button.html

Interfaces de Usuario 40

Respondiendo a eventos

● ¿Cómo asignamos la conducta al botón?– En el xml del layout android:onClick=”método”

(visto en SobreTeleco)– En Java, implementando la interfaz

onClickListener• De forma anónima o no

Interfaces de Usuario 41

Implementación anónima de la interfaz

Interfaces de Usuario 42

Java – implementación de interfaz

Interfaces de Usuario 43

¿Qué opción es mejor?● Definir android:onClick

– Mayor acoplamiento entre parte Java y XML– Bueno si hay personas diferentes para hacer la interfaz

(XML) y la lógica (Java)

● Definir la interfaz o hacerla anónima– Al implementar onClick(), un único método onClick() para

toda la actividad – si queremos distinguir, deberíamos mirar el id (v.getId() si queremos distinguir según dónde hayas pinchado). Bueno si queremos la misma conducta pinches donde pinches.

– Implementarla anónima, generalmente la mejor opción, permite separar conducta por elemento

Interfaces de Usuario 44

Widgets básicos: ImageView / ImageButton

●Subclases de TextView y Button, respectivamente

● Permiten incluir imágenes (sin nada o con botón)

● La imagen debe ser un recurso (en res/drawable)

●se define en los atributos android:src (foreground) y/o android:background

http://developer.android.com/reference/android/widget/ImageView.html

Interfaces de Usuario 45

Toast

● Proporciona un mensaje instantáneo● Podemos personalizar el layout en xml

http://developer.android.com/guide/topics/ui/notifiers/toasts.html

Interfaces de Usuario 46

Menús

● Android tiene varios tipos de menús:– Menú de opciones y barra de acciones, que

aparece al pulsar menú– Menú contextual que aparece cuando el

usuario pulsa un rato en un elemento– Menú desplegable modal

http://developer.android.com/guide/topics/ui/menus.html

Interfaces de Usuario 47

Menú de opciones

● Tenemos que crear un recurso menu en res/menu en XML (se podría crear en Java)

● La actividad debe implementar:– onCreateOptionsMenu()

• para leer, “insuflar” el fichero XML

– onOptionsItemsSelected() • Para procesar qué botón se ha pulsado y hacer la

acción correspondiente

Interfaces de Usuario 48

Ejemplo menú

res/menu/game_menu.xml

Lo muestra en la barra de acciones si hay espacio (actionBar)

Podemos agrupar items en grupos

(group)

Interfaces de Usuario 49

Eclipse

● En Eclipse podemos crear recursos con New->Android XML File

Interfaces de Usuario 50

Ejemplo Calculadora

Versión targetSDK < 11 (Android 3.0)

Interfaces de Usuario 51

Ejemplo Calculadora Versión targetSDK >=

11 (Android 3.0)

Añadidos al actionBarandroid:showAsAction

="ifRoom"

Sin añadirlos al actionBar, hay que pulsar tecla menú

Interfaces de Usuario 52

Fragmentos

● Desde la versión Android 3.0 (API 11), se soportan “fragmentos” para compatibilidad con tabletas

● El layout se compone de fragmentos

http://developer.android.com/guide/components/fragments.html

Interfaces de Usuario 53

SupportLibrary

● Podemos programar 'con las nuevas APIs' añadiendo un jar (support.jar) para que no nos afecte durante el desarrollo

http://developer.android.com/tools/extras/support-library.html

Interfaces de Usuario 54

Resumen● En este tema hemos revisado los principios de las

interfaces gráficas (UI) en Android

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

● View y ViewGroup tienen atributos que pueden ser configurados

● Hemos visto algunos widgets y layouts disponibles

● ListView permite presentar listas a partir de Adaptadores

Interfaces de Usuario 55

¿Preguntas?