Interfaces de usuario [Desarrollo de aplicaciones para Android]

Transcripción

1 Interfaces de usuario [Desarrollo de aplicaciones para Android] M. en C. Sergio Luis Pérez Pérez UAM CUAJIMALPA, MÉXICO, D. F. Trimestre 14-P Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 1 / 33

2 Actividades e intenciones 1 Actividades e intenciones 2 Creación de menús 3 Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 2 / 33

3 Actividades e intenciones I Una actividad en Android es equivalente a lo que conocemos como ventanas. Lo ideal es asociar una clase por actividad. Todas las actividades que se desarrollen deben heredar de Activity. Los pasos generales para crear nuevas actividades son: 1 Crear un nuevo layout para la actividad que se desea crear. 2 Crear una nueva clase descendiente de Activity. 3 Asociar el layout creado a la nueva clase. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 3 / 33

4 Actividades e intenciones II 4 Activar la nueva actividad desde alguna otra actividad (si es que no es la principal). 5 Registrar la nueva actividad en el archivo AndroidManifest.xml. Para realizar la comunicación entre actividades se utilizan instancias de intenciones, que se realizan mediante la clase Itent. Para enviar datos de una actividad a otra se utiliza el método putextra de la clase Intent. Intent nueva intencion = new Intent(this, ActividadALanzar.class); nueva intencion.putextra( nombre dato, valor dato ) startactivity(nueva intencion); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 4 / 33

5 Actividades e intenciones III La actividad que recibe los datos requiere una instancia de la clase Bundle. Para obtener los datos que vengan de otra actividad se utilizará el método gettipodedato de la clase Bundle. Bundle extras = getintent().getextras(); TipoDeDato dato = extras.gettipodedato( nombre dato ); La actividad lanzada también puede devolver datos a la que la invocó, una vez que termine. Del lado de la actividad lanzadora se utiliza el método startactivityforresult en lugar del método startactivity. Intent nueva intencion = new Intent(this, ActividadALanzar.class); startactivityforresult(nueva intencion, codigodesolicitud); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 5 / 33

6 Actividades e intenciones IV Además se sobre-escribe el método onactivityresult, protected void onactivityresult(int requestcode, int resultcode, Intent data){ if(requestcode == codigodesolicitud && resultcode == RESULT OK){ TipoDeDato dato = data.getextras().gettipodedato( dato ); } } Finalmente, en alguna parte de la actividad llamada se debe utilizar un código como el siguiente: public void regresardeactividad(view V){ Intent intencionregreso = new Intent(); intencionregreso.putextra( dato, valor dato ); setresult(result OK, intencionregreso); finish();} Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 6 / 33

7 Actividades e intenciones V Ejercicio: crear una actividad que se visualice al pulsar un botón de otra actividad. 1 Cree una aplicación de Android que contenga al menos un botón o bien utilice una que ya tenga creada. 2 En el directorio res/layout crear un nuevo archivo Android XML file con el nombre que prefiera y que contenga a una vista de tipo TextView. 3 Agregue los atributos de id y text a la vista TextView en el xml. 4 Cree una nueva clase, llamada AcercaDe, para asociarla con dicha actividad. Dicha clase deberá heredar de Activity y sobre-escribir el método oncreate. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 7 / 33

8 Actividades e intenciones VI 5 En la clase principal de la aplicación agregue un método que será asociado a un botón que, al presionarse, lanzará la actividad creada. Para ello requerirá crear una instancia de tipo Intent. public void mostraracercade(view view){ Intent nueva intencion = new Intent(this, AcercaDe.class); startactivity(nueva intencion); } 6 Asocie el evento onclick de algún botón al método creado (android:onclick= mostraracercade ). 7 Luego registre la nueva actividad creada en el archivo AndroidManifest.xml. 1 En el archivo AndroidManifest.xml seleccione la pestaña de Application. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 8 / 33

9 Actividades e intenciones VII 2 En la opción de Application Nodes presione el botón de agregar (Add). 3 Rellene los campos necesarios (al menos el campo Name y opcionalmente Theme y Label) y guarde los cambios. 8 Ejecute la aplicación y observe los resultados. 9 Realice lo mismo ahora con otro botón y con una nueva actividad, pero ahora debe enviar datos a la actividad lanzada y recibir datos al finalizar ésta. 10 Ejecute la aplicación y observe los resultados. 11 Finalmente, realice un método escuchador por código para algún botón, el cual permita finalizar la aplicación. Para ello realice los siguientes pasos: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 9 / 33

10 Actividades e intenciones VIII Cree un botón en la actividad principal llamado Salir. Cree un método llamado finalizar que implemente la interfaz escuchadora del botón Salir. public void salirdeactividad(int referencia){ Button boton = (Button) findviewbyid(referencia); boton.setonclicklistener(new public void onclick(view v) { finish(); } }); } Dentro del método oncreate mande llamar el método creado (por ejemplo: salirdeactividad(r.id.boton salir);). Ejecute la aplicación y observe los resultados. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 10 / 33

11 Actividades e intenciones IX Las intenciones son la forma de realizar acciones o tareas. Las intenciones permiten lanzar actividades o servicios desde las aplicaciones. Las intenciones se clasifican en dos tipos: Explicitas: indican exactamente cuál es el componente que se desea lanzar. Se utiliza el constructor Intent(Context contexto, Class<? > clase). Ejemplo: Intent intencion = new Intent(this, NombreDeLaClase.class); startactivity(intencion); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 11 / 33

12 Actividades e intenciones X Implícitas: solicitan tareas abstractas (como la intención de enviar mensajes) y se realizan en tiempo de ejecución. Se utiliza el constructor Intent(String accion, Uri uri). Ejemplo: Intent intencion = new Intent(Intent.ACTION DIAL, URI.parse( tel: )); startactivity(intencion); El principal uso de las intenciones es para: Lanzar actividades mediante startactivity(). Lanzar servicios mediante startservice(). Lanzar anuncios de tipo broadcast mediante sendboradcast(). Comunicar servicios mediante bindservice(). Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 12 / 33

13 Actividades e intenciones XI La intenciones podrán ser lanzadas por la aplicaciones o bien por el sistema. Los principales criterios que deben tomarse en cuenta al crear intenciones son: Nombre del componente: se indica el componente que se desea lanzar mediante su nombre completo. Acción: es la cadena de caracteres donde se indica la acción a realizar. Puede ser predefinida o propia. Categoría: sirve para complementar las acciones mediante información adicional del componente a lanzar. Datos: permiten referenciar a los datos con los que se trabajará. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 13 / 33

14 Actividades e intenciones XII Extras: permiten especificar la información adicional con la que se trabajará en el componente que será lanzado. Para esto se utiliza el método putextra(). Ejemplos de acciones predefinidas son: Constante Acción ACTION CALL Inicia una llamada telefónica ACTION EDIT Permite la edición de datos ACTION MAIN Inicia como la actividad principal ACTION SYNC Sincroniza los datos del dispositivo en un servidor ACTION BATTERY LOW Advertencia batería baja ACTION SCREEN ON Activa la pantalla Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 14 / 33

15 Actividades e intenciones XIII Ejemplos de categorías predefinidas son: Constante Descripción CATEGORY BROWSABLE Indica que la actividad lanzada puede mostrar los datos referenciados por un enlace. CATEGORY HOME La actividad muestra la pantalla de inicio del dispositivo (o bien tecla HOME). CATEGORY PREFERENCE Indica que la actividad a lanzar es un panel de preferencias. Ejercicio: Creación de intenciones implícitas. 1 Cree un nuevo proyecto que contenga en la actividad principal cinco botones con los siguientes nombres: Abrir un sitio Web Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 15 / 33

16 Actividades e intenciones XIV Realizar una llamada. Abrir Google Maps. Tomar una fotografía. Escribir un correo. 2 Después cree los siguientes métodos y asocie cada uno de ellos al correspondiente botón (mediante el atributo onclick). public void abrirpaginaweb(view vista){ Intent intencion = new Intent(Intent.ACTION VIEW, Uri.parse( sperez/ )); startactivity(intencion); } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 16 / 33

17 Actividades e intenciones XV public void realizarllamada(view vista){ Intent intencion = new Intent(Intent.ACTION CALL, Uri.parse( tel: )); startactivity(intencion); } public void abrirgooglemaps(view vista){ Intent intencion = new Intent(Intent.ACTION VIEW, Uri.parse( geo: , )); startactivity(intencion); } public void tomarfoto(view vista){ Intent intencion = new Intent( android.media.action.image CAPTURA ); startactivity(intencion); } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 17 / 33

18 Actividades e intenciones XVI public void escribircorreo(view vista){ Intent intencion = new Intent(Intent.ACTION SEND); intencion.settype( text/plain ); intencion.putextra(intent.extra SUBJECT, Descripcion del asunto ); intencion.putextra(intent.extra TEXT, Texto del correo ); intencion.putextra(intent.extra , new String[] sergio10barca@gmail.com ); startactivity(intencion); } 3 Para que sea posible realizar llamadas en el archivo AndroidManifest.xml se debe insertar la siguiente línea que proporciona los permisos adecuados a nuestra aplicación. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 18 / 33

19 Actividades e intenciones XVII <uses-permission android:name= android.permission.call PHONE / > 4 Ejecute la aplicación y observe los resultados. Nota: si la aplicación es ejecutada en el emulador puede ser que algunos botones no funcionen por lo que se recomienda utilizar un dispositivo real. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 19 / 33

20 Creación de menús Creación de menús 1 Actividades e intenciones 2 Creación de menús 3 Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 20 / 33

21 Creación de menús I Creación de menús Se pueden asociar menús a las actividades, los cuales pueden ser desplegados al presionar el botón menú del dispositivo. Estos menús son bastante útiles pues se mantienen ocultos hasta que dicho botón es presionado. Para crear un menú se realizan los siguientes pasos: 1 Sobre el directorio res pulse el botón derecho y solicite crear un nuevo archivo XML eligiendo en la opción Resource Type = Menu, el nombre puede ser menu.xml. 2 En el nuevo archivo menu.xml que aparece, mediante el botón Add, agregue un par de elementos de tipo item. 3 Agregue las propiedades adecuadas a los items como título y algunas imágenes. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 21 / 33

22 Creación de menús II Creación de menús 4 Para que el menú funcione primero es necesario sobre-escribir el método oncreateoptionsmenu en el código java de la actividad principal, el cual asociará dicho menú al botón menú del dispositivo (en el emulador se activa con la tecla public boolean oncreateoptionsmenu(menu menu) { super.oncreateoptionsmenu(menu); MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.menu, menu); return true;//se hace visible el menu } 5 Para activar la funcionalidad deseada al presionar cada elemento de menú, se debe sobre-escribir el método onoptionsitemselected, Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 22 / 33

23 Creación de menús III Creación de menús también en el código java de la actividad public boolean onoptionsitemselected(menuitem item){ switch(item.getitemid()){ case R.id.menuItem1:{ metodomenuitem1(null); }break; case R.id.menuItem2:{ metodomenuitem2(null); }break; default:break; } return true;//permite terminar el elemento correctamente } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 23 / 33

24 Uso de la vista ListView Uso de la vista ListView 1 Actividades e intenciones 2 Creación de menús 3 Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 24 / 33

25 Uso de la vista ListView Uso de la vista ListView I La vista ListView permite visualizar una lista vertical deslizable de varios elementos. Cada uno de los elementos de ListView puede definirse como layouts. Cualquier actividad que vaya a visualizar un ListView debe heredar de ListActivity. Para crear un ListView se realizan los siguientes pasos: 1 Se diseña un layout que contenga un ListView. 2 Se diseña un layout el cual simplemente se repetirá en la lista. 3 Se crea una actividad que visualice el layout con el ListView. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 25 / 33

26 Uso de la vista ListView Uso de la vista ListView II 4 Finalmente, se personaliza cada uno de los elementos del ListView. Un ListView deben ir dentro de un FrameLayout y acompañados de una vista como TextView con la finalidad de desplegar algún otro valor en caso de que no haya elementos en la lista. <FrameLayout > <TextView / > <ListView / > < /FrameLayout> En el método oncreate() de la clase que corresponda al ListView debe agregarse el método setlistadapter con la finalidad de asociar los objetos de una lista al ListView. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 26 / 33

27 Uso de la vista ListView Uso de la vista ListView III setlistadapter(new ArrayAdapter<String> (this, android.r.layout.layoutlista, R.id.titulo, Lista)); setlistadapter proporciona el cursor para un ListView. El ArrayAdapter espera por defecto las referencias de recursos previstas en un TextView. ArrayAdapter permite también diseños mas complejos. Puede encontrar más información en En el ejemplo anterior tenemos: this: contexto de la aplicación. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 27 / 33

28 Uso de la vista ListView Uso de la vista ListView IV android.r.layout.layoutlista: es la referencia de recurso que se utilizará para todos los elementos de la lista. R.id.titulo: identifica el id de la vista que sera desplegada. Lista: contiene la información que deberá ser desplegada en los elementos del ListView. Ejercicio: crear un ListView visualizando sus elementos como layouts. 1 Cree un nuevo layout de tipo LinearLayout e incluya un FrameLayout el cual contendrá dentro el ListView deseado. La estructura del xml debe ser parecida a la siguiente: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 28 / 33

29 Uso de la vista ListView Uso de la vista ListView V <LinearLayout > <TextView... / > <FrameLayout > <TextView / > <ListView / > < /FrameLayout> < /LinearLayout> 2 Registre la nueva actividad en el documento AndroidManifest.xml. 3 Realice un layout que represente a cada uno de los elementos de la lista. La propiedad más importante es el alto del elemento y se denota mediante: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 29 / 33

30 Uso de la vista ListView Uso de la vista ListView VI?android:attr/listPreferredItemHeight que es un parámetro estándar de configuración del sistema. <RelativeLayout... android:layout width= fill parent android:layout height=?android:attr/listpreferreditemheight > <ImageView android:layout width=?android:attr/listpreferreditemheight android:layout height= fill parent / > <TextView android:layout android:layout alignparenttop= true android:textappearance=?android:attr/textappearancelarge android:singleline= true / >< /RelativeLayout> Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 30 / 33

31 Uso de la vista ListView Uso de la vista ListView VII 4 Ejecute la aplicación y observe los resultados. Si se desea personalizar cada elemento del ListView (con diferentes textos, imágenes, etc.) entonces se debe crear el propio ListView heredando de la clase BaseAdapter. El constructor de la clase personalizada sólo requiere recibir la lista de elementos (registro de records, referencias de imágenes, etc.) y la actividad correspondiente, así como llamar a la clase padre con super(). Para implementar la funcionalidad completa se deben sobre-escribir los siguientes métodos: View getview(int position, View convertview, ViewGroup parent): permite construir un objeto View con el layout correspondiente a la posición denotada por position. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 31 / 33

32 Uso de la vista ListView Uso de la vista ListView VIII int getcount(): permite conocer el número de elementos en la lista. Object getitem(int position): devuelve el position-ésimo elemento de la lista. long getitemid(int position): devuelve el position-ésimo identificador del correspondiente elemento de la lista. El único método que merece la pena detallar es getview(). Se construye un objeto View, a partir de un layout predefinido, mediante el uso del método inflate de la clase LayoutInflater. Se coloca el texto e imagen que corresponda. Finalmente se debe llamar al método setlistadapter en la clase Java que desplegará al ListView, de forma similar a la siguiente: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 32 / 33

33 Uso de la vista ListView Uso de la vista ListView IX setlistadapter(new MiListView (this, public View getview(int position, View convertview, ViewGroup parent) { LayoutInflater inflater = actividad.getlayoutinflater(); View vista = inflater.inflate(r.layout.mi layout elemento, null, true); TextView texto = (TextView) vista.findviewbyid(r.id.titulo); texto.settext(lista.elementat(position)); ImageView imagen = (ImageView) vista.findviewbyid(r.id.icono); imagen.setimageresource(r.drawable.imagendeseada); return vista; } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 33 / 33