Android Academy · Lekcja

Text, Image i Button

Używaj podstawowych wbudowanych funkcji composable

Text, Image i Button to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 3 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.

Wbudowane funkcje kompozycyjne

Compose zawiera gotowe funkcje kompozycyjne do tworzenia typowych elementów interfejsu. Trzy z nich, których będą Państwo stale używać, to Text, Image i Button.

Funkcja kompozycyjna Text

Text wyświetla ciąg znaków. Jej najważniejszym parametrem jest text.

@Composable
fun Title() {
    Text(text = "My App")
}

Stylizowanie tekstu

Text przyjmuje wiele parametrów stylu, takich jak fontSize, color i fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp a dp

Rozmiary czcionek używają .sp (pikseli niezależnych od skali), dzięki czemu uwzględniają ustawienia ułatwień dostępu dotyczące rozmiaru czcionki. Rozmiary układu używają .dp (pikseli niezależnych od gęstości).

Używaj sp dla tekstu, a dp dla wszystkiego innego.

Funkcja kompozycyjna Image

Image wyświetla obraz. Użyj painterResource, aby wczytać zasób graficzny, i zawsze podawaj contentDescription na potrzeby ułatwień dostępu.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription jest odczytywany na głos przez czytniki ekranu. W przypadku dekoracyjnych obrazów, które nie niosą żadnego znaczenia, przekaż null. Obrazom znaczącym nadaj krótki opis.

Funkcja kompozycyjna Button

Button to element, który można kliknąć. Jego kluczowym parametrem jest onClick — lambda uruchamiana po dotknięciu. Etykietę przycisku umieszcza się w lambdzie jego zawartości — zwykle jest to Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Reagowanie na kliknięcia

Lambda onClick to miejsce na logikę — aktualizację stanu, nawigowanie lub wywołanie funkcji.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Lambdy zawartości

Proszę zauważyć, że Button przyjmuje końcową lambdę zawartości. Wszystko, co zostanie w niej umieszczone, jest renderowane jako zawartość przycisku, więc przycisk może zawierać ikonę i tekst, a nie tylko etykietę.

Button(onClick = { }) {
    Text(text = "Save")
}

Łączenie elementów

Rzeczywiste interfejsy łączą te funkcje kompozycyjne. Tutaj tytuł, obraz i przycisk są ułożone jeden nad drugim w elemencie Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Istnieje ich znacznie więcej

Oprócz tych trzech Compose oferuje między innymi TextField, Icon, Checkbox i Switch. Obowiązuje ten sam schemat: przekazywanie parametrów i lambd zawartości.

Szybkie sprawdzenie

Który parametr elementu Button uruchamia Państwa kod po dotknięciu przycisku przez użytkownika?

Podsumowanie

Poznali Państwo trzy podstawowe composable:

Text — wyświetla ciągi znaków; stylizuje się go za pomocą fontSize i color (należy używać sp).
Image — painterResource + contentDescription.
Button — lambda onClick oraz lambda zawartości.

Często zadawane pytania

Czy lekcja „Text, Image i Button” jest bezpłatna?

Tak — pełny tekst „Text, Image i Button” 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 „Text, Image i Button”?

Używaj podstawowych wbudowanych funkcji composable Ć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 3 z 4.

Ile czasu zajmuje lekcja „Text, Image i Button”?

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