Jetpack Compose Academy · Lekcja

Tworzenie pierścienia postępu na żywo

Połącz płótno i stan w widżet

Tworzenie pierścienia postępu na żywo 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.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

The Goal

Time to build something real: a progress ring that fills as a value grows. It blends canvas drawing with live Compose state.

An Arc, Not a Circle

A ring is really an arc. We draw a faint full circle as a track, then a bright arc on top showing the progress so far.

Hold the Progress

Store the value in state so the ring redraws when it changes. A float from 0f to 1f maps cleanly to zero through full.

var progress by remember { mutableStateOf(0.25f) }

Draw the Track

First paint the background ring with drawCircle using a Stroke. A soft gray track shows the full path the progress will fill.

drawCircle(
    color = Color.LightGray,
    style = Stroke(width = 24f)
)

Meet drawArc

The hero is drawArc. It draws a slice of a circle defined by a start angle and a sweep angle, both measured in degrees.

drawArc(
    color = Color.Blue,
    startAngle = -90f,
    sweepAngle = 90f,
    useCenter = false
)

Start at the Top

Angle 0 points right, so we use a startAngle of -90f to begin at the top. That feels natural for a progress indicator.

Sweep by Progress

A full circle is 360 degrees, so the sweepAngle is just progress times 360. At 0.5f the arc covers exactly half the ring.

val sweep = progress * 360f
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false)

useCenter Stays False

Keep useCenter false so you draw a ring slice, not a filled pie wedge. With a Stroke style it becomes a clean rounded band.

drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(width = 24f, cap = StrokeCap.Round))

Animate the Value

Wrap the value in animateFloatAsState so changes glide instead of jumping. The ring then smoothly grows toward each new target.

val animated by animateFloatAsState(targetValue = progress)

Add a Gradient

Swap the flat color for a sweepGradient brush and the ring gets a vivid, modern look as the colors rotate around it.

drawArc(brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)), startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(24f))

Layer the Label

Place a Text showing the percentage in a Box centered over the Canvas. Now your widget reads as a complete, polished control.

Quick Check

How do you turn a 0f-to-1f progress value into the arc's sweep?

Recap

You built a live ring: a track circle, a drawArc swept by progress times 360, animated state, and a gradient stroke. Beautiful work! 🌀

Często zadawane pytania

Czy lekcja „Tworzenie pierścienia postępu na żywo” jest bezpłatna?

Tak — pełny tekst „Tworzenie pierścienia postępu na żywo” 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 „Tworzenie pierścienia postępu na żywo”?

Połącz płótno i stan w widżet Ć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 „Tworzenie pierścienia postępu na żywo”?

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