Tworzymy przewijany Toolbar

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 CoordinatorLayoutAppBarrLayout 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):
scroll toolbar
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.

Co dalej?

  • Zapisz się na newsletter aby otrzymywać jeszcze więcej materiałów
  • Polub stronę MYENV na Facebooku oraz śledź mnie na Twitterze
  • Zachęcam do komentowania i pisania propozycji tematów, o których chcesz przeczytać
  • Poleć ten wpis za pomocą poniższych przycisków. Będę Ci za to bardzo wdzięczny 🙂
  • Życzę Ci miłego dnia i miłego kodowania 🙂
Menu