Creare un anello di avanzamento live
Combini canvas e stato in un widget.
Creare un anello di avanzamento live è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
L’obiettivo
È il momento di creare qualcosa di concreto: un progress ring che si riempie man mano che cresce un valore. Unisce il disegno su canvas allo stato Compose aggiornato in tempo reale.
Un arco, non un cerchio
Un anello è in realtà un arco. Disegniamo un cerchio completo e tenue come traccia, quindi aggiungiamo sopra un arco luminoso che mostra l’avanzamento raggiunto.
Memorizzare l’avanzamento
Memorizzate il valore nello state, così l’anello viene ridisegnato quando cambia. Un valore float da 0f a 1f si converte facilmente nell’intervallo da zero al completamento.
var progress by remember { mutableStateOf(0.25f) }Disegnare la traccia
Per prima cosa dipingete l’anello di sfondo con drawCircle usando Stroke. Una traccia grigio tenue mostra l’intero percorso che verrà riempito dall’avanzamento.
drawCircle(
color = Color.LightGray,
style = Stroke(width = 24f)
)Ecco drawArc
Il protagonista è drawArc. Disegna una porzione di cerchio definita da un angolo iniziale e da un angolo di sweep, entrambi misurati in gradi.
drawArc(
color = Color.Blue,
startAngle = -90f,
sweepAngle = 90f,
useCenter = false
)Iniziare dall’alto
L’angolo 0 punta verso destra, quindi usiamo un startAngle di -90f per iniziare dall’alto. È un punto di partenza naturale per un indicatore di avanzamento.
Calcolare lo sweep in base all’avanzamento
Un cerchio completo misura 360 gradi, quindi lo sweepAngle è semplicemente l’avanzamento moltiplicato per 360. Con 0.5f l’arco copre esattamente metà dell’anello.
val sweep = progress * 360f
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false)useCenter resta false
Lasciate useCenter su false per disegnare una porzione di anello, non uno spicchio di torta pieno. Con lo stile Stroke diventa una fascia arrotondata e pulita.
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(width = 24f, cap = StrokeCap.Round))Animare il valore
Racchiudete il valore in animateFloatAsState, così i cambiamenti scorrono gradualmente invece di saltare. L’anello crescerà quindi fluidamente verso ogni nuovo obiettivo.
val animated by animateFloatAsState(targetValue = progress)Aggiungere un gradiente
Sostituite il colore uniforme con un brush sweepGradient e l’anello assumerà un aspetto vivace e moderno, mentre i colori ruotano attorno ad esso.
drawArc(brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)), startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(24f))Sovrapporre l’etichetta
Inserite un Text che mostri la percentuale in un Box centrato sul Canvas. Ora il vostro widget apparirà come un controllo completo e curato.
Verifica rapida
Come trasformate un valore di avanzamento da 0f a 1f nello sweep dell’arco?
Riepilogo
Avete creato un anello aggiornato in tempo reale: un cerchio di traccia, un drawArc calcolato come avanzamento per 360, uno stato animato e un tratto con gradiente. Ottimo lavoro! 🌀
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Creare un anello di avanzamento live» è gratuita?
Sì — il testo completo di «Creare un anello di avanzamento live» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Creare un anello di avanzamento live»?
Combini canvas e stato in un widget. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Creare un anello di avanzamento live»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- DrawScope: linee, rettangoli e cerchi
- Percorsi, gradienti e modalità di fusione
- drawWithCache e prestazioni
- Creare un anello di avanzamento live