สัญญาณบอกสถานะความคืบหน้าจะแสดงสถานะการดำเนินการให้เห็น ไอคอนเหล่านี้ใช้การเคลื่อนไหวเพื่อดึงดูดความสนใจของผู้ใช้เกี่ยวกับความคืบหน้าของกระบวนการ เช่น การโหลดหรือประมวลผลข้อมูล นอกจากนี้ ยังอาจบ่งบอกว่ามีการดำเนินการอยู่ โดยไม่ระบุว่าใกล้จะเสร็จสิ้นมากน้อยเพียงใด
ลองพิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ที่คุณอาจใช้ตัวบ่งชี้ความคืบหน้า
- การโหลดเนื้อหา: ขณะดึงข้อมูลเนื้อหาจากเครือข่าย เช่น การโหลดรูปภาพหรือข้อมูลสําหรับโปรไฟล์ผู้ใช้
- การอัปโหลดไฟล์: แสดงความคิดเห็นให้ผู้ใช้ทราบเกี่ยวกับระยะเวลาที่ใช้ในการอัปโหลด
- การประมวลผลที่ใช้เวลานาน: ขณะที่แอปประมวลผลข้อมูลจำนวนมาก ให้แจ้งให้ผู้ใช้ทราบถึงเปอร์เซ็นต์ของงานที่เสร็จสมบูรณ์
สัญญาณบอกสถานะความคืบหน้าใน Material Design มี 2 ประเภท ได้แก่
- กำหนด: แสดงความคืบหน้าที่ทำได้
- ไม่แน่นอน: ภาพเคลื่อนไหวจะแสดงอย่างต่อเนื่องโดยไม่คำนึงถึงความคืบหน้า
ในทํานองเดียวกัน ตัวบ่งชี้ความคืบหน้าอาจอยู่ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
- เส้นตรง: แถบแนวนอนที่เติมจากซ้ายไปขวา
- วงกลม: วงกลมที่มีเส้นขอบยาวขึ้นจนครอบคลุมเส้นรอบวงทั้งหมดของวงกลม
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
สร้างตัวบ่งชี้ที่แน่นอน
ตัวบ่งชี้ที่แน่นอนจะแสดงระดับความสมบูรณ์ของการดำเนินการอย่างละเอียด ใช้คอมโพสิเบิล LinearProgressIndicator
หรือ CircularProgressIndicator
และส่งค่าสำหรับพารามิเตอร์ progress
ตัวอย่างต่อไปนี้แสดงตัวอย่างที่ค่อนข้างละเอียด เมื่อผู้ใช้กดปุ่ม แอปจะแสดงตัวบ่งชี้ความคืบหน้าและเปิดใช้งานโคโริวทีนที่ค่อยๆ เพิ่มค่าของ progress
ซึ่งทําให้ตัวบ่งชี้ความคืบหน้าเพิ่มขึ้นตามลำดับ
ผลลัพธ์
เมื่อการโหลดเสร็จสมบูรณ์บางส่วน ไฟบอกสถานะแบบเส้นตรงในตัวอย่างก่อนหน้านี้จะปรากฏดังนี้
ในทำนองเดียวกัน สัญญาณบอกสถานะแบบวงกลมจะปรากฏดังนี้
สร้างตัวบ่งชี้ที่ไม่แน่นอน
ตัวบ่งชี้ที่ไม่แน่นอนไม่ได้แสดงถึงระดับความใกล้เสร็จสมบูรณ์ของการดำเนินการ แต่จะใช้การเคลื่อนไหวเพื่อบ่งบอกให้ผู้ใช้ทราบว่าระบบกําลังประมวลผลอยู่ โดยไม่ระบุระดับความเสร็จสมบูรณ์
หากต้องการสร้างตัวบ่งชี้ความคืบหน้าที่ไม่แน่นอน ให้ใช้คอมโพสิเบิล LinearProgressIndicator
หรือ CircularProgressIndicator
แต่อย่าส่งค่าสำหรับ progress
ตัวอย่างต่อไปนี้แสดงวิธีสลับตัวบ่งชี้ที่ไม่แน่นอนด้วยการกดปุ่ม
ผลลัพธ์
ตัวอย่างการใช้งานนี้เมื่อตัวบ่งชี้ทำงานอยู่มีดังนี้
ต่อไปนี้คือตัวอย่างการติดตั้งใช้งานเดียวกัน แต่ใช้ LinearProgressIndicator
แทน CircularProgressIndicator
ข้อมูลสำคัญ
แม้ว่าจะมีคอมโพสิเบิลหลายรายการที่คุณสามารถใช้เพื่อสร้างตัวบ่งชี้ความคืบหน้าซึ่งสอดคล้องกับ Material Design แต่พารามิเตอร์ของคอมโพสิเบิลเหล่านี้ก็ไม่ได้แตกต่างกันมากนัก พารามิเตอร์หลักที่ควรคำนึงถึงมีดังนี้
progress
: ความคืบหน้าปัจจุบันที่ตัวบ่งชี้แสดง ส่งFloat
ระหว่าง0.0
ถึง1.0
color
: สีของสัญญาณบอกสถานะ ซึ่งก็คือส่วนของคอมโพเนนต์ที่แสดงถึงความคืบหน้าและครอบคลุมคอมโพเนนต์โดยสมบูรณ์เมื่อความคืบหน้าเสร็จสมบูรณ์trackColor
: สีของแทร็กที่จะวาดเครื่องหมาย
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)
แสดงคอมโพเนนต์แบบอินเทอร์แอกทีฟ
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=th)