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

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

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

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

ในดีไซน์ Material มีตัวบ่งชี้ความคืบหน้าอยู่ 2 ประเภท ดังนี้

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

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

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

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

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

ตัวบ่งชี้สถานะไม่แน่นอน

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

หากต้องการสร้างสัญญาณบอกสถานะความคืบหน้าแบบไม่ชัดเจน ให้ใช้ 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,
    )
}
ProgressIndicator.kt

ต่อไปนี้เป็นตัวอย่างของการติดตั้งใช้งานนี้เมื่อตัวบ่งชี้ทำงาน:

ต่อไปนี้เป็นตัวอย่างของการติดตั้งแบบเดียวกันแต่มี LinearProgressIndicator จากราคาเต็ม CircularProgressIndicator

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