เพิ่มสวิตช์ที่ผู้ใช้สลับได้

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

  • เปิดหรือปิดการตั้งค่า
  • เปิดหรือปิดใช้ฟีเจอร์
  • เลือกตัวเลือก

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

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

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

ความสัมพันธ์

ติดตั้งสวิตช์

ตัวอย่างต่อไปนี้เป็นการใช้งาน Composable ของ Switch ในรูปแบบที่เรียบง่ายที่สุด

ผลลัพธ์

สวิตช์พื้นฐานที่ไม่ได้เลือก
รูปที่ 1 สวิตช์ที่ไม่ได้เลือก
สวิตช์พื้นฐานที่เลือก
รูปที่ 2 สวิตช์ที่เลือก

สร้างนิ้วโป้งที่กำหนดเอง

คุณส่ง Composable ใดก็ได้สำหรับพารามิเตอร์ thumbContent เพื่อสร้างปุ่มเลื่อนที่กำหนดเอง ต่อไปนี้เป็นตัวอย่างสวิตช์ที่ใช้ไอคอนที่กำหนดเองสำหรับปุ่มเลื่อน

ผลลัพธ์

ลักษณะที่ไม่ได้เลือกจะเหมือนกับตัวอย่างใน ส่วนก่อนหน้า อย่างไรก็ตาม เมื่อเลือกแล้ว การใช้งานนี้จะปรากฏดังนี้

สวิตช์ที่ใช้พารามิเตอร์ thumbContent เพื่อแสดงไอคอนที่กำหนดเองเมื่อเลือก
รูปที่ 3 สวิตช์ที่มีไอคอนที่เลือกแบบกำหนดเอง

ใช้สีแบบกำหนดเอง

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

ผลลัพธ์

สวิตช์ที่ใช้พารามิเตอร์สีเพื่อแสดงสวิตช์ที่มีสีแบบกำหนดเองสำหรับทั้งปุ่มเลื่อนและแทร็ก
รูปที่ 4 สวิตช์ที่มีสีแบบกำหนดเอง

ข้อมูลสำคัญ

  • พารามิเตอร์พื้นฐาน

    • checked: สถานะเริ่มต้นของสวิตช์
    • onCheckedChange: การเรียกกลับที่จะเรียกใช้เมื่อสถานะของสวิตช์มีการเปลี่ยนแปลง
    • enabled: การเปิดหรือปิดใช้สวิตช์
    • colors: สีที่ใช้สำหรับสวิตช์
  • พารามิเตอร์ขั้นสูง

    • thumbContent: ใช้เพื่อปรับแต่งลักษณะที่ปรากฏของปุ่มเลื่อนเมื่อมีการเลือก
    • colors: ใช้เพื่อปรับแต่งสีของแทร็กและปุ่มเลื่อน

คอลเล็กชันที่มีคำแนะนำนี้

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

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

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

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