Sep 26, 2012

Android SherlockActionBar: opciones de menú desplegables

Buenas, hace poco descubrimos la librería SherlockActionBar. La cual es muy cómoda ya que nos ayuda a crear aplicaciones para Android 2.x con características de Android 4. A parte de eso simplifica mucho el proceso de integrar el look de ICS en anteriores versiones.

Poco a poco voy descubriendo nuevas funcionalidades. Una de ellas son las opciones de menú desplegables. ¿Qué es esto? Imaginaros que teneis una aplicación con un menú superior con sus opciones. Ya con unos cuantos iconos en un móvil no queda sitio para poner una barra para buscar algo.

Es aquí donde entra en juego nuestra opción del menú desplegable. Con un botón para buscar en el menú, al pulsar sobre el, aparece en el menú un Textbox para poder hacer una búsqueda en la aplicación.

Esto no es muy complejo hacerlo desde cero, pero si que es más complejo que si no lo hacemos con ayuda de esta librería.

Vamos a ver como implementarlo en unos sencillos pasos. Como en otros ejemplos de esta librería es necesario haber añadido la SherlockActionBar a nuestro proyecto.

Lo primero de todo es crear en la carpeta menú un archivo al que llamaremos menu_app.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/menu_search"        
        android:title="Search"
        android:icon="@drawable/ic_search"
        android:showAsAction="always|collapseActionView"
        android:actionLayout="@layout/collapsible_edittext"/>
 
</menu>

Este menú solo tiene nuestro item, al cual le ponemos una imagen de una lupa, ic_search, esta lo podéis encontrar dentro de la carpeta drawable de las demos de la SherlockActioBar. Le damos un id, un texto, seteamos un layout que veremos ahora que es lo que se muestra al expandir el menú y en showAsAction le indicamos que es de tipo collapseActionView.

En layout creamos un archivo con nuestro EditText que mostraremos al pulsar sobre el icono de la lupa. Le llamaremos collapsible_edittext.xml:

<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/txtSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="Search" android:singleLine="true" android:imeOptions="actionSearch" />

De momento todo sigue siendo muy simple, un layout con nuestro EditText que será donde introduzcamos el texto a buscar.

Ahora en nuestra Activity vamos a inicializar el menú y acceder al texto de nuestro EditText. Esto lo hacemos en el evento onCreateOptionsMenu. Esto es cuando se crea el menú.

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getSupportMenuInflater().inflate(R.menu.menu_app, menu);
        
        MenuItem menuSearch = menu.findItem(R.id.menu_search);
        
        final EditText searchText = (EditText) menuSearch.getActionView().findViewById(R.id.txtSearch);
        searchText.setOnEditorActionListener(new OnEditorActionListener() {   
   public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
    if(event.getKeyCode() == KeyEvent.KEYCODE_ENTER){
     //Aquí podeis llamar a un método que busque en vuestra aplicación por el texto del cajetín como se hace a continuación
     //searchItems(searchText.getText().toString());
     return true;
    }
    return false;
   }
  });
       
        return super.onCreateOptionsMenu(menu);
    }

El inicializar el menú es muy sencillo. Cargamos nuestro menu con getSupportMenuInflater().inflate y accedemos al item de nuestro menú buscando en «menu» que es donde acabamos de cargar el menú.

Luego se busca el EditText del layout y ya podemos trabajar con el. Aquí lo que haremos es definir un listener que escucha las acciones de este EditText. Cuando sobre el se pulse el enter en el teclado se puede lanzar una búsqueda o hacer lo que vosotros necesiteis.

Como veis, con muy poco se obtiene un muy buen resultado para un buscador integrado en un menú.

Bio
Latest Posts

Daniel Ferrer Delgado

Técnico en Administración de Sistemas y Desarrollo de Aplicaciones. Amigo de sus amigos, y una mente inquieta que no puede dejar un ordenador de lado porque necesita programar aplicaciones Android o aplicaciones en general, además de páginas web. Nuestro programador de cabecera y espero que también el vuestro.