Créer un anneau de progression en direct
Combinez le canevas et l’état dans un composant.
Créer un anneau de progression en direct est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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! 🌀
Questions Fréquemment Posées
La leçon « Créer un anneau de progression en direct » est-elle gratuite ?
Oui — le texte complet de « Créer un anneau de progression en direct » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Créer un anneau de progression en direct » ?
Combinez le canevas et l’état dans un composant. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Créer un anneau de progression en direct » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- DrawScope : lignes, rectangles et cercles
- Tracés, dégradés et modes de fusion
- drawWithCache et performances
- Créer un anneau de progression en direct