tema 4 3_2_interfaces_de_usuario
DESCRIPTION
Tema 4.3.2 Interfaces de Usuario. Layouts.TRANSCRIPT
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 <[email protected]>
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?