Co to Jetpack Compose i dlaczego jest potrzebny | Mood Up team - software house

Postagens de blog - mudança de idioma

Gostaríamos de informar que as postagens do blog estão totalmente escritas em inglês .

Se você ainda deseja acessar esta página, clique em continuar.

mood up android

Co to Jetpack Compose i dlaczego jest potrzebny

Jetpack compose to nowoczesny toolkit Android UI wprowadzony przez Google. Upraszcza on i przyspiesza proces tworzenia aplikacji. Dzięki Jetpack Compose możesz zapisać mniej kodu w porównaniu do obecnego podejścia do budowania widoków – co oznacza również mniej potencjalnych błędów. Jest jeszcze jedna świetna rzecz – Jetpack używa Kotlina. Jeśli używałeś React lub Flutter, prawdopodobnie będziesz zaznajomiony z tą koncepcją i znajdziesz wiele podobieństw.


Jak to działa?
 

Głównym elementem składowym Compose jest funkcja Composable. Emituje ona część interfejsu użytkownika. Budowanie z Compose polega na zagnieżdżaniu funkcji Composable jedna w drugiej.

Zrzut ekranu 2020 12 12 o 20.06.13
Ten przykład pokazuje proste użycie Compose. Jak widać, użyte są cztery funkcje Composable: Column– wbudowana Composable, która renderuje swoje dzieci w kolejności kolumnowej, orazText,która wyświetla na ekranie dany tekst.

 

Deklaratywne podejście

Jetpack Compose jest zbudowany w oparciu o inny paradygmat programowania, mianowicie – o paradygmat deklaratywny. Mówiąc krótko, oznacza to, że musisz zmienić swój sposób myślenia z: „Jak coś zrobić” na „Jaki cel chcę osiągnąć”. W deklaratywnym sposobie programowania, starasz się opisać oczekiwany rezultat, zamiast opisywać każdy krok do osiągnięcia celu. W poprzednim przykładzie po prostu powiedzieliśmy „Chcę mieć kolumnę z trzema tekstami w środku” – i to wszystko. Nie musimy pisać żadnego dodatkowego kodu, który mówi aplikacji jak ma postępować z elementami wewnątrz kolumny.

 

W obecnym imperatywnym podejściu, sprawy są nieco bardziej skomplikowane. Do renderowania listy elementów wykorzystywany jest RecyclerView. Jest to komponent, który pomaga efektywnie wyświetlać duże zestawy danych. Problem polega na tym, że każdy RecyclerView potrzebuje adaptera, każdy element na liście potrzebuje ViewHoldera, i tak dalej. Adapter jest miejscem, w którym programiści muszą opisać, w jaki sposób RecyclerView ma renderować każdy element. W momencie gdy chcemy renderować różne typy danych, mogą się pojawić duże przeszkody. Na przykład, jeśli chcesz wyświetlić tekst, obraz i swój niestandardowy widok, musisz napisać logikę, która powie RecyclerView, jak to zrobić. Jak widzisz, zaczyna to wyglądać trochę skomplikowanie i jest to dokładne przeciwieństwo Jetpack Compose i deklaratywnego podejścia. Przecież my chcemy tylko stworzyć listę z elementami w środku. Z Compose jest to tak proste:

 

jetpack2

 

Jetpack Compose ❤️ Kotlin 

Jedną z największych zalet Jetpack Compose jest to, że używa Kotlina. Co to oznacza dla Ciebie? Cóż, na przykład to, że możesz używać wszystkich struktur Kotlina bezpośrednio w swoim kodzie widoku. Możesz użyć instrukcji If, aby wybrać, co powinno być renderowane, możesz użyć pętli, aby wyświetlić widok wiele razy. Możesz także używać metod funkcyjnych, takich jak filter, map i wielu innych.

 

image1 1

 

Jak pokazuje powyższy obrazek: wybór tego, co ma być wyświetlane w zależności od stanu zbioru danych jest naprawdę prosty. Jeśli jest on pusty, wyświetlamy tekst „Brak danych do wyświetlenia”, jeśli nie jest, mapujemy elementy zestawu danych do Composables i wyświetlamy je w kolumnie.

 

„Stan”

Aktualizowanie widoku jest kluczowym zadaniem każdej aplikacji. Trudno sobie wyobrazić aplikację, która pokazuje cały czas te same dane. Aby zaktualizować widok w Compose, musimy przebudować funkcje Composable z różnymi zestawami argumentów.

Proces ten nazywany jest rekompozycją. Pytanie brzmi: „Skąd funkcja Composable wie, kiedy ma się zrekonstruować?”. Odpowiedź brzmi – ponieważ może ona posiadać stan.

Stan jest wartością, lub wieloma wartościami, przypisanymi do funkcji Composable. Kiedykolwiek wartość ta zostanie zmieniona, wywołuje to proces rekompozycji i nasza funkcja zostanie przebudowana z nową wartością stanu.

 

jetpack4

 

W tym przykładowym kodzie widzimy jedną wartość stanu – counter . Wartość counter jest wyświetlana za pomocą funkcji Text . Przy każdej zmianie stanu, funkcja composable jest przebudowywana z nową wartością przypisaną do zmiennej counter . W metodzie onClick przycisku Button wartość stanu counter , która wykonuje proces dekompozycji, jest inkrementowana, a nowa wartość jest wyświetlana za pomocą Text.

 

jetpackgif

 

Paginacja w Compose

Przyjrzyjmy się realnemu przykładowi, który pokazuje jak Compose może przyspieszyć i ułatwić naszą pracę. Porównamy dwa rozwiązania dla jednego problemu – paginacji. Użyjemy obecnego rozwiązania do budowania widoków oraz Jetpack Compose.

 

Paginacja – co to znaczy?  

Paginacja to proces dzielenia dużego zbioru danych na mniejsze fragmenty. Jest to przydatne, gdy nie chcemy serwować wszystkich danych w tym samym czasie. Może to jednak poważnie zaszkodzić wydajności naszej aplikacji. Doskonałym przykładem jest aplikacja Facebook – zazwyczaj, korzystając z niej, przewijasz swoją ścianę i czytasz nowe informacje. Czy kiedykolwiek dotarłeś do jej końca? Prawdopodobnie nie. Wydaje się ona nie mieć końca, co oznacza, że jest tam ogromna ilość danych do wyświetlenia. Wyobraź sobie, co by się stało, gdybyśmy dostali wszystkie te dane na raz – byłby to overkill dla naszego urządzenia. To pokazuje, że Twoja ściana na Facebooku wykorzystuje paginację. Dane są pobierane w mniejszych porcjach i wyświetlane na ekranie. W momencie, gdy kończy się aktualna porcja, z backendu pobierana jest nowa – i tak dalej.

Pokażę Ci jak łatwo jest zaimplementować paginację przy użyciu Compose, w porównaniu do obecnego podejścia. Po pierwsze, zobaczmy co jest potrzebne do obsługi paginacji, gdy używamy obecnych metod budowania widoków:

  • RecyclerView – odpowiedzialny za wyświetlanie danych
  • Adapter – wyświetlanie logic
  • ViewHolders – utrzymywanie referencji widoków aby nie używać findViewById() za każdym razem aby je uzyskać. Byłoby to naprawdę kosztowne.

Zazwyczaj chcemy w jakiś sposób zasygnalizować, że dane są pobierane. Na przykład, możemy chcieć wyświetlić pasek postępu jako ostatni element listy. Przy obecnym podejściu, jest to nieco skomplikowane zadanie. Musisz umieścić nowy element w swoim zestawie danych i zmusić RecyclerView do renderowania go jako pasek postępu.  Istnieje wiele sposobów, aby to osiągnąć. Zazwyczaj kończy się to dużą ilością nowego kodu. Każdy nowy typ widoku sprawia, że twój adapter staje się bardziej skomplikowany. Z Compose, implementacja paginacji jest naprawdę prosta – zajmuje tylko kilka linii kodu!

Spójrzmy jak to wygląda:

jetpack5

 

Widzimy tutaj composable ComicsResultSection, który jest odpowiedzialny za wyświetlanie naszych danych. Zestaw danych, który ma zostać wyświetlony jest przekazywany jako argument – data. Używając LazyColumnForIndexed Composable, możemy przedstawić nasze dane w postaci listy. LazyColumnForIndexed jest odpowiednikiem RecyclerView – renderuje tylko te dane, które są widoczne na ekranie. Dodatkowo LazyColumnForIndexed daje nam informacje o aktualnie renderowanych obiektach oraz ich indeksach. Korzystając z indeksu możemy w prosty sposób sprawdzić, czy aktualnie renderowany obiekt jest ostatnim w naszym zbiorze danych. Jeśli tak, to możemy po prostu wywołać metodę pobierającą dane i wyświetlić pasek postępu jako ostatni element naszej listy. I to jest właśnie to. Żadnych adapterów i skomplikowanej logiki – po prostu mówimy, co chcemy zobaczyć na ekranie.

 

Podsumowanie 

Jetpack Compose to obiecujący i potężny nowoczesny Toolkit UI, który zdecydowanie powinieneś mieć na oku. Jeśli jest używany poprawnie, może przyspieszyć proces tworzenia aplikacji i zmniejszyć jej rozmiar. Co więcej, z Compose piszesz mniej kodu – co potencjalnie oznacza mniej błędów. Szczęśliwego kodowania 🙂

Jeżeli chcesz się dowiedzieć więcej sprawdź oficjalną stronę Jetpack Compose:
https://developer.android.com/jetpack/compose

 

Have an idea for a web or mobile app, but don’t know where to start?
Let’s talk.