Jetpack Compose Academy · บทเรียน

สร้างวงแหวนความคืบหน้าแบบสด

ผสานผืนผ้าใบและสถานะเป็นวิดเจ็ต

บทเรียน 4 จาก 413 ขั้นตอน

สร้างวงแหวนความคืบหน้าแบบสด เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

เป้าหมาย

ได้เวลาสร้างสิ่งที่ใช้งานได้จริง นั่นคือ วงแหวนแสดงความคืบหน้า ที่เติมเต็มตามค่าที่เพิ่มขึ้น โดยผสานการวาดบน Canvas เข้ากับสถานะ Compose แบบสด

ส่วนโค้ง ไม่ใช่วงกลม

จริง ๆ แล้ววงแหวนคือ ส่วนโค้ง เราจะวาดวงกลมเต็มวงสีจางเป็นราง จากนั้นวาดส่วนโค้งสีสดทับด้านบนเพื่อแสดงความคืบหน้าจนถึงขณะนั้น

เก็บค่าความคืบหน้า

เก็บค่าไว้ใน สถานะ เพื่อให้วงแหวนวาดใหม่เมื่อค่าดังกล่าวเปลี่ยนแปลง ค่าแบบทศนิยมตั้งแต่ 0f ถึง 1f จะแปลงเป็นช่วงตั้งแต่ศูนย์ถึงเต็มวงได้พอดี

var progress by remember { mutableStateOf(0.25f) }

วาดราง

ขั้นแรก ให้ลงสีวงแหวนพื้นหลังด้วย วาดวงกลม โดยใช้เส้นขีด รางสีเทานุ่มนวลจะแสดงเส้นทางเต็มที่ความคืบหน้าจะเติมให้เต็ม

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

ทำความรู้จักกับ drawArc

ตัวสำคัญคือ drawArc ซึ่งวาดส่วนหนึ่งของวงกลมที่กำหนดด้วยมุมเริ่มต้นและมุมกวาด โดยทั้งสองค่าจะวัดเป็นองศา

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

เริ่มจากด้านบน

มุม 0 ชี้ไปทางขวา ดังนั้นเราจึงใช้ startAngle เป็น -90f เพื่อเริ่มจากด้านบน ซึ่งให้ความรู้สึกเป็นธรรมชาติสำหรับตัวบ่งชี้ความคืบหน้า

กวาดตามความคืบหน้า

วงกลมเต็มวงมีขนาด 360 องศา ดังนั้น sweepAngle จึงเท่ากับความคืบหน้าคูณ 360 เมื่อเป็น 0.5f ส่วนโค้งจะครอบคลุมครึ่งหนึ่งของวงแหวนพอดี

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

ให้ useCenter เป็น False

กำหนดให้ useCenter เป็น false เพื่อวาดส่วนของวงแหวนแทนชิ้นพายที่เติมสีเต็ม เมื่อใช้รูปแบบเส้นขีด ก็จะกลายเป็นแถบโค้งมนที่เรียบร้อย

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

ทำให้ค่าเคลื่อนไหว

ห่อค่าไว้ด้วย animateFloatAsState เพื่อให้การเปลี่ยนแปลงค่อย ๆ เคลื่อนไหวแทนการกระโดดเปลี่ยนทันที จากนั้นวงแหวนจะค่อย ๆ ขยายไปยังเป้าหมายใหม่แต่ละค่า

val animated by animateFloatAsState(targetValue = progress)

เพิ่มการไล่ระดับสี

เปลี่ยนจากสีเรียบเป็นแปรง sweepGradient แล้ววงแหวนจะดูสดใสและทันสมัยขึ้น เมื่อสีหมุนไปรอบวงแหวน

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

วางป้ายกำกับ

วาง ข้อความ ที่แสดงเปอร์เซ็นต์ไว้ในกล่องซึ่งจัดกึ่งกลางเหนือ Canvas ตอนนี้วิดเจ็ตของคุณก็จะดูเป็นตัวควบคุมที่สมบูรณ์และขัดเกลาแล้ว

ตรวจสอบความเข้าใจ

คุณจะแปลงค่าความคืบหน้าตั้งแต่ 0f ถึง 1f ให้เป็นมุมกวาดของส่วนโค้งได้อย่างไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

คุณสร้างวงแหวนแบบสดได้แล้ว ซึ่งประกอบด้วยวงกลมราง drawArc ที่กวาดตามความคืบหน้าคูณ 360 สถานะที่เคลื่อนไหว และเส้นขีดแบบไล่ระดับสี ทำได้สวยงามมาก! 🌀

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “สร้างวงแหวนความคืบหน้าแบบสด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สร้างวงแหวนความคืบหน้าแบบสด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สร้างวงแหวนความคืบหน้าแบบสด”

ผสานผืนผ้าใบและสถานะเป็นวิดเจ็ต คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “สร้างวงแหวนความคืบหน้าแบบสด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Jetpack Compose Academy