Unidad 5. Interfaz de Usuario

Transcripción

1 Unidad 5. Interfaz de Usuario José A. Montenegro 9 de mayo de 2013 José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 1/77

2 Índice 1 Explorando Interfaz de Usuario de Android 2 Vistas y eventos de usuario Vistas Eventos de usuario 3 Layouts comunes FrameLayout LinearLayout RelativeLayout AbsoluteLayout 4 Clase Widget 5 Menús, Diálogos y Notificaciones Menús Diálogos Notificaciones Prueba de Concepto José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 2/77

3 Sección 1 Explorando Interfaz de Usuario de Android José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 3/77

4 Introducción Esta sección proporciona las técnicas para implementar un interfaz gráfico en Android. Explica la arquitectura de UI de Android así como incluir los elementos básicos y la interacción con ellos. El marco de trabajo UI de Android, es como otros Java UI, organizados mediante el patrón Modelo-Vista-Controlador. Básicamente proporciona las estructuras y las herramientas para construir un Controlador que administra las entradas del usuario y una Vista que muestra la información de forma gráfica. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 4/77

5 Modelo : Es la base de la aplicación, lo que realmente hace. Un Modelo puede ser usado por varias aplicaciones, mientras que la Vista y el Controlador de una aplicación concreta necesitan reflejar el Modelo que utilizan. Vista : Es la visualización del Modelo. Más generalmente, una vista es la porción de la aplicación responsable para mostrar la pantalla, enviar audio a los altavoces... etc. La UI dibuja la pantalla mediante la exploración del árbol de los elementos de la vista, dibujando cada elemento y solicitando que los hijos de cada uno realicen la misma opción. Controlador : Es la porción de la aplicación que responde a acciones externas: como pulsación de teclas, llamada entrante... etc. Es implementado como una cola FIFO de eventos. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 5/77

6 Sección 2 Vistas y eventos de usuario José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 6/77

7 Class View Las Vistas son los bloques de construcción de la UI de una aplicación Android. Las Actividades contienen vistas y las clases View representan elementos en la pantalla y son los responsables para la interacción con los usuarios mediante los eventos. Cada pantalla Android contiene una jerarquía de elementos View. Estas vistas poseen su propias formas y tamaños. Muchos de los elementos básicos son proporcionados por la plataforma como elementos de texto, de entrada de datos, imágenes, botones..etc. Además es posible crear vistas compuestas y a medida, si son necesarias. Podemos establecer las vistas en una Actividad mediante código Java o utilizando código XML. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 7/77

8 Figura 1 : Jerarquía de Clases View José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 8/77

9 Jerarquía de Clase View La figura 1 muestra la jerarquía de clases que parten de la clase view, que es la unidad básica de expresión de una interfaz de usuario. La jerarquía muestra dos subclases principales: Widget : Ofrece la representacion de los objetos UI. Por tanto es un punto de interacción para el usuario y es receptor de los eventos de interacción. La sección 4 muestra los elementos más comunes. ViewGroup : Esta clase sirve como base para las subclases llamadas layouts que permite configurar la distribución de los widget en el diseño. La sección 3 incluye la defición de los layouts, así como ejemplos de uso. En resumen la actividad de un UI es una jerarquía (árbol) de instancias de las clases View y ViewGroup. Para vincular la jerarquía de vistas a la pantalla, la actividad deberá invocar al método setcontentview() y pasar el nodo raíz de la jerarquía. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 9/77

10 XML Layout Un layout basado en XML es una especificación de varios componentes UI (widgets) y las relaciones con sus contenedores. XML layout son considerados como resources por lo que están almacenados en el directorio res/layout, como muestra la figura 2. Figura 2 : XMLLayout en los recursos de la aplicación José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 10/77

11 XML Layout Cada XML layout contiene un árbol de elementos que especifica un layout de widgets y contenedores que forman una vista. Los atributos de los elementos XML son propiedades, que describe como un widget será mostrado o el comportamiento de un contenedor. La siguiente trasparencia muestra la definición de un botón en xml y su representación en xml. A continuación veremos el significado de algunos de los atributos. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 11/77

12 XML Layout 1 <?xml version="1.0" encoding="utf-8"?> 2 <Button xmlns:android=" 3 android:id="@+id/button1" 4 android:layout_width="wrap_content" 5 android:layout_height="wrap_content" 6 android:text="button" /> Listing 1: Definición Boton en XML Figura 3 : Botón creado en XML (listado 1) José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 12/77

13 XML Layout El elemento raíz tiene que declarar el namespace y todos los elementos serán hijos del raíz y heredan la declaración del namespace. xmlns:android=" : Permite asignar un identificador al botón. Útil para después referenciar el botón desde el código Java. Button boton; Boton= (Button) findviewbyid(r.id.button1) android:text= Button : Establece la etiqueta a mostrar en el botón. No es buena práctica establecer una cadena directamente, mejor utilizar android:layout width y android:layout height : Parámetros visualización con respecto al layout que lo incluye. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 13/77

14 XML Layout Eclipse permite realizar un diseño WYSIWYG del XML Layout, pulsando la etiqueta Graphical Layout. La paleta contiene los elementos visuales disponibles. Seleccionando y arrastrando los elementos son añadidos a la interfaz. Si seleccionamos un item establecido podemos modificar sus atributos, de la misma forma que en XML. Figura 4 : Representación Visual del XMLLayout (listado 1) José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 14/77

15 HierarchyViewer Herramienta que nos permite visualizar la estructura visual de una vista en el emulador o dispositivo. La figura 5 muestra la pantalla inicial con las vistas disponibles, entre ellas la aplicación con el botón realizada anteriormente. La aplicación proporciona dos funcionalidades Load View Hierarchy y Inspect ScreenShot. Más información Android sdk Figura 5 : Aplicación depuración visual HierarchyViewer José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 15/77

16 HierarchyViewer Load View Hierarchy muestra la jerarquía de la vista, información de cada uno de los atributos de los elementos e incluso información visual concreta de los elementos. Figura 6 : Opción LoadViewHierarchy en HierarchyViewer José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 16/77

17 HierarchyViewer Inspect ScreenShot también nos muestra la jerarquía de elementos utilizados pero más orientada a la representación visual de los elementos. Figura 7 : Opción Inspect ScreenShot en HierarchyViewer José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 17/77

18 HierarchyViewer La herramienta (figura 8) nos muestra más elementos que los que hemos definido mediante XML Layout. Todos los elementos desde la raíz hasta el seleccionado en naranja inclusive son incluidos por el sistema. Si observamos el sistema parte de un contenedor LinearLayout (explicamos en sección 3.2) que divide en dos la aplicación (FrameLayout): 1 La sección del Título de la aplicación (TextView). 2 La propia aplicación, donde se encuentra el único elemento que hemos definido nosotros, el botón. Figura 8 : Jerarquía de los elementos visuales de una aplicación José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 18/77

19 Eventos de usuario Normalmente los eventos son capturados desde el objeto View concreto, con el que interactúa el usuario (recordemos que los widgets heredan de view). Android proporciona métodos que son invocados cuando una acción concreta ocurre en ese objeto. Por ejemplo si un botón es pulsado, el método onclick() es invocado en ese objeto. Para interceptar el evento, sería necesario heredar de la clase y sobrescribir el método, pero esta solución no es muy práctica. La clase View posee una colección de interfaces, listeners, que permiten capturar los eventos de una forma más fácil. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 19/77

20 Eventos de usuario Un event listener es un interfaz de la clase View que contiene un método que es invocado cuando un surge un evento registrado. Los métodos disponibles son: onclick() onlongclick() onfocuschange() onkey() ontouch() oncreatecontextmenu() José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 20/77

21 Ejemplo evento onclick El siguiente ejemplo muestra cómo capturar el evento de ratón sobre un botón. En este caso es posible realizarlo mediante el atributo xml onclick (listado 21) o mediante el listener en Java (listado 2). En el caso que establezcamos ambos elementos, el listener tendrá prioridad. 1 <Button 2 android:id="@+id/button1" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" 5 android:text="botonevento" 6 android:onclick="eventoxml"/> 1 public void eventoxml(view v) { 2 Toast.makeText(getApplicationContext(), 3 "Boton Pulsado XML",Toast.LENGTH_LONG).show(); 4 Log.d("Boton","Boton Pulsado XML"); 5 } José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 21/77

22 Ejemplo evento onclick 1 Button btn = (Button) findviewbyid(r.id.button1); 2 btn.setonclicklistener(new View.OnClickListener() { 3 public void onclick(view v) { 4 Toast.makeText(getApplicationContext(), 5 "Boton Pulsado Listener",Toast.LENGTH_LONG).show(); 6 Log.d("Boton","Boton Pulsado Listener");} 7 }); Listing 2: Definición del Listener onclick José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 22/77

23 Sección 3 Layouts comunes José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 23/77

24 Layout comunes Android proporciona 4 tipos básicos de layout que heredan de ViewGroup (figura 1): 1 FrameLayout 2 LinearLayout 3 RelativeLayout 4 AbsoluteLayout Android proporciona otro tipos de contenedores que heredan de ViewGroup: Gallery GridView ListView ScrollView Spinner SurfaceView TabHost TableLayout ViewFlipper José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 24/77

25 FrameLayout Representa el layout más elemental. Básicamente es un espacio en blanco que puede ser cubierto por un objeto. Todos los elementos incluidos en este layout son establecidos en la esquina superior izquierda, sin poder especificar las coordenadas de los elementos. Por tanto, cada elemento que se añade va superponiendo visualmente a los elementos anteriores. Anteriormente hemos visto (figura 8) su utilización por parte del sistema para dividir en dos la vista de la aplicación (título y contenido). Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 25/77

26 Ejemplo FrameLayout Una posible utilidad es definir un fondo visual para la vista, como muestra el listado 3 y la figura 9. <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android= " android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/fondo800x480"> </FrameLayout> Listing 3: Ejemplo de FrameLayout con imagen de fondo Figura 9 : Ejemplo de FrameLayout definido en listado3 José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 26/77

27 LinearLayout Layout que permite alinear los elementos visuales en una sola dirección, horizontal o vertical. El atributo orientation nos permite configurar la dirección del layout. android:orientation="horizontal" Figura 10 : LinearLayout Horizontal android:orientation="vertical" Figura 11 : LinearLayout Vertical José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 27/77

28 LinearLayout El atributo gravity permite definir la justificación de los elementos en el layout. android:gravity="center_horizontal" android:orientation="horizontal Figura 12 : LinearLayout Horizontal android:gravity="center" android:orientation="vertical" Figura 13 : LinearLayout Vertical No confundir con el atributo layout gravity que define la posición del layout con respecto su contenedor. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 28/77

29 RelativeLayout Permite especificar la posición de los componentes de forma relativa a la vista padre o otro componente, mediante su ID. Debido a que los elementos son tratados en un orden dado, si utilizamos XML para especificar el layout, el elemento referenciado debe estar especificado antes del objeto que lo referencia. Los parámetros utilizados son (android:layout...) : width, below, aligntop, alignbottom, toleftof, height, above alignparenttop, alignparentbottom torightof padding [Bottom Left Right Top], y margin [Bottom Left Right Top]. Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 29/77

30 RelativeLayout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="boton1" /> <Button android:layout_width="wrap_content" Figura 14 : Ejemplo RelativeLayout android:layout_height="wrap_content" android:layout_torightof="@+id/button1" android:text="boton2" /> </RelativeLayout> José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 30/77

31 AbsoluteLayout Permite especifica las coordenadas exactas (x,y) de los hijos. Aunque podemos definir exactamente la posición pueden resultar más difícil de mantener que otros layouts. Las unidades utilizadas para las coordenadas son dp. Density-independent Pixels Unidad abstracta que está basada en la densidad física de la pantalla. Las unidades son relativas a una pantalla de 160 dpi, por lo que un dp es un pixel en una pantalla de 160 dpi. Visita la web de diseño android para una explicación detallada web Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 31/77

32 AbsoluteLayout <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="120dp" android:layout_y="32dp" android:text="boton1" /> <Button Figura 15 : Ejemplo AbsoluteLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="boton2" /> </AbsoluteLayout> José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 32/77

33 Sección 4 Clase Widget José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 33/77

34 Widgets Además de la creación y definición de las propiedades en XML, es posible definir y diseñar los widgets en Java. En los ejemplos anteriores hemos hecho uso de uno de los widget más común, el botón. Hasta ahora hemos visto su definición en xml (listado 1) y el listado 4 muestra la creación del botón mediante Java En esta sección vamos a repasar los widgets más comunes. Para una referencia completa de los widgets disponibles visitar Android SDK. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 34/77

35 Creación Botón mediante Código Java 1 public class PrimerProyectoActivity extends Activity { 2 /** Called when the activity is first created. */ 4 public void oncreate(bundle savedinstancestate) { 5 super.oncreate(savedinstancestate); 6 7 LinearLayout.LayoutParams widgetparams = new LinearLayout.LayoutParams( 8 ViewGroup.LayoutParams.FILL_PARENT, 9 ViewGroup.LayoutParams.FILL_PARENT, 0 1.0F); 1 2 Button b = new Button(this); 3 b.settext("primerboton"); 4 b.settextcolor(color.red); 5 b.setlayoutparams(widgetparams); 6 7 setcontentview(b); 8 } 9 } Listing 4: Utilización Clase Button José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 35/77

36 Widget TextView Las etiquetas son definidas en Android mediante la clase TextView. Es el primer widget que hemos utilizado. La aplicación que crea eclipse por defecto incluye un TextView. Su principal cometido es mostrar información. Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 36/77

37 Widget TextView <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:background="#ff0000ff" android:padding="3dp" android:text="espero que te guste el curso" Figura 16 : Ejemplo TextView android:textsize="16sp" android:textstyle="bold" > </TextView> José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 37/77

38 Práctica 5.1 Utilizando los elementos descritos hasta el momento (Layouts, botones y etiquetas) modifique el interfaz del Conversor de monedas proporcionado. Además haciendo uso de los eventos, añada la funcionalidad del conversor. Proporcionamos un ejemplo realizado con RelativeLayouts, intente realizarlo con otro de los Layout disponibles. Observa la definición de border.xml y borderboton.xml en la subcarpeta drawable de los recursos del proyecto. Figura 17 : Conversor con RelativeLayouts José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 38/77

39 Widget EditText Es una extensión de TextView que por defecto es posible editar. Los métodos que más vamos a utilizar son: txtbox.settext( EstableceValor ): Establece el valor. txtbox.gettext().tostring(): Obtiene el texto introducido. Además de los propiedades estándar de EditText destacamos las siguientes: android:autotext : (true/false) proporciona auto completar. android:capitalize : Muestra información en mayúscula. android:digits : Entrada que acepta solamente dígitos. android:singleline : Permite una sola entrada. android:password : (true/false) Controla la visibilidad de los datos entrada. android:phonenumber : (true/false) Entrada es número de teléfono. Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 39/77

40 Widget EditText <EditText android:layout_width="298dp" android:layout_height="40dp" android:autotext="true" android:capitalize="words" android:hint="apellidos Nombre"/> <EditText android:layout_width="298dp" android:layout_height="40dp" android:phonenumber="true" android:hint="(+34) Telefono Espana"/> <EditText android:layout_width="298dp" android:layout_height="40dp" android:password="true" android:hint="clave longitud 8 caracteres"/> Figura 18 : Ejemplo EditText José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 40/77

41 Widget CheckBox Especie de botón con dos estados: verificado o no verificado. Los métodos que más vamos a utilizar son: txtbox.setchecked(boolean): Establece el estado del checkbox. checkbox.ischecked(): Devuelve true/false dependiendo de si el checkbox está verificado o no verificado. Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 41/77

42 Widget CheckBox <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="opcion1" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="opcion2" /> Figura 19 : Ejemplo CheckBox José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 42/77

43 Widget RadioButton Posee un funcionamiento similar al CheckBox. Si incluimos los RadioButtons en un RadioGroup, solo permitimos la selección de uno de los componentes. La selección de un elemento hace que los demás sean deseleccionados. Los métodos que más vamos a utilizar son: RadBtt.toggle(): Cambia el estado de la vista a la inversa del estado actual. Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 43/77

44 Widget RadioButton <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="opcion 1" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="opcion 2" /> <RadioButton Figura 20 : Ejemplo RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="opcion 3" /> </RadioGroup> José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 44/77

45 Widget Spinner Nos muestra una lista despegables de selección, equivalente al elemento visual Combo definido en Java awt. Este widget necesita definir un adaptador para vincular los datos a la vista que muestra la información mediante el método setadapter(). Además nos permite realizar un listener para capturar el evento cuando es seleccionado un elemento distinto en la lista mediante el método setonitemselectedlistener(). El método setdropdownviewresource() proporciona el recurso para la lista despegable de selección. Normalmente utilizamos el recurso del sistema android.r.layout.simple spinner dropdown item. Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 45/77

46 Widget Spinner Básicamente podemos proporcionar el Adaptador de los datos para el Spinner de tres métodos distintos: Mediante recursos : La aplicación SQL (figura 21) utiliza un array de datos definidos en los recursos (listado 5). Mediante objetos : La aplicación SSLCertProyecto hace uso del objeto X509Cert para mostrar los datos (listado 6). Mediante consulta SQL : La consulta de la aplicación SQL utiliza un adaptador SQLite, mediante el objeto Cursor (listado 7). José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 46/77

47 Widget Spinner <Spinner android:layout_width="match_parent" android:layout_height="wrap_content"/> <resources> <string-array name="cursos"> <item >Primero</item> <item >Segundo</item> <item >Tercero</item> </string-array> </resources> Listing 5: Definición contenido spinner mediante XML Figura 21 : Ejemplo Spinner ArrayAdapter adapter = ArrayAdapter.createFromResource( this, R.array.cursos, android.r.layout.simple_spinner_item); adapter.setdropdownviewresource(android.r.layout.simple_spinner_dropdown_item); s.setadapter(adapter); José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 47/77

48 Widget Spinner La información que es mostrada en la lista es la definida en el método tostring del objeto vinculado. ArrayAdapter<X509Cert> spinner_adapter = new ArrayAdapter<X509Cert> (SSLCertProyectoActivity.this, android.r.layout.simple_spinner_item, certificados); spinner_adapter.setdropdownviewresource (android.r.layout.simple_spinner_dropdown_item); spinnercert.setadapter(spinner_adapter); Listing 6: Definición contenido spinner mediante un Objeto El método tostring del objeto X509Cert muestra el nombre del usuario del certificado. public String tostring(){ return cert.getsubjectdn().getname(); } José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 48/77

49 Widget Spinner El adaptador es el objeto Cursor obtenido de una consulta a la base de datos, en este caso con todos los alumnos. Especificamos que utilice el expediente como elemento a mostrar en el spinner ( id). AdaptadorBD db = new AdaptadorBD (this); db.open(); Cursor cursor=db.gettodosalumnos(); SimpleCursorAdapter adapter2 = newsimplecursoradapter(this,android.r.layout.simple_spinner_item, cursor,new String[] {"_id"}, new int[] {android.r.id.text1}); adapter2.setdropdownviewresource(android.r.layout.simple_spinner_dropdown_item); s.setadapter(adapter2); Listing 7: Definición contenido spinner mediante una consulta SQL José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 49/77

50 Widget SeekBar Muestra una barra con un selector que puede desplazarse a lo largo de la barra.el usuario puede mover el selector a la derecha e izquierda para seleccionar un valor. Para recibir las notificaciones en el cambio de estado de la barra debemos de instanciar el listener OnSeekBarChangeListener. Un ejemplo de uso es como selector de volumen de un reproductor o progreso de reproducción de un vídeo. Figura 22 : Ejemplo utilización SeekBar para ajustar volumen Más información Android SDK José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 50/77

51 Imágenes ImageView y ImageButton son dos widgets que permiten incluir imágenes en las aplicaciones. Son widgets anólogos a TextView y Button, respectivamente. Cada widget posee un atributo android:src o android:background para especificar que imagen utilizar. Las imágenes son una referencia a un recurso drawable. ImageButton, es una subclase de ImageView. Añade el comportamiento de los botones para los eventos del ratón. Más información Android SDK y Android SDK. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 51/77

52 Imágenes <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" Figura 23 : imageview e imagebutton android:src="@drawable/ic_launcher"/> José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 52/77

53 WebView Vista que muestra código web (html, javascript... ). Utiliza el motor de visualización de WebKit (navegador por defecto en Android e ios Los métodos utilizados para proporcionar el código web a mostrar son: LoadUrl: Muestra una url, webview.loadurl(" LoadData o loaddatawithbaseurl(): Muestra código web que es pasado mediante una cadena al método. String pagina = "<html><body>hola <b>mundo</b>.</body></html>"; webview.loaddata(pagina, "text/html", null); Más información Android SDK. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 53/77

54 WebView La aplicación http (siguiente unidad) hace uso de webview para mostrar una página web obtenida mediante una conexión http. Utilizamos en la aplicación loaddatawithbaseurl ya que loaddata no funciona correctamente como se apunta en google code. webview.loaddatawithbaseurl(null, pagina,"text/html", "UTF-8", null); Las propiedades de WebView puede ser modificadas mediante el método getsettings: webview.getsettings().setjavascriptenabled(true); webview.getsettings().setdefaulttextencodingname("utf-8"); webview.getsettings().setloadwithoverviewmode(true); webview.getsettings().setusewideviewport(true); José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 54/77

55 Elementos Heredados View Todos los widgets heredan de View por tanto adquieren propiedades y métodos de View que nos pueden ser de utilidad : XML atributos : android:visibility android:background Métodos Java : mibutton.requestfocus() mitextbox.isfocused() miwidget.setenabled() miwidget.isenabled() José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 55/77

56 Aplicación Pantalla Completa Si queremos que nuestra aplicación no muestre la barra con el título de la aplicación: requestwindowfeature(window.feature_no_title); Para establecer la aplicación a pantalla completa: this.getwindow().setflags(windowmanager.layoutparams.flag_fullscreen, WindowManager.LayoutParams.FLAG_FULLSCREEN); José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 56/77

57 Galería de Componentes Visuales Figura 24 : Distintos Componentes Visuales ICS José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 57/77

58 Figura 25 : Distintos Componentes Visuales ICS José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 58/77

59 Figura 26 : Distintos Componentes Visuales ICS José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 59/77

60 Figura 27 : Distintos Componentes Visuales ICS José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 60/77

61 Sección 5 Menús, Diálogos y Notificaciones José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 61/77

62 Menús Los menús incrementan la funcionalidad de una aplicación proporcionando operaciones adicionales en un panel inferior. Son invocados al pulsar la tecla Menú del dispositivo o emulador. Figura 28 : Menu en aplicación Mensaje José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 62/77

63 Menús Para incluir el menú en la aplicación solamente hay que sobreescribir dos métodos de la actividad principal: oncreateoptionsmenu : Este método permite añadir elementos al menú. onoptionsitemselected : Este método declara las acciones a realizar cuando el menú es seleccionado El listado 8 muestra la creación de un menú con dos entradas, tal y como muestra la figura 29. Figura 29 : Menú con dos elementos José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 63/77

64 1 public boolean oncreateoptionsmenu(menu menu) { 2 menu.add(menu.none, CLEAR_MENU_ID, Menu.NONE, "Limpiar"); 3 menu.add(menu.none, ABOUT_MENU_ID, Menu.NONE, "About"); 4 return super.oncreateoptionsmenu(menu); 5 } 6 7 public boolean onoptionsitemselected(menuitem item) { 8 final EditText tb1 = (EditText) findviewbyid(r.id.edittext1); 9 switch (item.getitemid()) { 0 case CLEAR_MENU_ID: tb1.settext(""); return true; 1 case ABOUT_MENU_ID: 2 Toast.makeText(this, "Curso Android", Toast.LENGTH_LONG).show(); 3 return true; 4 default: ; return false; 5 } 6 } Listing 8: Creación Menu José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 64/77

65 Toast Es una vista que contiene un mensaje informativo para el usuario. El mensaje aparece como una vista flotante sobre la aplicación y nunca recibe el foco. La ventana tendrá el espacio requerido por el mensaje. La notificación aparece y desaparece automáticamente y no acepta eventos, para tal caso utilizamos Barra de estado. Figura 30 : Ejemplo de Toast Más información Android SDK. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 65/77

66 Toast El método necesario para crear la notificación es maketext que devuelve un objeto Toast. Toast.makeText (Context contexto, CharSequence mensaje, int duracion ); Contexto : Referencia al entorno de la vista. Mensaje : El mensaje a mostrar. Duración : Duración de la vista Toast.SHORT o Toast.LONG. Finalmente será necesario invocar a toast.show() para mostrar el mensaje creado anteriormente. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 66/77

67 Alert Dialog Es una ventana modal que muestra un pequeño mensaje al usuario y espera la respuesta del usuario, normalmente pulsando un botón. A continuación (listado 9) veremos el código de la figura 31. Más información Android SDK. Figura 31 : Ejemplo de AlertDialog José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 67/77

68 Alert Dialog 1 AlertDialog.Builder builder = new AlertDialog.Builder(this); 2 builder.settitle("aviso"); 3 builder.seticon(r.drawable.ic_launcher); 4 builder.setmessage("quieres seguir aprendiendo Android?"); 5 builder.setpositivebutton("si",null); 6 builder.setnegativebutton("no",null); 7 builder.setneutralbutton("otro Dia",null); 8 builder.create(); 9 builder.show(); Listing 9: Definición de un Dialogo de Alerta José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 68/77

69 Alert Dialog En el ejemplo anterior (listado 9) al pulsar cualquiera de los botones del dialogo no realizamos ninguna opción, ya que el segundo parámetro de set.positivebutton es null. Para realizar cualquier opción podemos instanciar un listener tal y como muestra el listado builder.setpositivebutton("si", new DialogInterface.OnClickListener() { 2 public void onclick(dialoginterface dialog, int which) { 3 Toast.makeText(getApplicationContext(), 4 "Perfecto hay mucho que aprender", Toast.LENGTH_SHORT).show(); 5 } 6 }); Listing 10: Definición de un Dialogo de Alerta José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 69/77

70 Notificaciones Una notificación es un mensaje corto que muestra información en la ĺınea de estado (barra superior en Android). Después de abrir el Panel de Notificación el usuario puede pulsar en la selección y ejecutar una actividad asociada. A continuación vamos a utilizar el DDMS para emular el envío de mensajes SMS y observar como funciona las notificaciones. Figura 32 : Utilización del DDMS para simular envío mensajes José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 70/77

71 Notificaciones Figura 33 : Secuencia de acciones en la Notificación José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 71/77

72 Notificaciones El proceso de creación de una Notificación consta de cuatro pasos: 1 Obtener una referencia al administrador de notificaciones NotificationManager. 2 Crear un objeto Notificación. 3 Definir el mensaje de la notificación y establecer el Intent a ejecutar. 4 Enviar la notificación al administrador de notificaciones. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 72/77

73 Notification Manager Esta clase notifica al usuario que ha ocurrido un evento. La notificación permite podrá mostrar un icono al usuario en la barra de estados, como vimos en la figura 33, sonido o vibración. 1 Notification.DEFAULT_SOUND; 2 Notification.DEFAULT_VIBRATE; 3 Notification.DEFAULT_LIGHTS El listado 11 nos muestra como mostrar una notificación mediante la clase notificationmanager y el método notify. 1 NotificationManager notificationmanager = 2 (NotificationManager)getSystemService(NOTIFICATION_SERVICE); 3 notificationmanager.notify(notification_id, notification) Listing 11: Mostrar una notificación mediante notificationmanager José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 73/77

74 Notificación Anteriormente hemos visto cómo mostrar una notificación mediante el NotificationManager. El método notify utiliza un objeto de tipo Notification. La definición del constructor sería: public Notification (int icono, CharSequence TextoBarraEstado, long fechaevento) Donde los parámetros son los siguientes: Icono : El identificador del icono que mostrará en la barra de estados. TextoBarraEstado : Texto a mostrar en la barra de estado. FechaEvento : Fecha en el que sucedió el evento, normalmente System.currentTimeMillis(). José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 74/77

75 Notificación Método setlatesteventinfo muestra información del evento en el panel de notificación. El método notify utiliza un objeto de tipo Notification. public void setlatesteventinfo ( Context contexto, CharSequence Titulo, CharSequence Texto, PendingIntent IntentAsociado) Donde los parámetros son los siguientes: Contexto : El contexto para la aplicación / actividad. Título : El título mostrado en la entrada de la notificación. Texto : El contenido del evento. IntentAsociado : El intent que lanzaremos cuando el usuario selecciona la notificación. José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 75/77

76 Prueba de Concepto La aplicación de números aleatorios (figura 34) mostrará un ejemplo de los siguientes conceptos: Eventos : Establecer Listener onclick para generar números aleatorios y borrar. Notificaciones : Muestra evento cuando genera número aleatorio negativo. Toast : Muestra información del curso. Menú : Crea dos opciones, una para limpiar la entrada y otra de información de la aplicación. Figura 34 : Aplicación ProyectoEvento José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 76/77

77 José A. Montenegro Montes José A Montenegro ([email protected]) Programación de dispositivos móviles. CEP-Málaga 77/77