Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Análisis y Diseñode SoftwareDepartamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.esInterfaces de Usuari...
Actividades 2Temario● 4.1 Introducción a Android● 4.2 Introducción Desarrollo con Android● 4.3 Ejemplo Desarrollo y Depura...
Interfaces de Usuario 3TeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctic...
Interfaces de Usuario 4Bibliografía● Android Developers– http://developer.android.com/guide/topics/fundamentals.html– http...
Interfaces de Usuario 5Bibliografía complementaria●Tutorial Android UI– http://mobile.tutsplus.com/series/android-user-int...
Interfaces de Usuario 6Objetivos● Aprender a programar interfaces● Entender cómo crear interfaces en Android● Entender y s...
Interfaces de Usuario 7La interfaz●En Android, la interfaz es unárbol de objetos de dostipos:– Objetos View: componentes“w...
Interfaces de Usuario 8La clase View●La clase View es el componente básico para construir UIs●Una Vista ocupa un área rect...
Interfaces de Usuario 9Visualización actividad● Cuando una actividad llama a setContentView, le pasael nodo raíz del árbol...
Interfaces de Usuario 10Programar interfaces● Podemos hacerlo:– De forma declarativa: en XML (layout.xml),nos proporciona ...
Interfaces de Usuario 11Programático vs Declarativostrings.xmllayout.xml
Interfaces de Usuario 12Relación XML y Java● En XML declaramos un id– android:id="@+id/imageViewEtsit"● En Java accedemos ...
Interfaces de Usuario 13Declaración layout XMLres/layout/miFichero.xml
Interfaces de Usuario 14¿Qué es un layout XML?● Es un fichero XML que describe el árbol decomponentes (View y ViewGroup) q...
Interfaces de Usuario 15Atributos comunes de Viewy ViewGrouporientation Orientación. Valores: horizontal, verticallayout_w...
Interfaces de Usuario 16Medidas● Pixels (px): pixels de la pantalla● Tamaño físico de la pantalla: pulgadas (in), milímetr...
Interfaces de Usuario 17gravity vs layout_gravity
Interfaces de Usuario 18Usando objetos View● Dar valores a atributos (p.ej. Al texto de un TextView,o...). Las propiedades...
Interfaces de Usuario 19Layouts predefinidos● FrameLayout: pinta todas las vistas en laesquina superior izda● LinearLayout...
Interfaces de Usuario 20Algunos Layouts (ViewGroup)http://developer.android.com/resources/tutorials/views/index.htmlFrameL...
Interfaces de Usuario 21LinearLayouthttp://developer.android.com/guide/topics/ui/layout/linear.html
Interfaces de Usuario 22RelativeLayouthttp://developer.android.com/guide/topics/ui/layout/relative.html
Interfaces de Usuario 23ListView● Android usa Adaptadores (Adapter) parapasar datos a las listas (ListView,Spinner)● La in...
Intenciones y Servicios 24Crear Lista OpcionesListView para ver una lista@android:id/list →identificador de Androidpara li...
Intenciones y Servicios 25Crear Lista opcionesListActivity en vezde ActivityFuente de datosAdaptador delista,simple_list_i...
Intenciones y Servicios 26¡Lanzamos!
Interfaces de Usuario 27Algunas vistas (widgets)
Interfaces de Usuario 28TextViewMétodos getText() / setText()
Interfaces de Usuario 29EditTexthttp://developer.android.com/guide/topics/ui/controls/text.htmlValores comunes para inputT...
Interfaces de Usuario 30AnalogClock, DigitalClock
Interfaces de Usuario 31Button
Interfaces de Usuario 32Spinnerhttp://developer.android.com/resources/tutorials/views/hello-spinner.htmlhttp://developer.a...
Interfaces de Usuario 33RadioGroup/RadioButton
Interfaces de Usuario 34ToggleButtonhttp://developer.android.com/guide/topics/ui/controls/togglebutton.html
Interfaces de Usuario 35DatePickerDialog,TimePickerDialogDisponible en Android 3.0http://developer.android.com/guide/topic...
Interfaces de Usuario 36Imágenes
Interfaces de Usuario 37ProgressBar
Interfaces de Usuario 38Muchas más● Consulta en:●http://developer.android.com/reference/android/widget/package-summary.html
Interfaces de Usuario 39Botón con más detalle● Button es una subclase de TextView● Un botón tiene texto, un icono o ambos ...
Interfaces de Usuario 40Respondiendo a eventos● ¿Cómo asignamos la conducta al botón?– En el xml del layout android:onClic...
Interfaces de Usuario 41Implementación anónima dela interfaz
Interfaces de Usuario 42Java – implementación deinterfaz
Interfaces de Usuario 43¿Qué opción es mejor?● Definir android:onClick– Mayor acoplamiento entre parte Java y XML– Bueno s...
Interfaces de Usuario 44Widgets básicos:ImageView / ImageButton●Subclases de TextView y Button,respectivamente● Permiten i...
Interfaces de Usuario 45Toast● Proporciona un mensaje instantáneo● Podemos personalizar el layout en xmlhttp://developer.a...
Interfaces de Usuario 46Menús● Android tiene varios tipos de menús:– Menú de opciones y barra de acciones, queaparece al p...
Interfaces de Usuario 47Menú de opciones● Tenemos que crear un recurso menu enres/menu en XML (se podría crear en Java)● L...
Interfaces de Usuario 48Ejemplo menúres/menu/game_menu.xmlLo muestra en la barrade acciones si hayespacio (actionBar)Podem...
Interfaces de Usuario 49Eclipse● En Eclipse podemos crear recursos conNew->Android XML File
Interfaces de Usuario 50Ejemplo CalculadoraVersión targetSDK <11 (Android 3.0)
Interfaces de Usuario 51Ejemplo CalculadoraVersión targetSDK >=11 (Android 3.0)Añadidos al actionBarandroid:showAsAction="...
Interfaces de Usuario 52Fragmentos● Desde la versión Android 3.0 (API 11), sesoportan “fragmentos” para compatibilidadcon ...
Interfaces de Usuario 53SupportLibrary● Podemos programar con las nuevas APIsañadiendo un jar (support.jar) para que nonos...
Interfaces de Usuario 54Resumen● En este tema hemos revisado los principios de lasinterfaces gráficas (UI) en Android● Hem...
Interfaces de Usuario 55¿Preguntas?
Upcoming SlideShare
Loading in …5
×

Tema 4.5 interfaces

459 views

Published on

  • Be the first to comment

Tema 4.5 interfaces

  1. 1. Análisis y Diseñode SoftwareDepartamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.esInterfaces de UsuarioLayouts y VistasCarlos A. Iglesias <cif@gsi.dit.upm.es>1.1 24/04/13
  2. 2. Actividades 2Temario● 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
  3. 3. Interfaces de Usuario 3TeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctica libre / ExperimentaciónLeyenda
  4. 4. Interfaces de Usuario 4Bibliografía● Android Developers– http://developer.android.com/guide/topics/fundamentals.html– http://developer.android.com/guide/topics/ui/index.html
  5. 5. Interfaces de Usuario 5Bibliografí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 Coders 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/
  6. 6. Interfaces de Usuario 6Objetivos● Aprender a programar interfaces● Entender cómo crear interfaces en Android● Entender y saber usar Vistas (View) yDisposiciones (Layout)● Aprender a gestionar eventos en Botones● Aprender a crear menús
  7. 7. Interfaces de Usuario 7La interfaz●En Android, la interfaz es unárbol de objetos de dostipos:– Objetos View: componentes“widget” (campo de texto,botón, imagen, …)– Objetos ViewGroup:componentes “contenedor”,clase base para los layout(lineal, tabular, etc.)
  8. 8. Interfaces de Usuario 8La clase View●La clase View es el componente básico para construir UIs●Una Vista ocupa un área rectangular de la pantalla y esresponsable 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 labase para los layouts, que son contenedores invisibles quecontienen otros objetos View (o ViewGroup) y definen suspropiedades.
  9. 9. Interfaces de Usuario 9Visualización actividad● Cuando una actividad llama a setContentView, le pasael 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 nodopadre 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)
  10. 10. Interfaces de Usuario 10Programar interfaces● Podemos hacerlo:– De forma declarativa: en XML (layout.xml),nos proporciona layouts y componentesestáticos– De forma programática: en Java, podemoscrear la interfaz de forma dinámica● Es más sencillo, más reutilizable y mássencillo de mantener el enfoque declarativo
  11. 11. Interfaces de Usuario 11Programático vs Declarativostrings.xmllayout.xml
  12. 12. Interfaces de Usuario 12Relación XML y Java● En XML declaramos un id– android:id="@+id/imageViewEtsit"● En Java accedemos a un widget confindViewById– ImageView foto = (ImageView) findViewById(R.id.imageViewEtsit);● Como vimos, la clase R se genera a partirdel layout XML, y en la la clase Java de laactividad decíamos qué layout se usaba consetContentView(R.layout.main)
  13. 13. Interfaces de Usuario 13Declaración layout XMLres/layout/miFichero.xml
  14. 14. Interfaces de Usuario 14¿Qué es un layout XML?● Es un fichero XML que describe el árbol decomponentes (View y ViewGroup) querepresentan una pantalla● Las propiedades de los elementos XML sellaman propiedades, y describen suaspecto o comportamiento. Ej.android:text=”hola”● Los atributos también pueden fijarse conmétodos en Java (ej. setText).
  15. 15. Interfaces de Usuario 15Atributos comunes de Viewy ViewGrouporientation Orientación. Valores: horizontal, verticallayout_width Ancho. Valor posible: exacto en dp (device independent pixels), fill_parent,wrap_contentlayout_height Alto. Valor posible: exacto, fill_parent, wrap_contentlayout_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, endlayout_weight Proporción del espacio disponible usado para la vista (valores: 1, 2, 3,..). Ej. 3Vistas con peso 1, 1, 2, ocuparían 1/5, 1/5, 2/5 del totallayout_x Coordenada x de la vistalayout_y Coordenada y de la vistagravity Cómo se posiciona el contenido del widget respecto del mismo (mismosvalores 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)
  16. 16. Interfaces de Usuario 16Medidas● 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 abstractabasada en la densidad física de la pantalla, relativo apantalla de 160 dpi.● Scale Independent Pixel (sp): como dp pero escalado alas preferencias de letras (font) del usuario,recomendado para tamaños de letra● Conclusión: para que sea adaptable a múltiplesdispositivos, intentar usar siempre dp/sp.
  17. 17. Interfaces de Usuario 17gravity vs layout_gravity
  18. 18. Interfaces de Usuario 18Usando objetos View● Dar valores a atributos (p.ej. Al texto de un TextView,o...). Las propiedades con valores conocidos durante eldesarrollo se pueden fijar en ficheros XML de layout● Fijar el foco. Pasar el foco a una vista conrequestFocus()● Fijar listeners. Registrar listeners que seránnotificados de cambios. P. ej. un botón expone unlistener para notificar a los clientes cuándo ha sidopulsado.● Fijar visibilidad. Puedes ocultar/descubrir vistas consetVisibility(int)http://developer.android.com/reference/android/view/View.html
  19. 19. Interfaces de Usuario 19Layouts predefinidos● FrameLayout: pinta todas las vistas en laesquina superior izda● LinearLayout: pinta las vistas de izda aderecha (o arriba-abajo, según el atributoorientation)● TableLayout: pinta las vistas en filas ycolumnas● RelativeLayout: permite indicar posiciónrelativa al la vista padre o a otra vista
  20. 20. Interfaces de Usuario 20Algunos Layouts (ViewGroup)http://developer.android.com/resources/tutorials/views/index.htmlFrameLayoutScrollView
  21. 21. Interfaces de Usuario 21LinearLayouthttp://developer.android.com/guide/topics/ui/layout/linear.html
  22. 22. Interfaces de Usuario 22RelativeLayouthttp://developer.android.com/guide/topics/ui/layout/relative.html
  23. 23. Interfaces de Usuario 23ListView● Android usa Adaptadores (Adapter) parapasar datos a las listas (ListView,Spinner)● La interfaz Adapter está implementada porBaseAdapter y tiene dos subclasesprincipales– ArrayAdapter: datos en un array o un List– SimpleCursorAdapter: datos en base dedatos o ContentProvider
  24. 24. Intenciones y Servicios 24Crear Lista OpcionesListView para ver una lista@android:id/list →identificador de Androidpara listas@android:id/empty → id sila lista está vacía
  25. 25. Intenciones y Servicios 25Crear Lista opcionesListActivity en vezde ActivityFuente de datosAdaptador delista,simple_list_item_1está predefinido,puedo definir unlayoutR.layout.row p.ej.Listener dela selección
  26. 26. Intenciones y Servicios 26¡Lanzamos!
  27. 27. Interfaces de Usuario 27Algunas vistas (widgets)
  28. 28. Interfaces de Usuario 28TextViewMétodos getText() / setText()
  29. 29. Interfaces de Usuario 29EditTexthttp://developer.android.com/guide/topics/ui/controls/text.htmlValores comunes para inputType:“textEmailAddress”, “textUri”,“number”, “phone”,“textCapSentences”,“textCapWords”, “textAutoCorrect”,“textPassword”, “textMultiline”Métodos getText() / setText()
  30. 30. Interfaces de Usuario 30AnalogClock, DigitalClock
  31. 31. Interfaces de Usuario 31Button
  32. 32. Interfaces de Usuario 32Spinnerhttp://developer.android.com/resources/tutorials/views/hello-spinner.htmlhttp://developer.android.com/guide/topics/ui/controls/spinner.htmlUsamos un adaptador tipoArray
  33. 33. Interfaces de Usuario 33RadioGroup/RadioButton
  34. 34. Interfaces de Usuario 34ToggleButtonhttp://developer.android.com/guide/topics/ui/controls/togglebutton.html
  35. 35. Interfaces de Usuario 35DatePickerDialog,TimePickerDialogDisponible en Android 3.0http://developer.android.com/guide/topics/ui/controls/pickers.html
  36. 36. Interfaces de Usuario 36Imágenes
  37. 37. Interfaces de Usuario 37ProgressBar
  38. 38. Interfaces de Usuario 38Muchas más● Consulta en:●http://developer.android.com/reference/android/widget/package-summary.html
  39. 39. Interfaces de Usuario 39Botón con más detalle● Button es una subclase de TextView● Un botón tiene texto, un icono o ambos ycomunica qué acción se produce al pulsarlo●Tenemos botones de texto (Button), conimagen (ImageButton)http://developer.android.com/guide/topics/ui/controls/button.html
  40. 40. Interfaces de Usuario 40Respondiendo 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 interfazonClickListener• De forma anónima o no
  41. 41. Interfaces de Usuario 41Implementación anónima dela interfaz
  42. 42. Interfaces de Usuario 42Java – implementación deinterfaz
  43. 43. 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() paratoda la actividad – si queremos distinguir, deberíamos mirarel id (v.getId() si queremos distinguir según dónde hayaspinchado). Bueno si queremos la misma conducta pinchesdonde pinches.– Implementarla anónima, generalmente la mejor opción,permite separar conducta por elemento
  44. 44. Interfaces de Usuario 44Widgets básicos:ImageView / ImageButton●Subclases de TextView y Button,respectivamente● Permiten incluir imágenes (sin nada o conbotón)● La imagen debe ser un recurso (enres/drawable)●se define en los atributos android:src(foreground) y/o android:backgroundhttp://developer.android.com/reference/android/widget/ImageView.html
  45. 45. Interfaces de Usuario 45Toast● Proporciona un mensaje instantáneo● Podemos personalizar el layout en xmlhttp://developer.android.com/guide/topics/ui/notifiers/toasts.html
  46. 46. Interfaces de Usuario 46Menús● Android tiene varios tipos de menús:– Menú de opciones y barra de acciones, queaparece al pulsar menú– Menú contextual que aparece cuando elusuario pulsa un rato en un elemento– Menú desplegable modalhttp://developer.android.com/guide/topics/ui/menus.html
  47. 47. Interfaces de Usuario 47Menú de opciones● Tenemos que crear un recurso menu enres/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 laacción correspondiente
  48. 48. Interfaces de Usuario 48Ejemplo menúres/menu/game_menu.xmlLo muestra en la barrade acciones si hayespacio (actionBar)Podemos agruparitems en grupos(group)
  49. 49. Interfaces de Usuario 49Eclipse● En Eclipse podemos crear recursos conNew->Android XML File
  50. 50. Interfaces de Usuario 50Ejemplo CalculadoraVersión targetSDK <11 (Android 3.0)
  51. 51. Interfaces de Usuario 51Ejemplo CalculadoraVersión targetSDK >=11 (Android 3.0)Añadidos al actionBarandroid:showAsAction="ifRoom"Sin añadirlos alactionBar, hay quepulsar tecla menú
  52. 52. Interfaces de Usuario 52Fragmentos● Desde la versión Android 3.0 (API 11), sesoportan “fragmentos” para compatibilidadcon tabletas● El layout se compone de fragmentoshttp://developer.android.com/guide/components/fragments.html
  53. 53. Interfaces de Usuario 53SupportLibrary● Podemos programar con las nuevas APIsañadiendo un jar (support.jar) para que nonos afecte durante el desarrollohttp://developer.android.com/tools/extras/support-library.html
  54. 54. Interfaces de Usuario 54Resumen● En este tema hemos revisado los principios de lasinterfaces gráficas (UI) en Android● Hemos revisado la relación entre XML y Java en lasinterfaces● View y ViewGroup tienen atributos que pueden serconfigurados● Hemos visto algunos widgets y layouts disponibles● ListView permite presentar listas a partir de Adaptadores
  55. 55. Interfaces de Usuario 55¿Preguntas?

×