สร้างแถบเลื่อนสำหรับช่วงของค่า

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

  • ปรับการตั้งค่าที่ใช้ช่วงของค่า เช่น ระดับเสียงและความสว่าง
  • กรองข้อมูลในกราฟ เช่น เมื่อตั้งค่าช่วงราคา
  • ข้อมูลที่ผู้ใช้ป้อน เช่น การตั้งคะแนนในรีวิว

แถบเลื่อนประกอบด้วยแทร็ก ปุ่มเลื่อน ป้ายกำกับค่า และเครื่องหมายขีดกลาง

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

หัวข้อนี้แสดงการใช้งานแถบเลื่อนต่อไปนี้

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

สร้างแถบเลื่อนพื้นฐาน

ตัวอย่างต่อไปนี้คือแถบเลื่อนที่ใช้งานง่าย ซึ่งช่วยให้ผู้ใช้เลือกค่าได้ตั้งแต่ 0.0 ถึง 1.0 เนื่องจากผู้ใช้เลือกค่าใดก็ได้ในช่วงนี้ แถบเลื่อนจึงต่อเนื่อง

ผลลัพธ์

คอมโพเนนต์แถบเลื่อนที่มีค่าที่เลือกไว้ประมาณ 3 ใน 4 ของแทร็ก
รูปที่ 1 การติดตั้งใช้งานแถบเลื่อนขั้นพื้นฐาน

สร้างแถบเลื่อนขั้นสูง

ข้อมูลโค้ดต่อไปนี้ใช้แถบเลื่อนที่มี 3 ระดับ โดยมีช่วงตั้งแต่ 0.0 ถึง 50.0 เนื่องจากแถบเลื่อนจะหยุดอยู่ที่แต่ละขั้น แถบเลื่อนนี้จึงเป็นช่วงๆ

ผลลัพธ์

เขียนข้อความแสดงแทนที่นี่
รูปที่ 2 แถบเลื่อนที่มีขั้นและช่วงค่าที่กำหนด

แถบเลื่อนช่วง

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

ตัวอย่างต่อไปนี้เป็นตัวอย่างที่ค่อนข้างตรงไปตรงมาของแถบเลื่อนช่วงต่อเนื่อง

ผลลัพธ์

คอมโพเนนต์แถบเลื่อนช่วงที่มีการเลือกค่า 2 ค่า ป้ายกำกับจะแสดงขอบบนและขอบล่างของการเลือก
รูปที่ 3 การใช้แถบเลื่อนช่วง

ข้อมูลสำคัญ

ดูคำจำกัดความ API ฉบับเต็มได้ที่ข้อมูลอ้างอิง Slider พารามิเตอร์หลักๆ สำหรับคอมโพสิเบิล Slider มีดังนี้

  • value: ค่าปัจจุบันของแถบเลื่อน
  • onValueChange: Lambda ที่จะเรียกใช้ทุกครั้งที่มีการเปลี่ยนแปลงค่า
  • enabled: ค่าบูลีนที่ระบุว่าผู้ใช้โต้ตอบกับแถบเลื่อนได้หรือไม่

เมื่อใช้แถบเลื่อนที่ซับซ้อนมากขึ้น คุณจะใช้พารามิเตอร์ต่อไปนี้เพิ่มเติมได้

  • colors: อินสแตนซ์ของ SliderColors ที่ช่วยให้คุณควบคุมสีของแถบเลื่อนได้
  • valueRange: ช่วงของค่าที่แถบเลื่อนรับได้
  • steps: จำนวนรอยบนแถบเลื่อนที่นิ้วหัวแม่มือจับ

นอกจากนี้ คุณยังส่ง Slider ไปยังคอมโพสิเบิล thumb และ track เพื่อปรับแต่งลักษณะที่ปรากฏของคอมโพเนนต์อย่างละเอียดยิ่งขึ้นได้ด้วย

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ