Android Action Bar

Android Action Bar
Adrian Skrobacz
AGH Wydział Elektrotechniki, Automatyki,
Informatyki i Inżynierii Biomedycznej
1.12.2015
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
1 / 23
Czym jest Action Bar?
Opis
Action Bar to jedna z najważniejszych cz˛eści interfejsu użytkownika.
Zanajduje sie˛ praktycznie w każdej aplikacji. Widczny jest najcz˛eściej
na górze ekranu jako pasek z nazwa˛ aktywności oraz szeregiem
przycisków.
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
2 / 23
Dlaczego nie używać Action Bar’a?
Action Bar jest już przestażałym komponentem, który miał małe
możliwości. Nie za bardzo dało sie˛ zmodyfikować jego wyglad,
˛
położenie itp. Na szcz˛eście został zastapiony
˛
przez Toolbar, który
można znaleźć w support library v7. Nie posiada on już wad swojego
poprzednika, a co najważniejsze jest zwyczajnym ViewGroup co
oznacza, że możemy go dodać w dowolnym miejscu w naszym pliku
xml wygladu.
˛
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
3 / 23
Elementy Toolbar’a
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
4 / 23
Przejdźmy do kodu
Na poczatku
˛
aby pozbyć sie˛ naszego domyślnego, przestarzałego i
brzydkiego Action Bar’a trzeba dodać kilka wpisów głównym stylu
aplikacji:
<style name="AppTheme"
parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>
W tym przykładzie nasza aplikacja nie bedzie
˛
miala Action Bar’a,
ponieważ podziedziczyliśmy po stylu NoActionBar. Można też
wyłaczyć
˛
go dodajac
˛ wpisy w stylu:
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
5 / 23
Dodajemy nasz Toolbar do layout’u
Dobra˛ praktyka˛ jest stworzenie osobnego pliku xml z layout’em tylko
dla naszego toolbara np. plik toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
Zwróćcie uwage˛ na atrybut background bez niego nasz Toolbar
bedzie
˛
przeźroczysty.
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
6 / 23
Dodajemy nasz Toolbar do layout’u cz. 2
Tak przygotowany plik możemy/powinniśmy dodać do każdego
naszego pliku layout’u aktywności:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout ...>
<include
android:id="@+id/toolbar"
layout="@layout/toolbar"/>
<Button
android:layout_below="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
</RelativeLayout>
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
7 / 23
Dodajemy nasz Toolbar do layout’u cz. 3
Ostatnim krokiem jaki musimy wykonać, to powiedzenie naszej
aktywności, że od tej pory naszym Action Bar’em jest nasz piekny
˛
Toolbar:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actvity_main);
Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
8 / 23
Toolbar przydatne metody
@Override
protected void onCreate(Bundle savedInstanceState) {
...
setSupportActionBar(toolbar);
//Pokaż przycisk wstecz <getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//Dodaj ikon˛
e do Toolbar’a
getSupportActionBar().setIcon(R.mipmap.ic_launcher);
...
}
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
9 / 23
Menu
Jedna˛ z podstawowych funkcji Toolbara jest udostepnianie
˛
menu
aplikacji. Aby stwożyć menu trzeba wykonać kilka kroków:
z Stworzyć plik z naszym menu w katalogu menu w resources
z Nadpisać metode˛ onCreateOptionsMenu(Menu menu) w
aktywności
z Nadpisac metode˛ onOptionsItemSelected(MenuItem
item) w aktywności, w celu obsługi kliknieć
˛ na poszczególne
elementy menu
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
10 / 23
Definiowanie menu w xml
Przykładowy plik z menu(menu.xml):
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/okitem"
android:title="@string/ok"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/search"
android:icon="@android:drawable/ic_menu_search"
android:title="@string/search"
app:showAsAction="always"/>
<item
android:id="@+id/settings"
android:orderInCategory="100"
android:title="@string/settings"
app:showAsAction="never"/>
</menu>
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
11 / 23
Nadpisujemy metody w aktywności
Najpierw nadpisujemy metode˛ onCreateOptionsMenu, która
stworzy obiekt Menu z naszego pliku xml.
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
12 / 23
Nadipisujemy metody w aktywności cz. 2
Nastepnie
˛
nadpisujemy
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getItemId()==R.id.search) {
Toast.makeText(this, R.string.clicked, Toast.LENGTH_SHOR
return true;
}
return super.onOptionsItemSelected(item);
}
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
13 / 23
Nadipisujemy metody w aktywności cz.
3(opcjonalnie)
Jeśli chcemy dynamicznie modyfikować nasze menu dobrym na to
miejscem jest metoda onPrepareOptionsMenu. Na przykład
możemy usunać
˛ jakis element:
public boolean onPrepareOptionsMenu(Menu menu) {
menu.removeItem(R.id.okitem);
return true;
}
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
14 / 23
Menu podsumowanie
W ten oto sposób mamy działajace
˛ menu. Warto zaznaczyć, że:
z elementy menu moga˛ mieć różne typy np. element z
checkbox’em.
z w menu można zagnieżdżać dodajac
˛ wewnatrz
˛ item kolejny
menu
z elementy w menu wystepuj
˛ a˛ w kolejności wystepowania
˛
w pliku
xml chyba, że zdefiniujemy inna˛ kolejność poprzez atrybut
orderInCategory(sortowanie od 0 w wzwyż)
z elementu menu można grupować tag’iem group
z całe menu mozna zbudować też z kodu
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
15 / 23
CAB czyli Contextual Action Mode
Co to jest
Z perspektywy użytkownika jest to nowy Toolbar, który pojawia sie˛
na/zamiast naszego Toolbara, na czas jakiejś akcji i pozwala na
dodatkowe operacje. Dobrym przykładem kiedy CAB wkracza do akcji
jest kopiowanie tekstu. CAB wtedy pojawia sie˛ na naszym Toolbarz’e z
przyciskami pozwalajacymi na skopiowanie, wyciecie
˛
itp. tekstu.
(a) Bez CAB
A. Skrobacz (AGH EAIIB)
Android Action Bar
(b) CAB
2015
16 / 23
CAB implementacja
Implementacja CAB sprowadza sie˛ do zaimplementowania interfejsu
ActionMode.Callback. Aby uruchomić CAB wystarczy wywołac na
aktywności metode˛
startSupportActionMode(ActionMode.Callback) lub
startActionMode(ActionMode.Callback) spowoduje to
wyświetlenie CAB i wywołanie odpowiednich metod w naszym
callback’u.
Warto wspomnieć, że aby CAB poprawnie sie˛ wyświetlał na Toolbarz’e
należy dodać w stylach wpis:
<item name="windowActionModeOverlay">true</item>
W przeciwnym wypadku wyświetli sie˛ on nad Toolbar’em, co nie jest
pożadanym
˛
efektem.
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
17 / 23
ActionView
ActionView pozwalaja˛ na dodanie do menu Toolbara zamiast samych
ikonek i tesktu także własnego layoutu. Można go podac przy definicji
menu w xml’u za pomoca˛ atrybutu actionLayout. Można także
zimplementowac własny ActionView i podac pełna˛ nazwe˛ klasy w
atrybucie actionViewClass
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
18 / 23
SearchView
W Androidzie znajdziemy gotowy ActionView o nazwie SearchView
implementujacy
˛ funkcjonalność wyszukiwarki.
<item
android:id="@+id/search"
android:icon="@android:drawable/ic_menu_search"
android:title="@string/search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
Dobieranie sie˛ do SearchView z poziomu aktywności(metoda
onCreateOptionsMenu):
SearchView searchView = (SearchView) menu.findItem(R.id.search).
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
19 / 23
ActionProvider
Najlepszym przykładem i opisem bedzie
˛
ShareActionProvider.
Każdy z chyba kojaży przycisk Udostepnij,
˛
który od czasu do czasu
pojawia sie˛ w Toolbar’ach aplikacji i pozwala nam podzielić sie˛ ze
światem naszym zdjeciem
˛
:). To właśnie jest
ShareActionProvider. Różnica˛ pomiedzy
˛
ActionProvider, a
ActionView jest to, że action view działa w obrebie
˛
Toolbar’a,
natomiast ActionProvider ma pełna˛ kontrole nad tym jak i gdzie
wyświetla. Jak sie˛ tworzy i obsługuje ActionProvider’a? Odsyłam
do dokumentacji :):
z ActionProvider
z ShareActionProvider
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
20 / 23
Dwa słowa o wodotryskach
W bibliotece google com.android.support:design znajdziemy wiele
ciekawych i pomocnych klas do stworzenia animacji dla Toolbar’a.
Warto zajrzeć na klasy:
z android.support.design.widget.CoordinatorLayout
z android.support.design.widget.AppBarLayout
z android.support.design.widget.
CollapsingToolbarLayout
Z ich pomoca˛ w prosty sposób można stworzyć chowajacy
˛ sie˛ Toolbar,
czy też Toolbar który rozszerza sie˛ kiedy przesuwamy palec do w dół a
zmniejsza sie˛ do normalnej postaci kiedy przesuwamy palec do góre˛
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
21 / 23
Zadanie
Napisać prosta˛ aplikacje˛ z Toolbar’em na górze ekranu i kilkoma
przyciskami w menu.
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
22 / 23
Dzieki
˛
http://student.agh.edu.pl/~skrobacz/
A. Skrobacz (AGH EAIIB)
Android Action Bar
2015
23 / 23