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.
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
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.
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:
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.
W metodzie onCreate dodaj kod odpowiedzialny za start animacji.
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.
