Kurs Android (8)

Autor: Damian Chodorek • Opublikowany: 1 kwietnia 2015 • Ostatnia aktualizacja: 12 czerwca 2015 • Kategoria: android, kursy

Pasek nawigacji/akcji czyli Action Bar. Część 1.

Czym jest Action Bar?

Jest to pasek zlokalizowany na górze aplikacji.

Może pokazywać tytuł aplikacji, ikony, przyciski oraz dostępne opcje.

Pasek akcji jest dostępny w API od wersji 11. Dla starszych wersji, w celu wyświetlenia listy dostępnych opcji, należy użyć sprzętowego przycisku opcji. W pasku akcji taki przycisk jest ciągle widoczny i jest zlokalizowany w prawym górnym rogu.

Rozwiązanie to jest znacznie lepsze, ponieważ użytkownik widzi natychmiast, że dostępnych jest więcej opcji i nie musi myśleć o wciskaniu przycisku na telefonie, aby to sprawdzić.

Tworzenie elementów

Elementy, które dostępne są w pasku akcji nazywane są z akcjami (ang. actions). Można stworzyć je bezpośrednio w kodzie, ale typowo robi się to w pliku XML, który znajduje się w katalogu res/menu/.

Na potrzeby tej lekcji stwórz sobie nowy projekt Android, w którym na bieżąco będziesz testował to, o czym piszę. Ja nazwałem go com.damianchodorek.kurs.android8. Uzupełnij plik res/menu/main.xml zgodnie z poniższym kodem.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.damianchodorek.kurs.android8.MainActivity" >

    <item
        android:id="@+id/action_add"
        android:icon="@android:drawable/btn_star"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="Dodaj do ulubionych"/>
    <item
        android:id="@+id/action_settings"
        android:title="Ustawienia">
    </item>

</menu>

Jeżeli uruchomisz aplikację, w pasku nawigacji zobaczysz ikonę gwiazdki oraz rozwijane menu z listą dostępnych opcji. Zajrzyj do pliku MainActivity.java i przyjrzyj się metodzie onCreateOptionsMenu(). Jest uruchamiana podczas tworzenia aktywności. Jej zadaniem jest wskazanie, z którego pliku mają zostać pobrane elementy paska akcji.

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

Reakcja na wciśnięcie przycisku

Wiemy już jak umieścić własne elementy w pasku akcji. Metoda onOptionsItemSelected() służy do reagowania na wciśnięcie przycisku paska. Przeważnie sprawdza się ID elementu, który został wciśnięty. Jest on przekazany jako parametr funkcji.

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    // zareaguj na podstawie ID itemu
    switch (item.getItemId()) {

    case R.id.action_add:
        Toast.makeText(this, "Wybrano: Dodaj do ulubionych",
                Toast.LENGTH_SHORT).show();
        break;

    case R.id.action_settings:
        Toast.makeText(this, "Wybrano: Ustawienia", Toast.LENGTH_SHORT)
                .show();
        break;

    default:
        break;
    }

    return true;
}

Przydatne operacje na pasku akcji

Pierwszą operacją, która może być przydatna, jest możliwość dynamicznego schowania/pokazania paska akcji. Dodamy przycisk, który będzie na zmianę ukrywał/pokazywał pasek. W pliku res/layout/activity_main.xml dokonaj zmian zgodnie z poniższym kodem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onButtonClicked"
        android:padding="30dp"
        android:text="ukryj/pokaż" />

</LinearLayout>

Teraz dodaj poniższą funkcję w pliku MainActivity.java.

public void onButtonClicked(View v) {
    // pobieramy instancje Action Bara
    ActionBar actionBar = getActionBar();

    // sprawdzamy czy jest ukryty/widoczny
    if (actionBar.isShowing()) {
        // chowamy go
        actionBar.hide();
    } else {
        // pokazujemy go
        actionBar.show();
    }
}

Uruchom aplikację i sprawdź jak działa.

Kolejną przydatną operacją jest ustawienie własnego tła. Służy do tego metoda setBackgroundDrawable(). Przykład poniżej.

actionBar.setBackgroundDrawable(getResources().getDrawable(
    R.drawable.ic_launcher));

Jako tło paska ustawiamy domyślną ikonę aplikacji, co oczywiście będzie wyglądać fatalnie, ale przynajmniej wiemy jak skorzystać z metody. Warto wspomnieć o metodzie getResources() – należy do klasy Activity i pozwala dostać się do różnych zasobów.

Przykładowo jeżeli utworzymy plik res/values/my_values.xml, który wygląda jak poniżej

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <bool name="my_bool">true</bool>

    <string name="my_string">tekst</string>

    <color name="my_color">#fff</color>

    <dimen name="my_dimen">16dp</dimen>

</resources>

aby dostać się do kolejnych wartości, które zostały w nim zdefiniowane możemy zrobić to jak na poniższym przykładzie.

getResources().getBoolean(R.bool.my_bool);
getResources().getString(R.string.my_string);
getResources().getDimension(R.dimen.my_dimen);
getResources().getColor(R.color.my_color);

Wróćmy do przydatnych operacji. Istnieje możliwość rozdzielenia paska akcji na dwa paski. Jeden będzie na górze, drugi na dole w zależności od tego czy pasek jest wystarczająco szeroki, aby pomieścić wszystkie elementy. Aby to zrobić dodaj w pliku AndroidManifest.xml wpis android:uiOptions="splitActionBarWhenNarrow".

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:uiOptions="splitActionBarWhenNarrow" >

Tak wygląda Action Bar gdy nie wystarcza miejsca.

A tak, gdy miejsca jest pod dostatkiem.

Sprawdź co dzieje się po wciśnięciu przycisku ukryj/pokaż.

W tej części to wszystko. Dowiedziałeś się jak stworzyć i zarządzać Action Barem. Poznałeś także kilka operacji, które mogą być pomocne. W kolejnej części opiszę bardziej zaawansowane zagadnienia.

część 9