Menú Navegación Páginas

El blog de Antonio Leiva sobre diseño y desarrollo de interfaces en Android

ActionBarCompat (Parte 2): Action Views

ActionBarCompat (Parte 2): Action Views
  • Twitter
  • Facebook
  • Google Plus
  • LinkedIn

En la primera parte de esta serie de tutoriales os conté cómo usar ActionBarCompat en nuestros proyectos. Una vez que hayas establecido el tema, extendido ActionBarActivity y añadido algunos elementos al menú, es hora de aprender a usar una Acion View en la barra.

< Part 1: How to use ActionBarCompat

Añadiendo una Action View

Las Action Views son esas vistas tan útiles que pueden ser añadidas sobre la Action Bar cuando el usuario pulsa un elemento del menú. La más típica es la vista de búsqueda, así que será la que explique aquí. Todas las Action Views estándar han sido añadidas a la support library, por lo que necesitarás referenciarlas a ellas en lugar de las del SDK:

    <item
        android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom" />

Recuperar la Action View del menú es un poco diferente. MenuItemCompat hará el trabajo duro esta vez:

    private SearchView mSearchView;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);

        MenuItem searchItem = menu.findItem(R.id.action_search);
        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);

        return true;
    }

Ahora hay que hacer que se muestre la vista de búsqueda cuando el usuario pulse la lupa. No hay diferencias con respecto a la Action Bar nativa:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()){
            ...
            case R.id.action_search:
                mSearchView.setIconified(false);
                return true;
            ...
        }

        return false;
    }

ActionBarCompat - ActionView

Puedes añadir un OnQueryTextListener para detectar la escritura del usuario en el SearchView

public class MainActivity extends ActionBarActivity implements SearchView.OnQueryTextListener {
    ...
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        ...
        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
        mSearchView.setOnQueryTextListener(this);

        return true;
    }
    ...
    @Override
    public boolean onQueryTextSubmit(String s) {
        Toast.makeText(this, s, Toast.LENGTH_LONG).show();
        return true;
    }

    @Override
    public boolean onQueryTextChange(String s) {
        return false;
    }
}

Conclusión

Aparte del uso de nuevas clases y unos pocos cambios de código, el proceso de añadir una nueva action view es muy similar y sencillo. Si has hecho esto antes, no te supondrá ningún problema. Recuerda que puedes consultar el código completo en Github.

En el siguiente tutorial, explicaré cómo reemplazar ActionBarSherlock por ActionBarCompat. Usaré mi App Bandhook como base para explicar el proceso completo.

¿Te ha gustado? Compártelo

8 Comentarios

  1. Hola, al ejecutar en la siguente linea obtengo como resultado un null:
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    el searchItem lo recupera sin problemas, pero al obtener la actionview no es capaz de hacerlo y deja como null el m SearchView, ¿alguien podría decirme a que es debido?

    • Sólo se me ocurre que el SearchView que hayas importado sea el estándar y no el de la v7. Comprueba eso por si acaso, aunque supongo que daría error.

  2. buenas tardes, tengo una pregunta
    con los eventos de SearchView.OnQueryTextListener es posible capturar lo que se escribe, me podria decir como hago que aparesca como si fuera un autocomplete.
    gracias

  3. Muy buen tuto, como siempre ;)

    Esperando impaciente el ‘cómo reemplazar ActionBarSherlock por ActionBarCompat’!

  4. Buenos dias!, excelente articulo!

    Una pregunta, lo que pasa es que siguiendo tus articulo, me quedo en la parte donde, ya creamos el XML (o cambiamos el que usa pro default) para colocar el icono de busqueda y que pueda cambiar al puslarlo.

    Procedi a la parte donde inflas el menu, y generamos el MenuItem, no logro darle el a menu.findItem(R.id.action_Search), no lo encuentra en R, ni en ningun lado el ID, bueno, investigando, lei que era porque esa etiqueta(en el XML) no pertenece a target de compilacion, estoy trabajando para android minimo de 2.3, y que por eso R. no puede generarse correctamente.

    De hecho, si le doy clean, asi, R se borra y no se vuelve a generar hasta que elimino el Item de search, en el XML, ahora si se genera.

    Mi pregunta es, si sabes como resolver este detalle?, o, si has leido algun lugar donde esta resuelto?

    De antemano te agradezco la ayuda y el tiempo.

    • Eso tiene pinta de ser un típico problema de compilación del Eclipse. La mejor solución es cambiarse a IntelliJ xD, pero si no, creo que la única solución es borran todas las carpetas autogeneradas y hacer clean hasta que decida funcionar

  5. con madre tu blog pero tengo una duda hermano donde modifico el estilo del action bar el background del action bar del titulo,etc en resumen el estilo

  6. Hola como estas? muchas gracias por los tutoriales, me sirven mucho para aprender, de ActionBar. saludos desde Jujuy, Argentina

Trackbacks/Pingbacks

  1. ActionBarCompat (Parte 1): aprende cómo usarla - […] ActionBarCompat (Parte 2): Action Views - […] la primera parte de esta serie de tutoriales os conté cómo usar …
  2. ActionBarCompat (Parte 3): Migrando desde ActionBarSherlock - […] aprender algunas reglas básicas para trabajar con ActionBarCompat, probablemente necesitarás migrar algunas aplicaciones de ActionBarSherlock a ActionBarCompat, ya […]

Deja tus comentarios