Przycinanie i kształtowanie obrazów
Zaokrąglaj rogi i twórz okrągłe awatary
Przycinanie i kształtowanie obrazów to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 4 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.
Poza prostokątem
Domyślnie obrazy są rysowane jako zwykłe prostokąty. Aby uzyskać zaokrąglone rogi lub okrągłe awatary, należy clip przyciąć je do wybranego kształtu.
Modifier.clip przycina do kształtu
Funkcja Modifier.clip ogranicza komponent do określonego kształtu. Wszystko poza tym kształtem po prostu nie zostanie narysowane.
Image(painter = p, contentDescription = null,
modifier = Modifier.clip(CircleShape))CircleShape dla awatarów
Aby uzyskać idealnie okrągły awatar, użyj CircleShape w clip. Połącz go z kwadratowym rozmiarem i Crop, aby otrzymać estetyczne, okrągłe zdjęcie profilowe.
Modifier.size(64.dp).clip(CircleShape)Zaokrąglone rogi
Nowoczesne, delikatne karty korzystają z RoundedCornerShape. Przekaż promień narożnika w dp, aby równomiernie zaokrąglić wszystkie cztery rogi.
Modifier.clip(RoundedCornerShape(16.dp))Zaokrąglanie wybranych rogów
Możesz zaokrąglić rogi indywidualnie, na przykład tylko górne, przekazując osobne wartości dla każdego rogu do RoundedCornerShape.
RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)Kolejność ma znaczenie: najpierw clip
Modyfikatory są stosowane w kolejności. Umieść clip przed background lub border, aby kształt ograniczał również je, a nie tylko zawartość obrazu.
Dodawanie obramowania
Przycięty obraz świetnie wygląda z dopasowanym obramowaniem. Dodaj border z tym samym kształtem bezpośrednio po clip.
Modifier.clip(CircleShape).border(2.dp, Color.White, CircleShape)Połączenie clip i Crop
Przepis na awatar obejmuje dwa modyfikatory i skalowanie: najpierw size, następnie przycięcie do CircleShape oraz ContentScale.Crop, aby zdjęcie wypełniło okrąg.
Image(painter = p, contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.size(64.dp).clip(CircleShape))Własne kształty
Potrzebujesz sześciokąta lub gwiazdy? Możesz przekazać dowolny obiekt Shape, także zdefiniowany samodzielnie za pomocą ścieżki, aby uzyskać niestandardowy obrys.
clipToBounds dla elementów podrzędnych
Aby uniemożliwić zawartości elementów podrzędnych rysowanie poza kontenerem, użyj Modifier.clipToBounds, który przycina ją do prostokąta elementu.
Cienie i przycinanie
Cień również potrzebuje określonego kształtu. Zastosuj Modifier.shadow z tym samym kształtem przed clip, aby cień podążał za zaokrągloną krawędzią.
Modifier.shadow(4.dp, CircleShape).clip(CircleShape)Szybki sprawdzian
Do jakiego kształtu należy przyciąć obraz, aby utworzyć idealnie okrągły awatar?
Podsumowanie: kształtowanie obrazów
Potrafisz już przycinać obrazy za pomocą clip do CircleShape lub RoundedCornerShape, poprawnie ustawiać kolejność modyfikatorów oraz dodawać obramowania i cienie. Kurs ukończony! 🎉
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
Często zadawane pytania
Czy lekcja „Przycinanie i kształtowanie obrazów” jest bezpłatna?
Tak — pełny tekst „Przycinanie i kształtowanie obrazów” 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 „Przycinanie i kształtowanie obrazów”?
Zaokrąglaj rogi i twórz okrągłe awatary Ć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 4 z 4.
Ile czasu zajmuje lekcja „Przycinanie i kształtowanie obrazów”?
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
- Composable Image
- Ikony Material z Icon
- ContentScale i przycinanie
- Przycinanie i kształtowanie obrazów