Tema 2: Diseño de servicios para móviles Listas y menús 2013-2014 Depto. Ciencia de la Computación e IA
Puntos a tratar Spinners Listas Adaptadores Menús de opciones Menús contextuales 2
Spinner Cuadro de selección múltiple Pasos Añadir objeto Spinner al layout Datos a proporcionar Prompt Array de opciones Asignar array de opciones al Spinner 3
Definición del spinner Añadir objeto Spinner al layout <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawselectorontop="true" android:prompt="@string/eligeopcion" /> Cadena para el prompt en /res/values/strings.xml <string name="eligeopcion">elige!</string> 4
Opciones del spinner Array de opciones en /res/values/arrays.xml <resources> <string- array name="opciones"> <item>mensual</item> <item>trimestral</item> <item>semestral</item> <item>anual</item> </string- array> </resources> Asociar opciones al Spinner @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Adapta los datos a la vista Layout para la lista Spinner s = (Spinner) findviewbyid(r.id.spinner); ArrayAdapter adaptador = ArrayAdapter.createFromResource( this, R.array.opciones, android.r.layout.simple_spinner_item); adaptador.setdropdownviewresource( android.r.layout.simple_spinner_dropdown_item); s.setadapter(adaptador); Define el layout para cada item 5
Eventos del spinner No es posible asignar eventos a elementos individuales Manejador de eventos global Comprobaremos la posición pulsada spinner.setonitemselectedlistener(new OnItemSelectedListener() { public void onitemselected(adapterview<?> parent, View view, ); int pos, long id) { // Hacer algo public void onnothingselected(adapterview<?> parent) { // Hacer algo 6
Listas Elemento básico en las aplicaciones Vista ListView Actividad que herede de ListActivity Todas las funcionalidades de una actividad Funcionalidades para el manejo de listas Contiene un adaptador Inicializado con setlistadapter en oncreate Adaptadores Proporciona a la lista los datos a mostrar Vincula datos y vista en pantalla Subclase de BaseAdapter Adaptadores estándar: ArrayAdapter, CursorAdapter 7
Ejemplo de ListActivity Crear actividad como subclase de ListActivity No es necesario llamar a setcontentview public class MiLista extends ListActivity { public void oncreate(bundle icicle) { super.oncreate(icicle); La lista aparece vacía Debemos poblarla de datos mediante un adaptador 8
Adaptador de la lista Crear e inicializar un adaptador Al final del método oncreate Layout por defecto para los elementos de la lista: android.r.layout.simple_list_item_1 Asociamos el adaptador a la lista con setlistadapter String[] valores = new String[] {"C", "Java", "C++", "Python", "Perl", "PHP", "Haskell", "Eiffel", "Lisp", "Pascal", "Cobol", "Prolog"; ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1,valores); setlistadapter(adaptador); Vincula los elementos del array al layout indicado 9
Eventos de la lista Evento onlistitemclick Se invoca al pulsar sobre un elemento de la lista Nos proporciona el índice del elemento pulsado @Override protected void onlistitemclick(listview l, View v, int position, long id) { String elemento = (String)getListAdapter().getItem(position); Toast.makeText(this, elemento + " seleccionado", Toast.LENGTH_LONG).show(); El adaptador nos da acceso a los items de la lista 10
Tipos de listas Encontramos listas de selección única o múltiple ListView listview = getlistview(); // Selección múltiple: listview.setchoicemode(listview.choice_mode_multiple); // Selección única: listview.setchoicemode(listview.choice_mode_single); 11
Personalización de listas Podemos crear nuestro propio layout para los items de una lista Se define como cualquier layout xml ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this, R.layout.layoutfila, R.id.etiqueta, valores); setlistadapter(adaptador); Layout para cada item de la lista Identificador de la vista donde mostrar el dato de cada fila Por ejemplo, nos permite incorporar un icono en cada elemento de la lista Para poblar los distintos elementos del layout con datos podemos utilizar un adaptador de tipo SimpleAdapter Permite vincular distintos datos a diferentes vistas del layout de cada fila 12
Adaptador personalizado (I) Podemos crear nuestro propio adaptador Nos permite personalizar cómo adaptar tipos de datos propios Ejemplo de tipo de datos propio: Tweet public class Tweet { String texto; String usuario; Bitmap imagen; Campos protegidos Getters y setters dan acceso a los campos protegidos public String gettexto() { return texto; public void settexto(string texto) { this.texto = texto;... 13
Adaptador personalizado (II) Definimos el layout para cada item Por ejemplo, en /res/layout/item.xml tvtitulo ivicono tvsubtitulo Ya sólo queda crear el adaptador para vincular cada Tweet al layout de cada item de la lista 14
Adaptador personalizado (III) public class TweetAdapter extends ArrayAdapter<Tweet> { public TweetAdapter(Context context, List<Tweet> objects) { super(context, R.id.tvTitulo, objects); @Override public View getview(int position, View convertview, ViewGroup parent) { if(convertview == null) { LayoutInflater li = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertview = li.inflate(r.layout.item, null); TextView tvtitulo = (TextView) convertview.findviewbyid(r.id.tvtitulo); TextView tvsubtitulo = (TextView) convertview.findviewbyid(r.id.tvsubtitulo); ImageView ivicono = (ImageView) convertview.findviewbyid(r.id.ivicono); Tweet tweet = this.getitem(position); tvtitulo.settext(tweet.gettexto()); tvsubtitulo.settext(tweet.getusuario()); Tipo especializado de array adapter para lista de tweets Devuelve la vista para el item de la lista en position Sólo crea la vista si no existiese previamente, en caso contrario sólo actualiza datos if(tweet.getimagen()!=null) { ivicono.setimagebitmap(tweet.getimagen()); else { ivicono.setimageresource(r.drawable.icon); Obtiene los datos para el item solicitado de la lista return convertview; 15
Menús Menú de opciones Iconos y texto Seis opciones como máximo (más opciones producirá un menú extendido) No muestra checkboxes, botones de radio o atajos Menú extendido Listado vertical con barra de scroll Opciones que no caben en el menú de iconos No muestra iconos, pero sí checkboxes, radio o atajos Submenú Ventana flotante No se permiten submenús anidados 16
Definición del menú Definimos las opciones del menú en XML Recurso de tipo menú (por ejemplo /res/menu/menu.xml) <?xml version="1.0" encoding="utf- 8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/itemagregar" android:icon="@drawable/ic_menu_agregar" android:title="@string/agregar_title"/> <item android:id="@+id/itemborrar" android:icon="@drawable/ic_menu_borrar" android:title="@string/borrar_title"/> <item android:id="@+id/itemver" android:icon="@drawable/ic_menu_ver" android:title="@string/ver_title"/> <item android:id="@+id/itemvolver" android:icon="@drawable/ic_menu_volver" android:showasaction="ifroom" android:title="@string/volver_title"/> </menu> Para cada opción definimos un identificador, un icono (drawable) y una etiqueta (string) Se muestra en el action bar de Android 3.0+ 17
Abrir el menú de opciones Sobrescribimos el método oncreateoptionsmenu de la actividad Crea la vista del menú @Override public boolean oncreateoptionsmenu(menu menu) { MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.menu, menu); return true; Se invoca cuando pulsamos sobre la tecla MENU del móvil Debemos mostrar el menú definido en el XML anterior 18
Eventos del menú Cuando se pulse un botón del menú se avisará al método onoptionsitemselected de la actividad que mostró el menú Podemos sobrescribir este método para recibir los eventos @Override public boolean onoptionsitemselected(menuitem item) { // Seleccionado el item item.getitemid() return true; Podemos obtener el identificador del item pulsado con getitemid Se puede comparar con los identificadores definidos en el XML switch (item.getitemid()) { case R.id.itemAgregar:... break; case R.id.itemBorrar:... break; default: return super.onoptionitemselected(); 19
Menú contextual Podemos asociar un menú contextual a una vista Si mantenemos pulsada la vista 3 segundos aparece el menú Útil para opciones sobre items individuales de listas (editar, borrar) @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); Button vista = (Button)findViewById(R.id.boton); registerforcontextmenu(vista); Debemos registrar la vista sobre la que queramos que aparezca 20
Eventos del menú contextual Hacemos que aparezca el menú contextual @Override public void oncreatecontextmenu(contextmenu menu, View v, ContextMenu.ContextMenuInfo menuinfo) { super.oncreatecontextmenu(menu, v, menuinfo); menu.setheadertitle("menú contextual"); MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.menu_contextual, menu); Respondemos a las pulsaciones de sus items @Override public boolean oncontextitemselected(menuitem item) { super.oncontextitemselected(item); [... hacer algo... ] return false; 21
Preguntas...? 22