ViewPager2 – nieskończona karuzela

Okładka-2

Jakiś czas temu zespół programistów Androida ukończył pracę nad pierwszą stabilną wersję nowego view pager’a sygnowanego numerem 2. Znacząco zmienił się z nim sposób tworzenia adaptera, doszło sporo nowych funkcjonalności. W tym artykule dowiesz się w jaki sposób zaimplementować nieskończoną karuzelę korzystając właśnie z tego narzędzia przy użyciu klas ViewPager2 i RecyclerView.Adapter.

Czym jest nieskończona karuzela?

Termin “nieskończona karuzela” oznacza w praktyce, że przewijając view pager poszczególne elementy będą się powtarzać i nigdy nie dojdziemy do ich końca (mimo tego,ze realna liczba danych jest skończona). Podejście to zostały zaprezentowane na dwa sposoby. Pierwszy z nich to stos kart, które przewijają się wertykalnie. Drugi natomiast jest klasyczną horyzontalną karuzelą.

Import ViewPager2

Aby skorzystać z bogactwa funkcji view pagera w wersji drugiej, najpierw należy dodać odpowiednie dependency w pliku gradle.

Dołączenie ViewPager2 do layoutu

Kolejnym krokiem będzie dodanie view pagera do miejsca, w którym chcemy go wyświetlić.

Stworzenie karuzeli

Przejdźmy teraz do najbardziej istotnego elementu w całej układance, czyli adaptera. Będzie on odpowiadał za uzyskanie efektu nieskończonej karuzeli. Za moment się przekonacie, że chociaż w teorii lista będzie skończona, to w praktyce nikt nigdy nie dojdzie do jej końca (no chyba, że trafimy na bardzo zdeterminowanego testera). Żeby stworzyć adapter potrzebujemy czymś go zapełnić, zróbmy więc coś prostego.

Model

Widok dla modelu

Adapter

Poniżej przedstawiam adapter, na którym będziemy dokonywać zmian w celu osiągnięcia zamierzonego efektu.

Efekt nieskończonej karuzeli będziemy chcieli uzyskać poprzez umiejscowienie pierwszego elementu naszej listy na środku przedziału od 0 do Int.MAX_VALUE (około 2 mld), a następnie powtarzanie tych samych elementów co określony okres. Zaczynamy tutaj od wyliczenia ile razy nasze dane w całości zmieszczą się w połowie tego przedziału. Następnie wyliczamy dokładny, końcowy rozmiar karuzeli. Jeśli liczba elementów w liście nie przekracza 1, to nie tworzymy dla niej karuzeli, gdyż zwyczajnie mija się to z celem.

Na podstawie powyższego kodu można już zauważyć, dlaczego taką implementację karuzeli można nazwać nieskończoną. Gdyby przewijać view pager z prędkością jednej strony na sekundę to dojście do końca zajęło by około 32 lata. Myślę, że ten czas można wygospodarować zdecydowanie lepiej.

Dodajmy jeszcze do naszego adaptera kilka pomocniczych funkcji służących do wyliczenia środka, pobrania realnej liczby danych czy pobrania realnej pozycji elementu. Ostatecznie będzie się on prezentował następująco.

Inicjalizacja View Pagera

W tym momencie osiągnęliśmy założony efekt – powstała niekończąca się karuzela. Musimy tylko zainicjować ViewPager2 w miejscu, w którym chcemy z niego skorzystać. Dla przykładu może to być główna aktywność aplikacji.

Poprawki kosmetyczne

W zasadzie na tym moglibyśmy skończyć, ale wygląd karuzeli nieco odbiega od tego zaprezentowanego na początku artykułu. Obecnie widzimy jednocześnie tylko jedną stronę, a chcemy, żeby boki poprzedniego i następnego elementu również były widoczne. W jaki sposób możemy to osiągnąć?

Page Transformer

PageTransformer służy do modyfikacji wyświetlania poszczególnych elementów oraz sposobu przejść między nimi. Poniżej znajdziesz implementację transformera, która zrobi stos trzech widocznych elementów. Pierwszy z nich (aktualnie wybrany) będzie największy, kolejny będzie zwężony o 10%, a ostatni element pod względem szerokości będzie taki sam jak drugi, ale będzie bardziej schowany za poprzednim elementem. Nie będę tutaj zagłębiał się w implementację. Musisz mi zaufać, że ta “magia” działa.

Teraz wystarczy ustawić nowo stworzony transformer w view pagerze.

Po uruchomieniu aplikacji podczas przewijania listy powinniśmy otrzymać taki efekt jak na obrazku poniżej.

Dla dopełnienia dodam jeszcze implementację, w której karuzela obraca się horyzontalnie i widoczny jest poprzedni i następny element listy. Poza zmianą w PageTransformer, do widoku itemka należy dodać lewy i prawy margines np. 40dp, a także zmienić ViewPager2 na horyzontalny. Efekt widzimy poniżej.

Jeśli potrzebujesz inspiracji to różne inne ciekawe przykłady transformerów możesz znaleźć na oficjalnej stronie.

Patryk Radzikowski
Patryk Radzikowski

Z pasji i zawodu programista aplikacji na platformę Android. Przygodę z programowaniem zaczął już w szkole podstawowej, edytując skrypty do bota w popularnej grze MMORPG. Poza programowaniem lubi grać w piłkę nożną, a także interesuje się polityką i zagadkami wszechświata.

.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *