สัญญาณบอกสถานะความคืบหน้า

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

พิจารณากรณีการใช้งาน 3 แบบต่อไปนี้ที่คุณอาจใช้ตัวบ่งชี้ความคืบหน้า

  • การโหลดเนื้อหา: ขณะดึงข้อมูลเนื้อหาจากเครือข่าย เช่น การโหลดรูปภาพหรือข้อมูลสำหรับโปรไฟล์ผู้ใช้
  • การอัปโหลดไฟล์: ให้ความคิดเห็นแก่ผู้ใช้เกี่ยวกับระยะเวลาที่อาจใช้ในการอัปโหลด
  • การประมวลผลนาน: ขณะที่แอปประมวลผลข้อมูลจำนวนมาก ให้ผู้ใช้ทราบว่าการประมวลผลเสร็จสมบูรณ์แล้วกี่เปอร์เซ็นต์

ในดีไซน์ Material สัญญาณบอกความคืบหน้ามี 2 ประเภท ได้แก่

  • แน่นอน: แสดงความคืบหน้าอย่างชัดเจน
  • ไม่แน่นอน: เคลื่อนไหวอย่างต่อเนื่องโดยไม่คำนึงถึงความคืบหน้า

ในทำนองเดียวกัน ตัวบ่งชี้ความคืบหน้าอาจอยู่ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้

  • เชิงเส้น: แถบแนวนอนที่เติมจากซ้ายไปขวา
  • วงกลม: วงกลมที่มีเส้นขีดเพิ่มความยาวจนครอบคลุม เส้นรอบวงทั้งหมดของวงกลม
สัญญาณบอกสถานะความคืบหน้าแบบเชิงเส้นควบคู่ไปกับสัญญาณบอกสถานะความคืบหน้าแบบวงกลม
รูปที่ 1 ตัวบ่งชี้ความคืบหน้า 2 ประเภท

API Surface

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

  • progress: ความคืบหน้าปัจจุบันที่ตัวบ่งชี้แสดง ส่ง Float ระหว่าง 0.0 ถึง 1.0
  • color: สีของตัวบ่งชี้จริง นั่นคือส่วนของคอมโพเนนต์ที่แสดงความคืบหน้าและครอบคลุมคอมโพเนนต์อย่างเต็มรูปแบบเมื่อความคืบหน้าเสร็จสมบูรณ์
  • trackColor: สีของแทร็กที่วาดตัวบ่งชี้

ตัวบ่งชี้ที่แน่นอน

ตัวบ่งชี้ที่กำหนดจะแสดงให้เห็นว่าการดำเนินการเสร็จสมบูรณ์เพียงใด ใช้ Composable LinearProgressIndicator หรือ CircularProgressIndicator และส่งค่าสำหรับพารามิเตอร์ progress

ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างที่ค่อนข้างละเอียด เมื่อผู้ใช้ กดปุ่ม แอปจะแสดงตัวบ่งชี้ความคืบหน้าและเปิด โครูทีนที่ค่อยๆ เพิ่มค่าของ 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)
    }
}
ProgressIndicator.kt

เมื่อโหลดเสร็จสมบูรณ์บางส่วน ตัวบ่งชี้เชิงเส้นในตัวอย่างก่อนหน้า จะปรากฏดังนี้

ในทำนองเดียวกัน ตัวบ่งชี้แบบวงกลมจะปรากฏดังนี้

ตัวบ่งชี้ที่ระบุไม่ได้

ตัวบ่งชี้ที่ไม่แน่นอนไม่ได้แสดงให้เห็นว่าการดำเนินการใกล้เสร็จสมบูรณ์เพียงใด แต่จะใช้การเคลื่อนไหวเพื่อระบุให้ผู้ใช้ทราบว่าระบบกำลังประมวลผลอยู่ โดยไม่ได้ระบุระดับความสมบูรณ์ใดๆ

หากต้องการสร้างตัวบ่งชี้ความคืบหน้าที่ไม่แน่นอน ให้ใช้ LinearProgressIndicator หรือ CircularProgressIndicator ที่ใช้ร่วมกันได้ แต่ไม่ต้องส่งค่าสำหรับ 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,
    )
}
ProgressIndicator.kt

ตัวอย่างการติดตั้งใช้งานนี้เมื่อตัวบ่งชี้ทำงานอยู่มีดังนี้

ต่อไปนี้คือตัวอย่างการติดตั้งใช้งานเดียวกัน แต่ใช้ LinearProgressIndicator แทน CircularProgressIndicator

แหล่งข้อมูลเพิ่มเติม