Jetpack Compose Academy · Pelajaran

Membangun Cincin Progres Langsung

Gabungkan kanvas dan state menjadi widget.

Pelajaran 4 dari 413 langkah

Membangun Cincin Progres Langsung adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Tujuannya

Saatnya membangun sesuatu yang nyata: sebuah cincin kemajuan yang terisi seiring bertambahnya nilai. Contoh ini memadukan penggambaran kanvas dengan state Compose yang berubah langsung.

Busur, Bukan Lingkaran

Cincin sebenarnya adalah sebuah busur. Kita menggambar lingkaran penuh yang samar sebagai jalur, lalu busur terang di atasnya untuk menunjukkan kemajuan sejauh ini.

Simpan Nilai Kemajuan

Simpan nilainya dalam state agar cincin digambar ulang saat nilainya berubah. Float dari 0f hingga 1f dapat dipetakan dengan mudah dari nol hingga penuh.

var progress by remember { mutableStateOf(0.25f) }

Gambar Jalurnya

Pertama, gambar cincin latar menggunakan drawCircle dengan Stroke. Jalur abu-abu lembut menunjukkan seluruh jalur yang akan diisi oleh kemajuan.

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

Kenali drawArc

Andalannya adalah drawArc. Fungsi ini menggambar bagian lingkaran yang ditentukan oleh sudut awal dan sudut sapuan, yang keduanya diukur dalam derajat.

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

Mulai dari Atas

Sudut 0 mengarah ke kanan, jadi kita menggunakan startAngle sebesar -90f untuk memulai dari atas. Ini terasa alami untuk indikator kemajuan.

Sapuan Berdasarkan Kemajuan

Lingkaran penuh berukuran 360 derajat, jadi sweepAngle cukup berupa kemajuan dikalikan 360. Pada 0.5f, busur menutupi tepat setengah cincin.

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

useCenter Tetap False

Biarkan useCenter bernilai false agar Anda menggambar potongan cincin, bukan irisan pai yang terisi. Dengan gaya Stroke, hasilnya menjadi pita bulat yang rapi.

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

Animasikan Nilainya

Bungkus nilai dengan animateFloatAsState agar perubahan meluncur, bukan meloncat. Cincin kemudian tumbuh dengan halus menuju setiap target baru.

val animated by animateFloatAsState(targetValue = progress)

Tambahkan Gradien

Ganti warna datar dengan kuas sweepGradient, maka cincin akan memiliki tampilan modern yang cerah saat warna berputar mengelilinginya.

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

Tambahkan Label

Letakkan Text yang menampilkan persentase di dalam Box yang dipusatkan di atas Canvas. Kini widget Anda tampil sebagai kontrol lengkap dan rapi.

Pemeriksaan Singkat

Bagaimana cara mengubah nilai kemajuan dari 0f hingga 1f menjadi sapuan busur?

Jawab di pelajaran interaktif

Rangkuman

Anda telah membangun cincin langsung: lingkaran jalur, drawArc yang disapu berdasarkan kemajuan dikalikan 360, state yang dianimasikan, dan goresan gradien. Hasil yang indah! 🌀

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Cincin Progres Langsung” gratis?

Ya — teks lengkap “Membangun Cincin Progres Langsung” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Cincin Progres Langsung”?

Gabungkan kanvas dan state menjadi widget. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Membangun Cincin Progres Langsung” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy