Jetpack Compose Academy · Lekcja

Ikony Material z Icon

Używaj wbudowanego zestawu ikon w dowolnym miejscu

Lekcja 2 z 413 kroki

Ikony Material z Icon to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 2 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 Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Poznaj komponent Icon

Do małych symboli, takich jak serce lub strzałka wstecz, Compose udostępnia komponent Icon. Jest lżejszy niż Image i automatycznie dopasowuje kolor do motywu.

Biblioteka ikon

Element Icons z zestawu ikon Material zapewnia setki gotowych symboli. Nie musisz nic rysować ani eksportować — wystarczy odwołać się do symbolu po nazwie.

Icon(imageVector = Icons.Default.Favorite, contentDescription = "Like")

imageVector to symbol

Icon przyjmuje imageVector — grafikę wektorową z zestawu Material. Ponieważ jest to wektor, pozostaje ostra w każdym rozmiarze.

Pięć stylów wizualnych

Każdy symbol jest dostępny w kilku stylach: Default, Outlined, Rounded, Sharp i TwoTone. Wybierz ten, który pasuje do charakteru aplikacji.

Icon(Icons.Outlined.Settings, contentDescription = "Settings")

Rozszerzony pakiet ikon

Podstawowy zestaw jest niewielki, aby aplikacje pozostały lekkie. Dodaj zależność material-icons-extended, aby uzyskać dostęp do tysięcy kolejnych symboli.

Ikony są automatycznie barwione

Domyślnie Icon jest rysowany bieżącym kolorem treści z motywu, dzięki czemu zawsze wygląda spójnie i nie trzeba samodzielnie ustawiać koloru.

Zastępowanie koloru

Potrzebujesz własnego koloru? Przekaż argument tint, a symbol zostanie ponownie narysowany dokładnie w wybranym odcieniu.

Icon(Icons.Default.Star, contentDescription = null, tint = Color.Yellow)

Ustawianie rozmiaru ikony

Domyślnie ikony są renderowane w rozmiarze 24dp, zgodnie ze standardem Material. Zmień ten rozmiar za pomocą Modifier.size, tak jak w przypadku każdego innego komponentu.

Icon(Icons.Default.Home, contentDescription = null, modifier = Modifier.size(32.dp))

Dodaj także opis

Podobnie jak Image, Icon wymaga contentDescription. Opisz jego działanie, na przykład "Add to favorites", albo przekaż null, jeśli pobliska etykieta już je wyjaśnia.

Ikony wewnątrz przycisków

Ikony świetnie sprawdzają się wewnątrz innych komponentów. Umieszczenie Icon w IconButton zapewnia klikalną akcję o odpowiednim rozmiarze.

IconButton(onClick = {}) { Icon(Icons.Default.Delete, "Delete") }

Ikona z elementu graficznego

Możesz również utworzyć Icon z własnego zasobu, używając painterResource zamiast imageVector, zachowując to samo automatyczne barwienie.

Szybki sprawdzian

Jakiego domyślnego koloru używa Icon, gdy nie ustawisz tint?

Odpowiedz w interaktywnej lekcji

Podsumowanie: ikony Material

Potrafisz już używać Icon do wyświetlania ostrych symboli wektorowych, wybierać styl, zastępować kolor tint i ustawiać rozmiar za pomocą modyfikatora. Następny temat: skalowanie obrazów! 🎯

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Ikony Material z Icon” jest bezpłatna?

Tak — pełny tekst „Ikony Material z Icon” 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 Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Ikony Material z Icon”?

Używaj wbudowanego zestawu ikon w dowolnym miejscu Ćwiczysz Jetpack Compose 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ąć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose 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 2 z 4.

Ile czasu zajmuje lekcja „Ikony Material z Icon”?

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 Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose 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 Jetpack Compose Academy