Android Programowanie aplikacji. Rusz głową! Wydanie II

526

Rozdział 12.

Przyciski FAB i paski snackbar

Przyciski FAB i paski snackbar

W aktywności

OrderActivity

planujemy wprowadzenie jeszcze dwóch

modyfikacji związanych z biblioteką wsparcia wzornictwa: dodamy do

niej przycisk FAB oraz pasek

snackbar.

FAB to skrót do angielskich słów

floating action button — pływający

przycisk akcji. Przycisk FAB to okrągła ikona unosząca się nad

interfejsem użytkownika aplikacji, umieszczona na przykład w prawym

dolnym rogu ekranu. Przyciski tego typu służą do promowania operacji

tak często używanych lub tak ważnych, że dostęp do nich ma być

bezproblemowy i oczywisty.

Paski snackbar

przypominają nieco komunikaty

Toast

, lecz dodatkowo

zapewniają możliwość interakcji. Są one wyświetlane u dołu ekranu

i zawierają krótkie komunikaty tekstowe z informacją o obecnie

wykonywanej operacji. Inaczej niż w przypadku komunikatów

Toast

do

pasków

snackbar można dodawać akcje, takie jak polecenie cofnięcia

wykonanej czynności.

Do aktywności OrderActivity

dodamy przycisk FAB i pasek snackbar

Zajmiemy się teraz dodaniem do aktywności

OrderActivity

przycisku

FAB. Kiedy użytkownik go kliknie, wyświetlimy pasek

snackbar

z komunikatem. W rzeczywistej aplikacji przycisku FAB użylibyśmy

raczej do wykonania jakiejś akcji, takiej jak zapisanie zamówienia na

pizzę; jednak w tej aplikacji koncentrujemy się jedynie na przedstawieniu

sposobów korzystania w tworzonych aplikacjach z różnych widżetów.

Oto jak będzie wyglądać nowa wersja aktywności

OrderActivity

:

To jest przycisk FAB

używany w aplikacji

Kalendarz Google. Unosi

się on w prawym dolnym

rogu ekranu i pozwala na

dodawanie zdarzeń.

To jest pasek snackbar wyświetlany

w aplikacji Chrome po zamknięciu

oglądanej strony WWW. Kliknięcie akcji

Cofnij umieszczonej na pasku powoduje

ponowne wyświetlenie strony.

Oto przycisk FAB, którego

dodanie planujemy.

Po kliknięciu przycisku

zostanie wyświetlony pasek

snackbar. W momencie

wyświetlania paska snackbar

przycisk FAB zostanie

przesunięty do góry.



¨

Przewijany pasek narzędzi



¨

Zwijany pasek narzędzi



¨

Przycisk FAB

¨

Pasek snackbar

Biblioteka wsparcia wzornictwa

527

jesteś tutaj 

Dodanie ikony przycisku FAB

Zaczniemy od dodania do projektu ikony, którą następnie wyświetlimy na przycisku

FAB. Można w tym celu stworzyć swoją własną, całkowicie nową ikonę bądź też

wykorzystać jedną z ikon przygotowanych przez firmę Google, dostępnych na

stronie

https://design.google.com/icons/.

W naszej przykładowej aplikacji użyjemy ikony „done”,

ic_done_white_24dp

,

i dodamy jej kopie do katalogów

drawable* w naszym projekcie — po jednej dla

każdej gęstości ekranu. System zdecyduje, którą wersję ikony zastosować podczas

działania aplikacji, na podstawie gęstości ekranu używanego urządzenia.

A zatem, w eksploratorze Android Studio otwórz widok

Project, zaznacz katalog

app/src/main/res, a następnie utwórz w nim katalogi: drawable-hdpi, drawable-mdpi,

drawable-xhdpi, drawable-xxhdpi oraz drawable-xxxhdpi, oczywiście o ile jeszcze

nie istnieją. Następnie z przykładów dołączonych do książki skopiuj pliki

ic_done_

white_24dp.png

do odpowiednich katalogów, na przykład ikonę z katalogu drawable-

hdpi

skopiuj do swojego projektu, do katalogu drawable-hdpi.

Jak dodać przycisk FAB do układu?

Przycisk FAB można dodać do istniejącego układu, używając następującego kodu:



¨

Przewijany pasek narzędzi



¨

Zwijany pasek narzędzi



¨

Przycisk FAB

¨

Pasek snackbar

<android.support.design.widget.CoordinatorLayout ...>

...

<android.support.design.widget.FloatingActionButton

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_gravity=”end|bottom”

android:layout_margin=”16dp”

android:src=”@drawable/ic_done_white_24dp”

android:onClick=”onClickDone” />

</android.support.design.widget.CoordinatorLayout>

Tej ikony

użyjemy

na naszym

przycisku

FAB.

Kod pozwalający na dodanie

przycisku FAB jest bardzo

podobny do kodu umożliwiającego

dodanie przycisku ImageButton.

Wynika to z tego, że

FloatingActionButton jest klasą

pochodną klasy ImageButton.

Jeśli używamy przycisku FAB w aktywności,

możemy zastosować atrybut onClick,

by określić metodę, która powinna zostać

wywołana po jego kliknięciu.

Powyższy kod dodaje przycisk FAB do dolnego, końcowego rogu ekranu,

używając przy tym marginesów o wielkości

16dp

. Atrybut

src

określa, że

ikoną wyświetlaną na przycisku będzie zasób graficzny

ic_done_white_24dp

.

Dodatkowo zastosowaliśmy atrybut

onClick

, aby określić, że po kliknięciu

przycisku ma zostać wywołana metoda

onClickDone()

aktywności używającej

danego układu. Tę metodę zaimplementujemy nieco później.

Przyciski FAB zazwyczaj dodaje się wewnątrz układu

CoordinatorLayout

, gdyż

zapewnia to możliwość koordynowania ruchów pomiędzy różnymi widokami

stosowanymi w układzie. W naszym przykładzie oznacza to, że przycisk FAB będzie

mógł zostać przesunięty ku górze w momencie wyświetlania paska

snackbar.

Na następnej stronie przedstawiony zostanie kod układu aktywności

OrderActivity

.

Wytyczne Material

Design zalecają, by

na jednym ekranie

umieszczać nie więcej

niż jeden przycisk FAB.