คอมโพเนนต์ Chip
เป็นองค์ประกอบ UI แบบอินเทอร์แอกทีฟขนาดกะทัดรัด โดยแสดงถึงเอนทิตีที่ซับซ้อน เช่น รายชื่อติดต่อหรือแท็ก ซึ่งมักจะมีไอคอนและป้ายกำกับ โดยอาจเป็นแบบเลือกได้ ปิดได้ หรือคลิกได้
ชิป 5 ประเภทและตําแหน่งที่อาจใช้มีดังนี้
- ช่วย: แนะนำผู้ใช้ในระหว่างทำงาน มักปรากฏเป็นองค์ประกอบ UI ชั่วคราวเพื่อตอบสนองต่อข้อมูลจากผู้ใช้
- ตัวกรอง: ช่วยให้ผู้ใช้ปรับแต่งเนื้อหาจากชุดตัวเลือกได้ โดยสามารถเลือกหรือยกเลิกการเลือกได้ และอาจมีไอคอนเครื่องหมายถูกเมื่อเลือก
- อินพุต: แสดงข้อมูลที่ได้จากผู้ใช้ เช่น รายการที่เลือกในเมนู โดยอาจมีไอคอนและข้อความ รวมถึงมี "X" สำหรับการนําออก
- คําแนะนํา: ให้คําแนะนําแก่ผู้ใช้โดยอิงตามกิจกรรมหรืออินพุตล่าสุด โดยปกติจะปรากฏใต้ช่องป้อนข้อมูลเพื่อแจ้งให้ผู้ใช้ดำเนินการ
- ยกระดับ: มีรูปลักษณ์ที่ยกระดับแทนที่จะดูแบน
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
สร้างชิปความช่วยเหลือ
คอมโพสิเบิล AssistChip
เป็นวิธีที่ตรงไปตรงมาในการสร้างชิปความช่วยเหลือที่กระตุ้นให้ผู้ใช้ดำเนินการในทิศทางที่ต้องการ ฟีเจอร์ที่โดดเด่นอย่างหนึ่งคือพารามิเตอร์ leadingIcon
ซึ่งช่วยให้คุณแสดงไอคอนทางด้านซ้ายของชิปได้ ดังที่แสดงในรูปที่ 1 ตัวอย่างต่อไปนี้แสดงวิธีติดตั้งใช้งาน

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


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

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

สร้างชิปที่ยกระดับ
ตัวอย่างทั้งหมดในเอกสารนี้ใช้คอมโพสิเบิลพื้นฐานที่มีรูปลักษณ์แบบแบน หากต้องการชิปที่มีรูปลักษณ์โดดเด่น ให้ใช้คอมโพสิเบิลอย่างใดอย่างหนึ่งต่อไปนี้
ข้อมูลสำคัญ
คอมโพสิเบิล 4 รายการนี้สอดคล้องกับชิป 4 ประเภท และแชร์พารามิเตอร์ต่อไปนี้
label
: สตริงที่ปรากฏบนชิปicon
: ไอคอนที่แสดงที่จุดเริ่มต้นของชิป Composable บางรายการมีพารามิเตอร์leadingIcon
และtrailingIcon
แยกกันonClick
: LAMBDA ที่ชิปเรียกใช้เมื่อผู้ใช้คลิก
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
