สร้างชิปเพื่อแสดงเอนทิตีที่ซับซ้อน

คอมโพเนนต์ Chip เป็นองค์ประกอบ UI แบบอินเทอร์แอกทีฟขนาดกะทัดรัด โดยแสดงถึงเอนทิตีที่ซับซ้อน เช่น รายชื่อติดต่อหรือแท็ก ซึ่งมักจะมีไอคอนและป้ายกำกับ โดยอาจเป็นแบบเลือกได้ ปิดได้ หรือคลิกได้

ชิป 5 ประเภทและตําแหน่งที่อาจใช้มีดังนี้

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

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

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

ทรัพยากร Dependency

สร้างชิปความช่วยเหลือ

คอมโพสิเบิล AssistChip เป็นวิธีที่ตรงไปตรงมาในการสร้างชิปความช่วยเหลือที่กระตุ้นให้ผู้ใช้ดำเนินการในทิศทางที่ต้องการ ฟีเจอร์ที่โดดเด่นอย่างหนึ่งคือพารามิเตอร์ leadingIcon ซึ่งช่วยให้คุณแสดงไอคอนทางด้านซ้ายของชิปได้ ดังที่แสดงในรูปที่ 1 ตัวอย่างต่อไปนี้แสดงวิธีติดตั้งใช้งาน

ชิปความช่วยเหลือแบบง่าย
รูปที่ 1 ชิปความช่วยเหลือ

สร้างชิปตัวกรอง

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

ผลลัพธ์

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

สร้างชิปอินพุต

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

การใช้งานต่อไปนี้แสดงชิปอินพุตที่อยู่ในสถานะที่เลือก ผู้ใช้ปิดชิปเมื่อกดชิป

ผลลัพธ์

ชิปอินพุตที่มีรูปโปรไฟล์และไอคอนต่อท้าย
รูปที่ 4 ใส่ชิป

สร้างชิปคำแนะนำ

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

ลองดูการใช้งาน SuggestionChip นี้

ผลลัพธ์

ชิปความช่วยเหลือแบบง่าย
รูปที่ 5 ชิปความช่วยเหลือ

สร้างชิปที่ยกระดับ

ตัวอย่างทั้งหมดในเอกสารนี้ใช้คอมโพสิเบิลพื้นฐานที่มีรูปลักษณ์แบบแบน หากต้องการชิปที่มีรูปลักษณ์โดดเด่น ให้ใช้คอมโพสิเบิลอย่างใดอย่างหนึ่งต่อไปนี้

ข้อมูลสำคัญ

คอมโพสิเบิล 4 รายการนี้สอดคล้องกับชิป 4 ประเภท และแชร์พารามิเตอร์ต่อไปนี้

  • label: สตริงที่ปรากฏบนชิป
  • icon: ไอคอนที่แสดงที่จุดเริ่มต้นของชิป Composable บางรายการมีพารามิเตอร์ leadingIcon และ trailingIcon แยกกัน
  • onClick: LAMBDA ที่ชิปเรียกใช้เมื่อผู้ใช้คลิก

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

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

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

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

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