Your SlideShare is downloading. ×

Tema 4.5 interfaces

228
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
228
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. Interfaces de Usuario 3TeoríaEjercicio práctico en el ordenadorAmpliación de conocimientosLectura / Vídeo / PodcastPráctica libre / ExperimentaciónLeyenda
  • 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. 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. 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. 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. 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. 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. 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. Interfaces de Usuario 11Programático vs Declarativostrings.xmllayout.xml
  • 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. Interfaces de Usuario 13Declaración layout XMLres/layout/miFichero.xml
  • 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. 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. 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. Interfaces de Usuario 17gravity vs layout_gravity
  • 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. 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. Interfaces de Usuario 20Algunos Layouts (ViewGroup)http://developer.android.com/resources/tutorials/views/index.htmlFrameLayoutScrollView
  • 21. Interfaces de Usuario 21LinearLayouthttp://developer.android.com/guide/topics/ui/layout/linear.html
  • 22. Interfaces de Usuario 22RelativeLayouthttp://developer.android.com/guide/topics/ui/layout/relative.html
  • 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. 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. 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. Intenciones y Servicios 26¡Lanzamos!
  • 27. Interfaces de Usuario 27Algunas vistas (widgets)
  • 28. Interfaces de Usuario 28TextViewMétodos getText() / setText()
  • 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. Interfaces de Usuario 30AnalogClock, DigitalClock
  • 31. Interfaces de Usuario 31Button
  • 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. Interfaces de Usuario 33RadioGroup/RadioButton
  • 34. Interfaces de Usuario 34ToggleButtonhttp://developer.android.com/guide/topics/ui/controls/togglebutton.html
  • 35. Interfaces de Usuario 35DatePickerDialog,TimePickerDialogDisponible en Android 3.0http://developer.android.com/guide/topics/ui/controls/pickers.html
  • 36. Interfaces de Usuario 36Imágenes
  • 37. Interfaces de Usuario 37ProgressBar
  • 38. Interfaces de Usuario 38Muchas más● Consulta en:●http://developer.android.com/reference/android/widget/package-summary.html
  • 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. 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. Interfaces de Usuario 41Implementación anónima dela interfaz
  • 42. Interfaces de Usuario 42Java – implementación deinterfaz
  • 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. 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. 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. 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. 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. Interfaces de Usuario 48Ejemplo menúres/menu/game_menu.xmlLo muestra en la barrade acciones si hayespacio (actionBar)Podemos agruparitems en grupos(group)
  • 49. Interfaces de Usuario 49Eclipse● En Eclipse podemos crear recursos conNew->Android XML File
  • 50. Interfaces de Usuario 50Ejemplo CalculadoraVersión targetSDK <11 (Android 3.0)
  • 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. 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. 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. 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. Interfaces de Usuario 55¿Preguntas?

×