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

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

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

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

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

• กำหนด: แสดงความคืบหน้าที่ทำได้
• ไม่แน่นอน: ภาพเคลื่อนไหวจะแสดงอย่างต่อเนื่องโดยไม่คำนึงถึงความคืบหน้า

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

• เส้นตรง: แถบแนวนอนที่เติมจากซ้ายไปขวา
• วงกลม: วงกลมที่มีเส้นขอบยาวขึ้นจนครอบคลุมเส้นรอบวงทั้งหมดของวงกลม

แพลตฟอร์ม API

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

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

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

ตัวบ่งชี้กำหนดจะแสดงความสมบูรณ์ของการดำเนินการ ใช้ Composable LinearProgressIndicator หรือ CircularProgressIndicator และส่งค่าสำหรับพารามิเตอร์ 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)
    }
}
ProgressIndicator.kt

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

ในทำนองเดียวกัน สัญญาณบอกสถานะแบบวงกลมจะปรากฏดังนี้

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

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

หากต้องการสร้างตัวบ่งชี้ความคืบหน้าที่ไม่แน่นอน ให้ใช้ Composable 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

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

• เอกสารเกี่ยวกับ Material UI