Action bar

Action Bar

Què és

La barra d'accions Action Bar, també coneguda com App Bar eés un dels elements de disseny més importants en les activities de la nostre app. Es tracta de la barra superior que trobem en moltes de les apps per a Android que s'utilitzen avui dia. Aquest fet fa possible que els usuaris entenguin ràpidament la manera d'usar-la i tinguin una experiència agradable. Fins a * Mal'aparició de l'element Toolbar, a la versió d'Android 5.0, l'ActionBar es trobava hard coded a la part superior de la nostre pantalla. Es possible habilitar-la i deshabilitar-la via theme o tema. Al tema per defecte que utilitza Android apareix habilitada inicialment.

Anatomia de l'ActionBar

L'ActionBar consta de les següents parts:

1. Icona de l'App: Un espai exclusiu per a donar-li identitat a la App i mostrar l'icona que es desitgi. (Opcional).
2. Títol: Normalment aquest espai conté el nom de la pantalla actual, es una manera d'indicar a l'usuari laubicació on es troba.
3. Botons d'acció: Accés a les accions més importants i freqüents per a l'usuari. Es freqüent trobar-hi en aquest apartat el botó de cerca (lupa).
4. Menú de desplegament o overflow: Accés a totes les altres accions que l'usuari pot realitzar des de l'ActionBar. Es representa amb una icona amb 3 punts verticals i al polsar es despleguen la resta d'opcions que no es troben a l'apartat de botons d'acció.

Antic botó d'opcions

Per als dispositius antics amb API 11 i versions inferiors, es pot optar per l'opció d'utilitzar el botó Option del dispositiu físic. Aquest botó mostra les opcions del menú un cop és polsat. L'ús de l'ActionBar o Toolbar és molt superior al d'aquest botó, ja que amb l'us del botó l'usuari no pot reconèixer quines opcions te disponibles a primera vista ràpidament.

Objectes a l'ActionBar

El següent codi mostra un exemple d'una ActionBar implementada amb dos objectes, el botó de refrescar, amb icona, i el botó de ajustos, amb només el títol.

Fragment de codi exemplificador ( )

Informació addicional

• Link al repositori: Pàgina principal d'Android
• Anotacions: No
• Vegeu també: No

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/action_refresh"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_action_refresh"
        android:title="Refresh"/>
    <item
        android:id="@+id/action_settings"
        android:title="Settings">
    </item>

</menu>

 

Per tal de que el menú d'objectes definit a l'arxiu XML sigui mostrat, necessitem realitzar inflate a l'arxiu del menú. L'activity crea entrades per a l'ActionBar amb el mètode onCreateOptionsMenu().

Fragment de codi exemplificador ( )

Informació addicional

• Link al repositori: Pàgina principal d'Android
• Anotacions: No
• Vegeu també: No

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.mainmenu, menu);
        return true;
    }

 

Atribut showAsAction

Aquest atribut es un dels més importants ja que es l'encarregat de decidir on i com han d'aparèixer els elements d'acció dins la ActionBar. Els únics valors que poden tenir els ítems de barra d'accions són:

1. ifRoom: Només mostra l'objecte en la part dels botons d'acció si hi ha espai per a aquest. Si no hi ha suficient espai per a que hi capiga l'objecte, apareix al menú de desplegament. En cas que dos o més objectes tinguin el valor ifRoom i no hi càpiguen tots, els objectes amb el valor orderInCategory més elevat seran mostrats amb prioritat.
2. withText: També inclou el títol en forma de text de l'acció de l'objecte.
3. never: Mai mostra l'objecte com a opció i es mostrarà sempre al menú desplegable.
4. always: L'objecte es mostrarà sempre a la opció dels botons d'accions. És recomanable no fer ús d'aquest valor ja que pot causar solapament entre botons en cas que el dispositiu no disposi d'espai suficient per a mostrar-ho.
5. collapseActionView: Permet que l'objecte sigui mostrat però en forma de widget. Aquest botó pot ser dinàmic. Un dels més comuns és el botó de lupa, que serveix per buscar elements, el qual s'expandeix al ser polsat.

Es possible l'us de pipes | per incloure el valor d'un d'aquests atributs combinat amb un altre. L'us més freqüent es col·locar primer el valor withText seguit del ifRoom, de la següent manera:

android:showAsAction="withText|ifRoom"

Reaccionant a la selecció d'accions

Un cop polsem un objecte del menú, el mètode onOptionsItemSelected() es cridat en la activity en qüestió. Aquest mètode rep l'objecte que s'ha seleccionat com a parametre. En aquest exemple msotrem un missatge Toast a la pantalla del dispositiu un cop es polsat cada botó.

Fragment de codi exemplificador ( )

Informació addicional

• Link al repositori: Pàgina principal d'Android
• Anotacions: No
• Vegeu també: No

@Override
public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
  // action with ID action_refresh was selected
  case R.id.action_refresh:
    Toast.makeText(this, "Refresh selected", Toast.LENGTH_SHORT)
        .show();
    break;
  // action with ID action_settings was selected
  case R.id.action_settings:
    Toast.makeText(this, "Settings selected", Toast.LENGTH_SHORT)
        .show();
    break;
  default:
    break;
  }

  return true;
}

 

Tool Bar

Què és

La Toolbar substitueix a l'ActionBar a partir de la versió d'Android 5.0 (API 21). Aquesta, a part de realitzar totes les funcions que podíem fer anteriorment amb l'ActionBar, ens permet tenir molta més llibertat des del punt de vista de desenvolupador a l'hora de manipular aquest component. El gran avantatge d'aquest element es que, a diferència de l'ActionBar, la Toolbar pot ser col·locada a un fitxer de layout (XML) a part, cosa que ens permetrà col·locar-la al lloc de la pantalla que desitgem, modificar la seva mida, introduir-la dins d'un altre element, fer-la desaparèixer al lliscar la pantalla cap avall o exportar el seu fitxer per a poder ser usat en diferents pantalles entre altres usos. Entre les accions més usades de la Toolbar trobem la navegació entre les diferents pantalles d'una l'aplicació.

Toolbar en dispositius inferiors a API 21

La Toolbar va ser introduida a Android 5.0 (API 21). Si vol ser utilitzada a dispositius amb una versió anterior d'Android s'ha d'utilitzar mitjançant la biblioteca de support appcompat-v7. Per a afegir la Toolbar en aquests dispositius cal afegir la dependència com.android.support:appcompat al fitxer build del Gradle. Per exemple:

Fragment de codi desenvolupat per l'autor ( )

Informació addicional

• Link al repositori: Derreres versions de les Llibreries
• Anotacions: No
• Vegeu també: No

compile `com.android.support:appcompat-v7:22.2.0`

 

Tabbed ActionBar

Què és

Exemple de Tabbed ActionBar

L'actionBar d'Android es pot estendre per a mostrar una barra addicional per a facilitar la navegació entre pantalles i per a saber en quina ens trobem. S'empra per a complementar la navegació mitjançant el ViewPager en algunes aplicacions, especialment en aquelles que tenen un nombre fix de pestanyes i que ens interessa que l'usuari conegui. El nombre de pestanyes sol ser fix i petit; per tant hem de veure les pestanyes com un menú entre opcions de l'aplicació i no pas com una manera de moure'ns per una llista d'elements (com en el cas del ViewPager)..

Implementació

En el moment de crear l'activitat es l'hora d'indicar que volem visualitzar un espai a l'actionBar per les diferents pestanyes que tindrà l'aplicació.

Fragment de codi exemplificador ( )

Informació addicional

• Link al repositori: Action Bar android
• Anotacions: No
• Vegeu també: Appbar android i Tabbed Action Bar

@Override
public void onCreate(Bundle savedInstanceState) {
    // Recuperem l'actionBar que porta per defecte tota aplicació Android.
    final ActionBar actionBar = getActionBar();

    [...]

    // Especifiquem que les pestanyes s'han de mostrar a l'Action bar.
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // Creem el listener de les pestanyes que es crida quan l'usuari canvia entre pestanyes.
    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // actua al mostrar la pestanya seleccionada.
        }

        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // actua quan s'amaga la pestanya al triar-ne una altra.
        }

        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // actua quan una pestanya es torna a triar. Normalment sense ús.
        }
    };

    // Definim tres pestanyes, amb el seu text i especificant el seu listener de pestanyes.
    for (int i = 0; i < 3; i++) {
        actionBar.addTab(
                actionBar.newTab()
                        .setText("Tab " + (i + 1))
                        .setTabListener(tabListener));
    }
}

 

Arribats a aquest punt, tenim un conjunt de pestanyes amb nom que estenen l'actionBar i podem clicar sobre d'elles però el contingut encara no canvia. A continuació definirem què volem que faci l'aplicació quan triem una de les pestanyes que hem creat.

Fragment de codi exemplificador ( )

Informació addicional

• Link al repositori: Tabbed Action Bar
• Anotacions: No
• Vegeu també: No

    [..]
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
        // Quan la pestanya es seleccionada, canvia a la pàgina 
        // corresponent del ViewPager.
        mViewPager.setCurrentItem(tab.getPosition());
    }
    [...]

 

Ara ja podem moure'ns per l'aplicació triant la pestanya desitjada, ja que el ViewPager durà a terme la càrrega del Fragment corresponent. Només en resta seleccionar la pestanya adequada cada cop que l'usuari llisca (swipe) entre pàgines del ViewPager.

Fragment de codi exemplificador ( )

Informació addicional

• Link al repositori: Tabbed Action Bar
• Anotacions: No
• Vegeu també: No

    [...]
    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // Quan llisquem entre pàgines, triem
                    // la pestanya corresponent.
                    getActionBar().setSelectedNavigationItem(position);
                }
            });
    [...]

 

Finalment ja tenim el ViewPager i les pestanyes de la ActionBar lligades entre elles de manera que una actualitzarà l'altra quan l'usuari es mogui per qualsevol dels dos elements.

Referències

• Android ActionBar
• Android Toolbar
• Edició de la App Bar
• Viquillibres ViewPager i Tabbed ActionBar