Android Academy · Lekcja

Czym jest Jetpack Compose?

Poznaj deklaratywny interfejs użytkownika w Androidzie

Czym jest Jetpack Compose? to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Czym jest Jetpack Compose?

Jetpack Compose to nowoczesny zestaw narzędzi Androida do tworzenia natywnych interfejsów użytkownika. Zamiast pisać pliki układu XML, opisują Państwo interfejs bezpośrednio w kodzie Kotlin.

Compose jest deklaratywny: określają Państwo, jak ekran powinien wyglądać dla danego stanu, a Compose ustala, jak go narysować i zaktualizować.

Tradycyjne podejście: widoki XML

Tradycyjnie ekran Androida wymagał dwóch części:

Pliku układu XML opisującego widżety.
Kodu Kotlin/Java, który wyszukuje te widoki za pomocą findViewById i je modyfikuje.

Utrzymywanie zgodności pliku XML z kodem było żmudne i podatne na błędy.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Imperatywne a deklaratywne

W przypadku widoków XML piszą Państwo kod imperatywny: pobierają widok, a następnie zmieniają go krok po kroku.

W Compose piszą Państwo kod deklaratywny: opisują końcowy rezultat jako funkcję danych. Gdy dane się zmieniają, Compose automatycznie przerysowuje to, co jest potrzebne.

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Funkcje kompozycyjne

Podstawowym elementem Compose jest funkcja kompozycyjna: zwykła funkcja Kotlin z adnotacją @Composable, która emituje interfejs użytkownika.

Funkcje kompozycyjne mogą wywoływać inne funkcje kompozycyjne, dzięki czemu można budować ekrany z małych, wielokrotnie używanych elementów.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Bez findViewById

W Compose nie ma findViewById ani identyfikatorów widoków. Interfejs użytkownika jest wywołaniem funkcji. Aby wyświetlić inny tekst, wystarczy przekazać inny argument i pozwolić Compose wykonać rekompozycję.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

Interfejs użytkownika jako funkcja stanu

Podstawowa idea to: UI = f(state). Ekran jest wynikiem działania funkcji kompozycyjnych dla bieżącego stanu. Zmień stan, a ta sama funkcja utworzy nowy interfejs.

Dzięki temu interfejsy są przewidywalne i łatwiej je analizować.

Wszystko jest Kotlinem

Ponieważ funkcje kompozycyjne są funkcjami Kotlin, można używać pętli, instrukcji warunkowych i zmiennych do budowania interfejsu. Nie jest potrzebny żaden specjalny język szablonów.

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

Mniej kodu pomocniczego

Compose eliminuje ogromne ilości kodu integrującego. Nie ma rozwijania XML, adapterów dla prostych list ani ręcznego łączenia układu z logiką.

Rezultat: mniej plików i mniej błędów.

Współpraca z widokami

Nie muszą Państwo przepisywać całej aplikacji. Compose współpracuje ze starym systemem widoków. Można osadzić Compose na istniejącym ekranie XML albo osadzić widok w Compose.

Pozwala to zespołom stopniowo migrować aplikację.

Czego Państwo potrzebują

Aby używać Compose, potrzebują Państwo:

Nowszej wersji Android Studio.
Zależności Compose w pliku Gradle.
Aktywności wywołującej setContent { } w celu osadzenia funkcji kompozycyjnych.

Mały ekran

Oto kompletny, minimalny ekran Compose. setContent jest połączeniem między systemem Android Activity a światem Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

Szybkie sprawdzenie

Co najlepiej opisuje Jetpack Compose?

Podsumowanie

Dowiedzieli się Państwo, że Jetpack Compose to deklaratywny zestaw narzędzi do tworzenia interfejsów, oparty przede wszystkim na Kotlinie. Najważniejsze idee:

Interfejs użytkownika buduje się z funkcji @Composable.
Nie ma XML ani findViewById.
UI = f(state) — po zmianie stanu Compose przerysowuje interfejs.

Często zadawane pytania

Czy lekcja „Czym jest Jetpack Compose?” jest bezpłatna?

Tak — pełny tekst „Czym jest Jetpack Compose?” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Czym jest Jetpack Compose?”?

Poznaj deklaratywny interfejs użytkownika w Androidzie Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Czym jest Jetpack Compose?”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy