Canlı İlerleme Halkası Oluşturma
Tuval ile durumu bir bileşende birleştirin.
Canlı İlerleme Halkası Oluşturma, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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! 🌀
Sıkça Sorulan Sorular
“Canlı İlerleme Halkası Oluşturma” dersi ücretsiz mi?
Evet — “Canlı İlerleme Halkası Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Canlı İlerleme Halkası Oluşturma” dersinde ne öğreneceğim?
Tuval ile durumu bir bileşende birleştirin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Canlı İlerleme Halkası Oluşturma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- DrawScope: Çizgiler, Dikdörtgenler ve Daireler
- Yollar, Degradeler ve Karıştırma Modları
- drawWithCache ve Performans
- Canlı İlerleme Halkası Oluşturma