Podstawy Jetpack Compose

Podstawy Jetpack Compose.

Compose to nowoczesny toolkit UI dla Androida. Zastępuje layouty XML kodem w Kotlinie. Zamiast opisywać strukturę UI, opisujesz to, co chcesz zobaczyć na ekranie. Dziś poznajemy podstawy Compose.

Tradycyjny UI w Androidzie jest imperatywny.

Masz obiekty View. Żeby je zmienić, wywołujesz ich metody: textView.setText(newValue). Mówisz systemowi, jak ma zaktualizować widok.

Deklaratywny UI działa inaczej.

Opisujesz, jak UI ma wyglądać dla danego stanu. Framework sam ustala, jak do tego doprowadzić.

Jeśli count wynosi 5, pokaż Text „Count: 5”. Gdy count zmieni się na 6, framework sam zaktualizuje Text.

Deklarujesz oczekiwany wynik. Nie piszesz logiki aktualizacji.

Podejście deklaratywne jest zwykle prostsze. Mniej błędów z powodu zapomnianych aktualizacji. UI zawsze odpowiada stanowi.

W Compose UI buduje się z funkcji composable.

Funkcję composable oznacza się adnotacją @Composable.

@Composable fun Greeting(). W jej wnętrzu wywołujesz inne funkcje composable i z nich budujesz UI.

Funkcje composable opisują elementy UI. Nie zwracają obiektów View. Dodają elementy do kompozycji.

Funkcje composable można wywoływać z innych funkcji composable. Złożony UI powstaje z połączenia prostych elementów.

Funkcje composable mogą przyjmować parametry: @Composable fun Greeting(name: String). Zachowanie dostosowujesz przez dane wejściowe.

Framework wywołuje twoje funkcje composable, gdy zmienia się stan. Sam ustala, którą część UI trzeba zaktualizować.

Text wyświetla tekst na ekranie.

Text("Hello World") to composable, który pokazuje napis.

Text przyjmuje parametry. text to treść. color, fontSize i fontWeight zmieniają wygląd.

Text(text = greeting, fontSize = 24.sp, color = Color.Blue).

sp to skalowalne piksele (scalable pixels) dla tekstu. Uwzględniają rozmiar czcionki ustawiony przez użytkownika.

Text to w Compose odpowiednik TextView.

Button to element, który można kliknąć.

Button(onClick = { action() }) { Text("Click me") }.

Button składa się z dwóch części. onClick to lambda, która obsługuje kliknięcie. Content to to, co przycisk wyświetla.

Content to również composable. Zwykle Text, ale może to być cokolwiek: Icon albo Row z ikoną i tekstem.

Button sam obsługuje reakcję na dotyk: efekt ripple i stan disabled.

Column układa elementy podrzędne w pionie.

Column { Text("First"); Text("Second"); Text("Third") }. Trzy teksty jeden pod drugim, od góry do dołu.

Row układa elementy podrzędne w poziomie.

Row { Text("Left"); Text("Right") }. Dwa teksty obok siebie.

Column i Row to w Compose odpowiedniki pionowego i poziomego LinearLayout.

Przyjmują parametry rozmieszczenia i wyrównania. W Column są to verticalArrangement i horizontalAlignment.

Arrangement.SpaceBetween rozsuwa elementy podrzędne. Alignment.CenterHorizontally wyśrodkowuje je w poziomie.

Modyfikatory zmieniają wygląd i zachowanie.

Text(text = "Hello", modifier = Modifier.padding(16.dp)).

Modyfikatory łączy się w łańcuch: Modifier.padding(8.dp).background(Color.Gray).fillMaxWidth().

Kolejność ma znaczenie. padding przed background zostawia odstęp poza tłem. background przed padding maluje tło także pod odstępem.

Popularne modyfikatory: padding, size, fillMaxWidth, fillMaxHeight, background, clickable, border.

Modyfikatory to podstawowy sposób stylowania funkcji composable. Zamiast wielu parametrów composable przyjmuje jeden modifier.

Box układa elementy podrzędne jeden na drugim.

Box(contentAlignment = Alignment.Center) { Image(...); Text(...) }. Tekst nałożony na obraz.

Box to w Compose odpowiednik FrameLayout.

Elementy podrzędne pozycjonujesz przez contentAlignment, na przykład Alignment.Center albo Alignment.BottomEnd.

Elementy podrzędne są rysowane po kolei. Pierwszy leży na samym dole, ostatni na samej górze.

Box z Modifier.fillMaxSize() to popularny wzorzec dla treści na cały ekran.

Preview pozwala zobaczyć funkcje composable w Android Studio bez uruchamiania aplikacji.

@Preview @Composable fun GreetingPreview() { Greeting("Android") }.

Adnotacja Preview mówi Android Studio, że ma wyrenderować ten composable.

Możesz mieć wiele podglądów: dla różnych stanów, motywów i rozmiarów.

@Preview(showBackground = true, name = "Light Mode").

Funkcje Preview nie trafiają do aplikacji, którą wydajesz. Służą wyłącznie do pracy nad kodem.

Podglądy przyspieszają pracę. Zmiany widzisz od razu, bez budowania i uruchamiania aplikacji.

Prosty ekran w Compose łączy wszystkie te elementy.

@Composable fun ProfileScreen() { Column(modifier = Modifier.fillMaxSize().padding(16.dp)) { Text(name, fontSize = 24.sp); Text(email); Button(onClick = { }) { Text("Edit Profile") } } }.

Column układa elementy w pionie. Text pokazuje imię i adres e-mail. Button uruchamia akcję.

Cały UI to kod w Kotlinie. Bez XML. Bez findViewById. Bez klas binding.

Compose jest zwięzły, bezpieczny pod względem typów i reaktywny. Zmiany stanu same aktualizują UI.

Podsumujmy.

Compose korzysta z deklaratywnego UI. Opisujesz, co chcesz uzyskać, a nie jak to zaktualizować.

UI budują funkcje composable. Oznaczasz je adnotacją @Composable.

Podstawowe composable: Text, Button. Composable do budowania układu: Column, Row, Box.

Modyfikatory stylują i pozycjonują elementy. Łączysz je w łańcuch.

Adnotacja Preview pokazuje funkcje composable w Android Studio.

Compose to nowoczesny sposób budowania UI w Androidzie.