518
Rozdział 12.
Zwijany pasek narzędzi
¨
Przewijany pasek narzędzi
¨
Zwijany pasek narzędzi
¨
Przycisk FAB
¨
Pasek snackbar
Jak stworzyć prosty zwijany pasek narzędzi?
Zwijany pasek narzędzi dodaje się do układu aktywności przy użyciu układu
CollapsingToolbarLayout
, pochodzącego z biblioteki wsparcia wzornictwa.
Aby wszystko działało prawidłowo, układ ten należy dodać do układu
AppBarLayout
,
który z kolei będzie umieszczony wewnątrz układu
CoordinatorLayout
. Dodany układ
CollapsingToolbarLayout
powinien zawierać pasek narzędzi, który chcemy zwijać.
Ponieważ zwijany pasek narzędzi musi reagować na zdarzenia przewijania dotyczące
innego widoku, konieczne jest dodanie do układu
CoordinatorLayout
jakichś treści,
które użytkownik będzie mógł przewijać, na przykład kontrolki
NestedScrollView
.
Poniżej przedstawiliśmy ogólną strukturę pliku układu, jakiej należy użyć,
by zapewnić poprawne działanie zwijanego paska narzędzi:
<android.support.design.widget.CoordinatorLayout
... >
<android.support.design.widget.AppBarLayout
... >
<android.support.design.widget.CollapsingToolbarLayout
... >
<android.support.v7.widget.Toolbar
... />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
...>
...
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Oprócz odpowiedniej struktury układu zapewnienie prawidłowego
działania zwijanego paska narzędzi wymaga także zastosowania kilku
istotnych atrybutów. Przyjrzymy się im na następnej stronie.
Układ CollapsingToolbarLayout należy dodać
do AppBarLayout, który z kolei musi być
umieszczony w układzie CoordinatorLayout.
Sam układ CollapsingToolbarLayout będzie
zawierać komponent Toolbar.
Tu należy umieścić treści, które
użytkownik będzie mógł przewijać.
Biblioteka wsparcia wzornictwa
519
jesteś tutaj
¨
Przewijany pasek narzędzi
¨
Zwijany pasek narzędzi
¨
Przycisk FAB
¨
Pasek snackbar
Atrybuty układu AppBarLayout
Podobnie jak wcześniej, także w tym przykładzie spójność wyglądu paska aplikacji uzyskujemy
poprzez zastosowanie w nim wybranego motywu. Ponadto musimy też określić wysokość
zawartości paska aplikacji. Będzie to maksymalna wysokość, do jakiej będzie można rozwinąć
zwijany pasek narzędzi. W naszym przykładzie zastosujemy motyw
”@style/ThemeOverlay.
AppCompat.Dark.ActionBar”
, a maksymalną wysokość ustawimy na
300dp
:
<android.support.design.widget.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”300dp”
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” >
Atrybuty komponentu Toolbar
Jeśli na pasku narzędzi znajdują się jakieś elementy, takie jak przycisk W górę, to podczas
zwijania paska narzędzi mogą one zostać usunięte z ekranu. Można temu zaradzić,
dodając do elementu
Toolbar
atrybut
layout_collapseMode
o wartości
”pin”
:
<android.support.v7.widget.Toolbar
android:id=”@+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”?attr/actionBarSize”
app:layout_collapseMode=”pin” />
Atrybuty układu CollapsingToolbarLayout
Chcemy, by układ
CollapsingToolbarLayout
zwijał się i rozszerzał w odpowiedzi na
zdarzenia przewijania. Dlatego też, w celu kontrolowania tego zachowania, konieczne
będzie zastosowanie atrybutu
layout_scrollFlags
. W naszym przykładzie chcemy, by
pasek był zwijany aż do momentu osiągnięcia wysokości standardowego paska narzędzi.
W tym celu będziemy musieli przypisać atrybutowi
layout_scrollFlags
wartość
”scroll|exitUntilCollapsed”
:
<android.support.design.widget.CollapsingToolbarLayout
...
app:layout_scrollFlags=”scroll|exitUntilCollapsed” >
Atrybuty widoku NestedScrollView
Podobnie jak wcześniej, także i podczas tworzenia zwijanego paska narzędzi musimy
wskazać układowi
CoordinatorLayout
widok, który będzie przewijany przez
użytkowników. W tym celu do elementu
NestedScrollView
należy dodać atrybut
layout_behavior
o wartości
”@string/appbar_scrolling_view_behavior”
:
<android.support.v4.widget.NestedScrollView
...
app:layout_behavior=”@string/appbar_scrolling_view_behavior” >
To jest ten sam atrybut, którego
użyliśmy podczas tworzenia
przewijanego paska narzędzi.
Ta wartość oznacza,
że pasek ma być zwijany
aż do momentu, gdy
zwijanie zostanie
zakończone.
To jest maksymalna wysokość zwijanego paska narzędzi.
Użycie tego atrybutu powoduje przypięcie
całej zawartości paska narzędzi, na przykład
przycisku W górę, do górnej krawędzi ekranu.
520
Rozdział 12.
Kod układu
Pełny kod dodający zwijany pasek narzędzi
do pliku activity_order.xml
Poniżej pokazaliśmy, w jaki sposób można dodać zwijany pasek narzędzi
do układu aktywności
OrderLayout
. Zastąp tym kodem dotychczasową
zawartość pliku
activity_order.xml:
<?xml version=”1.0” encoding=”utf-8”?>
<android.support.design.widget.CoordinatorLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:id=”@+id/coordinator”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<android.support.design.widget.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”300dp”
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
app:layout_scrollFlags=”scroll|exitUntilCollapsed” >
<android.support.v7.widget.Toolbar
android:id=”@+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”?attr/actionBarSize”
app:layout_collapseMode=”pin” />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<xml>
</xml>
app/src/main
activity_order.xml
WloskieCoNieco
res
layout
Określiliśmy identyfikator układu
CoordinatorLayout, gdyż w dalszej
części rozdziału będziemy musieli
się do niego odwoływać.
To jest układ
CollapsibleToolbarLayout.
Należy go umieścić
wewnątrz układu
AppBarLayout.
Układ CollapsibleToolbarLayout
zawiera właściwy pasek narzędzi.
Dalsza
część kodu
znajduje się
na następnej
stronie.
¨
Przewijany pasek narzędzi
¨
Zwijany pasek narzędzi
¨
Przycisk FAB
¨
Pasek snackbar
Biblioteka wsparcia wzornictwa
521
jesteś tutaj
<android.support.v4.widget.NestedScrollView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
app:layout_behavior=”@string/appbar_scrolling_view_behavior” >
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:padding = ”16dp” >
<EditText
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”@string/order_name_hint” />
<EditText
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”@string/order_details_hint” />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<xml>
</xml>
app/src/main
activity_order.xml
WloskieCoNieco
res
layout
Widok NestedScrollView zawiera
treści, których przewijanie
chcemy umożliwić.
Te przewijane
treści
rozmieszczamy,
używając
zwyczajnego
układu liniowego.
Używamy kontrolek EditText
by stworzyć zawartość układu,
którą będzie można przewijać.
A teraz przekonamy się, co się stanie,
kiedy uruchomimy aplikację.
¨
Przewijany pasek narzędzi
¨
Zwijany pasek narzędzi
¨
Przycisk FAB
¨
Pasek snackbar
Kod pliku activity_order.xml (ciąg dalszy)
522
Jazda próbna
¨
Przewijany pasek narzędzi
¨
Zwijany pasek narzędzi
¨
Przycisk FAB
¨
Pasek snackbar
Jazda próbna aplikacji
Kiedy uruchomimy aplikację, aktywność
OrderActivity
wyświetli swój nowy
układ, zawierający zwijany pasek narzędzi. Pasek ten początkowo jest duży,
lecz później, podczas przewijania zawartości, zostaje zmniejszony.
Do zwijanego paska narzędzi można także dodać obrazek
Zwijany pasek narzędzi, który stworzyliśmy na kilku poprzednich stronach, jest
całkiem prosty. Ma zwyczajne tło, które zmniejsza się i powiększa w zależności
od przewijania zawartości aktywności.
Możemy jednak poprawić nieco atrakcyjność tego paska, dodając do niego
obrazek. Do naszego paska dodamy zatem obrazek. Obrazek ten będzie
widoczny na w pełni rozwiniętym pasku, a podczas jego zwijania zostanie ukryty
i wtedy sam pasek wróci do standardowej postaci:
To jest
w pełni
rozwinięty
pasek
narzędzi.
A tak wygląda pasek
narzędzi po zwinięciu.
To jest ten
sam zwijany
pasek narzędzi,
z tą różnicą,
że dodaliśmy
do niego
zdjęcie.
Get Android Programowanie aplikacji. Rusz głową! Wydanie II now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
