Magia Constraint Layout

Pokażę Ci dzisiaj jak w kilku prostych krokach i linijkach kodu przygotować zaawansowaną animację, która zachwyci wszystkich. Przygotuj ulubioną herbatę, a ja wszystko Ci opowiem!

Potrzebne będą dwa layouty

Przede wszystkim powinieneś posiadać podstawową wiedzę na temat budowania widoków za pomocą ConstraintLayout. Jeżeli nie miałeś jeszcze styczności z tym rodzajem layoutu, zdecydowanie powinieneś nadrobić zaległości, ponieważ jego możliwości są przeogromne. Z innych rodzajów layoutów korzystam już teraz tylko sporadycznie.

Zaraz pokażę Ci jak łatwo jest stworzyć zaawansowaną animację korzystając z Constraint Layoutu. Utworzenie odpowiednika bez niego byłoby znacznie trudniejsze i bardziej czasochłonne.

Koncepcja jest następująca. Tworzysz dwa layouty(mam na myśli te utworzone w xml). Pierwszy z nich opisuje widok przed animacją, natomiast drugi definiuje docelowy układ.

Koncepcja animacji

Zróbmy to!

Jest to banalnie proste. Pokażę Ci teraz przykład animacji stworzonej za pomocą tego mechanizmu. Stwórz nowy projekt w Android Studio i podążaj za mną.

Stwórz dwie definicje widoków

Stwórz dwie definicje widoków. Zgodnie z konwencją, z której korzystam podczas tworzenia tego typu animacji stwórz pliki z następującymi nazwami:

  • activity_main_start.xml
  • activity_main_end.xml

Najłatwiej będzie zacząć od docelowego widoku. Skopiuj następującą zawartość do pliku activity_main_end.xml

XML

Definicja widoku początkowego znajduje się poniżej. Zwróć uwagę na zastosowaną strukturę. Wszystkie kontrolki znalazły się w nim poza ekranem. Jedynie przycisk startu animacji znajduję się wewnątrz tego co zobaczy użytkownik.

XML

Wszystkim kontrolkom zostały nadane identyfikatory, dzięki temu silnik animacji będzie w stanie odpowiednio połączyć widok początkowy i startowy. Jeżeli ich nie nadasz lub popełnisz literówkę, mechanizm nie zadziała, jest też duża szansa, że otrzymasz następujący błąd:

Plain Text

Czas tchnąć życie

Poniższe screenshoty przedstawiają efekt naszych prac. Teraz musimy dodać możliwość przejścia pomiedzy zdefiniowanymi widokami. Przejdźmy do kodu.

W głównej aktywności stwórz metodę, którą znajdziesz poniżej. Przyjmuje ona parametr, dzięki któremu możemy zdecydować jaki layout będzie ustawiony. Wystarczy, że stworzymy obiekt ConstraintSet i za pomocą metody clone utworzymy layout docelowy. Dalej korzystamy z TransitionManager , który odpowiada za animację. Po jego przygotowaniu używamy metody applyTo obiektu constraint, aby podmienić layout.

Swift

W metodzie onCreate dodaj kod odpowiedzialny za start animacji.

Swift

To już wszystko

Efekt końcowy możesz podziwiać poniżej, a kod źródłowy projektu pobrać stąd. Oczywiście jeżeli jesteś programistą Xamarin ten przykład jest również dla Ciebie. Z powodzeniem możesz skorzystać z tego mechanizmu przy tworzeniu aplikacji Xamarin.Android.

Efekt końcowy

Mam coś dla Ciebie

Zapisz się do mojego newslettera, a ja prześlę Ci zbiór kilkunastu praktycznych wskazówek dla programisty aplikacji mobilnych.

Menu