Kontynuujemy wpisy o Toolbarze. Ten artykuł pokarze Ci w jaki sposób można przesuwać pasek akcji wraz z przewijaniem się ekranu. Przewijany Toolbar to świetny sposób na prezentację różnych rzeczy na ekranie np. wyświetlanie artykułów. W tym wpisie użyjemy takich widoków jak CoordinatorLayout, AppBarrLayout oraz CollapsingToolbarLayout.
Dodanie zależności do gradle
compile 'com.android.support:design:26.0.0-alpha1'
Tworzymy layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>Najprostszy wygląd naszej aplikacji bez większych rzeczy. Pliku z kodem Java nie ma potrzeby prezentować wystarczy dodać wsparcie dla toolbara (zobacz więcej). Jeżeli uruchomimy aplikacje i chwycimy za pasek będzie się przesuwał.
CoordinatorLayout to zaawansowany FrameLayout. Jest rodzicem i umożliwia koordynowanie zachowań swoich potomków. Zatem zmiana jednego dziecka może wywołać zmianę u innego potomka. Zachowania możemy sami zmieniać według uznania. Jeśli tego nie zmienimy to i tak są zdefiniowane domyślnie. Natomiast AppBarrLayout to nic innego jak LinearLayout na sterydach. W tym widoku możemy osadzać inne widoki np: TabLayout Warto też się przyjrzeć atrybutowi app:layout_scrollFlags. Ten atrybut przyjmuje następujące wartości:
- scroll — oznacza chowanie się Toolbara podczas przewijania.
- enterAlways — Toolbar będzie widoczny podczas przewijania w górę.
- enterAlwaysCollapsed — Toolbar wróci do swojej pierwotnej postaci dopiero jak przewiniemy do początku ekranu.
- exitUntilCollapsed — ta opcja przyda się, wtedy gdy mamy np. obraz w Toolbarze. Wraz z przewinięciem w dół, obrazek się chowa, a pasek zmienia się w standardowy wygląd.
- snap — użycie tej opcji określi, co zrobić, gdy tylko widok został częściowo zredukowany. Jeśli przewijanie się kończy, a rozmiar widoku został zmniejszony mniej niż 50% jego oryginalności, to ten widok powróci do pierwotnego rozmiaru. Jeśli rozmiar przekracza 50% jego rozmiaru, zniknie całkowicie.
Trochę może być to zagmatwane, ale najlepiej to przetestować samemu i sprawdzić. Dodajmy teraz pod paskiem (po AppBarLayout) trochę tekstu, zróbmy to w taki sposób, aby wraz z przesuwania się tekstu pasek się chował.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text"
/>
</android.support.v4.widget.NestedScrollView>Ważną opcją jest tutaj: app:layout_behavior=”@string/appbar_scrolling_view_behavior” wskazuje ona na to, aby nasz tekst nie chował się pod Toolbarem. Gdybyśmy tego nie dodali dalej pasek by się przesuwał, ale tekst byłby pod nim schowany, a tego chcemy uniknąć.
Oprócz NestedScrollView możemy także dodawać inne widoki np: FrameLayout lub RecyclerView.
Ulepszamy Toolbara
Ok, już wiemy jak przesuwać Toolbar, a teraz zobacz na ten layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/Image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/photo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|snap"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>Co tu się zmieniło? Dodaliśmy CollapsingToolbarLayout — umożliwia wykonywanie bardziej zaawansowanych animacji, takich jak użycie ImageView, które wygasa w miarę zwijania. Oto efekt: (kliknij, aby zobaczyć animacje):
Oczywiście to nie koniec możliwości, do tego możemy zrobić pasek przezroczysty, który opisywałem w innym wpisie. Dla praktyki można też przetestować własne zachowania, które wspiera CoordinatorLayout. Cały projekt można zobaczyć na Github.