คอมโพสิเบิล Slider
ช่วยให้ผู้ใช้เลือกจากค่าต่างๆ ได้ คุณอาจใช้แถบเลื่อนเพื่อให้ผู้ใช้ดำเนินการต่อไปนี้ได้
- ปรับการตั้งค่าที่ใช้ช่วงของค่า เช่น ระดับเสียงและความสว่าง
- กรองข้อมูลในกราฟ เช่น เมื่อตั้งค่าช่วงราคา
- ข้อมูลที่ผู้ใช้ป้อน เช่น การตั้งคะแนนในรีวิว
แถบเลื่อนประกอบด้วยแทร็ก ปุ่มเลื่อน ป้ายกำกับค่า และเครื่องหมายขีดกลาง
- แทร็ก: แทร็กคือแถบแนวนอนที่แสดงช่วงค่าที่แถบเลื่อนรับได้
- แถบเลื่อน: แถบเลื่อนคือองค์ประกอบตัวควบคุมที่ลากได้ในแถบเลื่อน ซึ่งช่วยให้ผู้ใช้เลือกค่าที่เฉพาะเจาะจงภายในช่วงที่กำหนดโดยแทร็กได้
- เครื่องหมายขีด: เครื่องหมายขีดคือเครื่องหมายหรือตัวบ่งชี้ที่มองเห็นได้ซึ่งไม่บังคับ ซึ่งจะปรากฏตามแทร็กของสไลด์
หัวข้อนี้แสดงการใช้งานแถบเลื่อนต่อไปนี้
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
สร้างแถบเลื่อนพื้นฐาน
ตัวอย่างต่อไปนี้คือแถบเลื่อนที่ใช้งานง่าย ซึ่งช่วยให้ผู้ใช้เลือกค่าได้ตั้งแต่ 0.0
ถึง 1.0
เนื่องจากผู้ใช้เลือกค่าใดก็ได้ในช่วงนี้ แถบเลื่อนจึงต่อเนื่อง
ผลลัพธ์
![คอมโพเนนต์แถบเลื่อนที่มีค่าที่เลือกไว้ประมาณ 3 ใน 4 ของแทร็ก](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-basic.png?hl=th)
สร้างแถบเลื่อนขั้นสูง
ข้อมูลโค้ดต่อไปนี้ใช้แถบเลื่อนที่มี 3 ระดับ โดยมีช่วงตั้งแต่ 0.0
ถึง 50.0
เนื่องจากแถบเลื่อนจะหยุดอยู่ที่แต่ละขั้น แถบเลื่อนนี้จึงเป็นช่วงๆ
ผลลัพธ์
![เขียนข้อความแสดงแทนที่นี่](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-advanced.png?hl=th)
แถบเลื่อนช่วง
หรือจะใช้คอมโพสิเบิล RangeSlider
โดยเฉพาะก็ได้ ซึ่งช่วยให้ผู้ใช้เลือกค่าได้ 2 ค่า ซึ่งจะมีประโยชน์ในกรณีต่างๆ เช่น เมื่อผู้ใช้ต้องการเลือกราคาต่ำสุดและสูงสุด
ตัวอย่างต่อไปนี้เป็นตัวอย่างที่ค่อนข้างตรงไปตรงมาของแถบเลื่อนช่วงต่อเนื่อง
ผลลัพธ์
![คอมโพเนนต์แถบเลื่อนช่วงที่มีการเลือกค่า 2 ค่า ป้ายกำกับจะแสดงขอบบนและขอบล่างของการเลือก](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-range.png?hl=th)
ข้อมูลสำคัญ
ดูคำจำกัดความ API ฉบับเต็มได้ที่ข้อมูลอ้างอิง Slider
พารามิเตอร์หลักๆ สำหรับคอมโพสิเบิล Slider
มีดังนี้
value
: ค่าปัจจุบันของแถบเลื่อนonValueChange
: Lambda ที่จะเรียกใช้ทุกครั้งที่มีการเปลี่ยนแปลงค่าenabled
: ค่าบูลีนที่ระบุว่าผู้ใช้โต้ตอบกับแถบเลื่อนได้หรือไม่
เมื่อใช้แถบเลื่อนที่ซับซ้อนมากขึ้น คุณจะใช้พารามิเตอร์ต่อไปนี้เพิ่มเติมได้
colors
: อินสแตนซ์ของSliderColors
ที่ช่วยให้คุณควบคุมสีของแถบเลื่อนได้valueRange
: ช่วงของค่าที่แถบเลื่อนรับได้steps
: จำนวนรอยบนแถบเลื่อนที่นิ้วหัวแม่มือจับ
นอกจากนี้ คุณยังส่ง Slider
ไปยังคอมโพสิเบิล thumb
และ track
เพื่อปรับแต่งลักษณะที่ปรากฏของคอมโพเนนต์อย่างละเอียดยิ่งขึ้นได้ด้วย
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)