สัญญาณบอกสถานะความคืบหน้าจะแสดงสถานะของการดำเนินการ พวกเขาใช้การเคลื่อนไหว เพื่อดึงดูดความสนใจของผู้ใช้ว่าการดำเนินการดังกล่าวใกล้เสร็จสมบูรณ์มากน้อยเพียงใด เช่น การโหลดหรือการประมวลผลข้อมูล หรืออาจบ่งบอกได้ว่าการดำเนินการใช้เวลา โดยไม่ต้องอ้างอิงว่าธุรกิจนั้นใกล้จะเสร็จสมบูรณ์มากน้อยเพียงใด
พิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ที่คุณอาจใช้ตัวบ่งชี้ความคืบหน้า
- การโหลดเนื้อหา: ขณะดึงเนื้อหาจากเครือข่าย เช่น การโหลด รูปภาพหรือข้อมูลสำหรับโปรไฟล์ผู้ใช้
- การอัปโหลดไฟล์: แสดงความคิดเห็นเกี่ยวกับระยะเวลาที่ใช้ในการอัปโหลดให้ผู้ใช้ทราบ
- การประมวลผลเป็นเวลานาน: ระหว่างที่แอปประมวลผลข้อมูลปริมาณมาก บอกให้ผู้ใช้ทราบว่ายอดรวมทั้งหมดเสร็จสมบูรณ์แล้วมากน้อยเพียงใด
ในดีไซน์ Material มีตัวบ่งชี้ความคืบหน้าอยู่ 2 ประเภท ดังนี้
- พิจารณา: แสดงความคืบหน้าที่แน่นอน
- ไม่กำหนด: เคลื่อนไหวอย่างต่อเนื่องโดยไม่คำนึงถึงความคืบหน้า
ในทำนองเดียวกัน ตัวบ่งชี้ความคืบหน้าสามารถใช้รูปแบบใดรูปแบบหนึ่งต่อไปนี้
- เชิงเส้น: แท่งแนวนอนที่เริ่มจากซ้ายไปขวา
- วงกลม: วงกลมที่เส้นโครงร่างขยายยาวขึ้นจนกระทั่งครอบคลุมส่วน เส้นรอบวงเต็มของวงกลม
แพลตฟอร์มของ API
แม้ว่าจะมี Composable หลายรายการที่คุณสามารถใช้เพื่อสร้างตัวบ่งชี้ความคืบหน้า สอดคล้องกับดีไซน์ Material พารามิเตอร์ไม่ได้แตกต่างกันมากนัก ระหว่าง พารามิเตอร์หลักที่คุณควรทราบมีดังต่อไปนี้
progress
: ความคืบหน้าปัจจุบันที่ตัวบ่งชี้แสดง ผ่านFloat
ระหว่าง0.0
ถึง1.0
color
: สีของสัญญาณบอกสถานะจริง กล่าวคือ ส่วนของ คอมโพเนนต์ที่สะท้อนความคืบหน้าและครอบคลุมคอมโพเนนต์ทั้งหมด เมื่อความคืบหน้าเสร็จสมบูรณ์trackColor
: สีของรอยทางที่สัญญาณบอกสถานะถูกวาด
กำหนดตัวบ่งชี้
ตัวบ่งชี้ที่ชัดเจนซึ่งสะท้อนให้เห็นถึงความสมบูรณ์ของการทำงาน ใช้อย่างใดอย่างหนึ่ง
LinearProgressIndicator
หรือ CircularProgressIndicator
Composable แล้วส่งผ่านค่าสำหรับพารามิเตอร์ progress
ข้อมูลโค้ดต่อไปนี้แสดงตัวอย่างโดยละเอียด เมื่อผู้ใช้
กดปุ่ม แอปพลิเคชันจะแสดงสัญญาณบอกสถานะความคืบหน้า และเปิดใช้งาน
Coroutine ที่ค่อยๆ เพิ่มค่าของ progress
ซึ่งทำให้
สัญญาณบอกสถานะความคืบหน้าในการปรับปรุงตามลำดับ
@Composable fun LinearDeterminateIndicator() { var currentProgress by remember { mutableStateOf(0f) } var loading by remember { mutableStateOf(false) } val scope = rememberCoroutineScope() // Create a coroutine scope Column( verticalArrangement = Arrangement.spacedBy(12.dp), horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth() ) { Button(onClick = { loading = true scope.launch { loadProgress { progress -> currentProgress = progress } loading = false // Reset loading when the coroutine finishes } }, enabled = !loading) { Text("Start loading") } if (loading) { LinearProgressIndicator( progress = { currentProgress }, modifier = Modifier.fillMaxWidth(), ) } } } /** Iterate the progress value */ suspend fun loadProgress(updateProgress: (Float) -> Unit) { for (i in 1..100) { updateProgress(i.toFloat() / 100) delay(100) } }
เมื่อการโหลดเสร็จสมบูรณ์บางส่วน ตัวบ่งชี้เชิงเส้นใน ตัวอย่างจะปรากฏดังนี้
ในทำนองเดียวกัน สัญญาณบอกสถานะวงกลมจะปรากฏดังนี้
ตัวบ่งชี้สถานะไม่แน่นอน
ตัวบ่งชี้ที่ไม่กำหนดไม่ได้แสดงให้เห็นว่าการดำเนินการเสร็จสิ้นมีความใกล้เพียงใดแล้ว แต่ใช้การเคลื่อนไหวเพื่อบอกผู้ใช้ว่าการประมวลผลยังไม่ดำเนินอยู่ แต่ไม่ได้ระบุการสำเร็จการศึกษาระดับใด
หากต้องการสร้างสัญญาณบอกสถานะความคืบหน้าแบบไม่ชัดเจน ให้ใช้ LinearProgressIndicator
หรือ CircularProgressIndicator
Composable แต่ไม่ส่งค่าสำหรับ
progress
ตัวอย่างต่อไปนี้จะสาธิตวิธีการสลับ
สัญญาณบอกสถานะไม่ชัดเจนด้วยการกดปุ่ม
@Composable fun IndeterminateCircularIndicator() { var loading by remember { mutableStateOf(false) } Button(onClick = { loading = true }, enabled = !loading) { Text("Start loading") } if (!loading) return CircularProgressIndicator( modifier = Modifier.width(64.dp), color = MaterialTheme.colorScheme.secondary, trackColor = MaterialTheme.colorScheme.surfaceVariant, ) }
ต่อไปนี้เป็นตัวอย่างของการติดตั้งใช้งานนี้เมื่อตัวบ่งชี้ทำงาน:
ต่อไปนี้เป็นตัวอย่างของการติดตั้งแบบเดียวกันแต่มี
LinearProgressIndicator
จากราคาเต็ม CircularProgressIndicator