สร้างปุ่ม

ปุ่มช่วยให้ผู้ใช้ทริกเกอร์การดำเนินการที่กําหนดไว้ได้ ปุ่มมี 5 ประเภท ได้แก่

ประเภท

รูปลักษณ์

วัตถุประสงค์

กรอกแล้ว

พื้นหลังสีทึบที่มีข้อความตัดกัน

สําหรับการดําเนินการหลัก เช่น "ส่ง" และ "บันทึก" เอฟเฟกต์เงาช่วยเน้นความสำคัญของปุ่ม

Tonal

สีพื้นหลังจะแตกต่างกันไปตามพื้นผิว

สําหรับการกระทําหลักหรือสําคัญ ปุ่มแบบเต็มจะเพิ่มน้ำหนักให้กับภาพและเหมาะกับการดําเนินการต่างๆ เช่น "เพิ่มลงในรถเข็น" และ "ลงชื่อเข้าใช้"

สูงกว่าปกติ

เงาช่วยให้โดดเด่น

สําหรับการกระทําหลักหรือสําคัญ เพิ่มระดับความสูงเพื่อให้ปุ่มโดดเด่นมากขึ้น

มีเส้นขอบ

มีเส้นขอบที่ไม่มีสี

สําหรับการกระทําที่สําคัญแต่ไม่สําคัญหลัก ปุ่มที่เติมขอบเหมาะที่จะจับคู่กับปุ่มอื่นๆ เพื่อบ่งบอกถึงการดำเนินการสำรองอย่างอื่น เช่น "ยกเลิก" หรือ "กลับ"

ข้อความ

ข้อความที่ไม่มีพื้นหลังหรือเส้นขอบ

สําหรับการดําเนินการที่สําคัญน้อยกว่า เช่น ลิงก์การนําทาง หรือการดําเนินการรอง เช่น "ดูข้อมูลเพิ่มเติม" หรือ "ดูรายละเอียด"

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

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

ทรัพยากร Dependency

สร้างปุ่มแบบเติมสี

คอมโพเนนต์ปุ่มแบบเติมสีใช้คอมโพสิเบิล Button พื้นฐาน โดยค่าเริ่มต้น รูปภาพจะเติมด้วยสีพื้น

ผลลัพธ์

ปุ่มแบบเติมสีที่มีพื้นหลังสีม่วงซึ่งเขียนว่า "filled"
รูปที่ 1 ปุ่มแบบเติมสี

สร้างปุ่มโทนสีแบบเติม

คอมโพเนนต์ปุ่มโทนสีแบบเติมใช้คอมโพสิเบิล FilledTonalButton โดยค่าเริ่มต้น รูปภาพจะเติมด้วยสีโทน

ผลลัพธ์

ปุ่มโทนสีที่มีพื้นหลังสีม่วงอ่อนซึ่งเขียนว่า "filled"
รูปที่ 2 ปุ่มโทนสี

สร้างปุ่มแบบมีเส้นขอบ

คอมโพเนนต์ปุ่มที่มีเส้นขอบใช้คอมโพสิเบิล OutlinedButton โดยจะปรากฏขึ้นพร้อมเส้นขอบโดยค่าเริ่มต้น

ผลลัพธ์

ปุ่มแบบมีเส้นขอบโปร่งใสที่มีเส้นขอบสีเข้มซึ่งระบุว่า "มีเส้นขอบ"
รูปที่ 3 ปุ่มแบบเติมขอบ

สร้างปุ่มที่ยกระดับ

คอมโพเนนต์ปุ่มที่ยกระดับใช้คอมโพสิเบิล ElevatedButton โดยจะมีเงาที่แสดงถึงเอฟเฟกต์การยกระดับโดยค่าเริ่มต้น และปรากฏเป็นปุ่มที่มีเส้นขอบและมีเงา

ผลลัพธ์

ปุ่มแบบยกขึ้นที่มีพื้นหลังสีเทาซึ่งระบุว่า "ยกขึ้น"
รูปที่ 4 ปุ่มแบบยกขึ้น

สร้างปุ่มข้อความ

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

ผลลัพธ์

ปุ่มข้อความที่ระบุว่า "ปุ่มข้อความ"
รูปที่ 5 ปุ่มข้อความ

ข้อมูลสำคัญ

  • onClick: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่ม
  • enabled: เมื่อเป็นเท็จ พารามิเตอร์นี้จะทําให้ปุ่มปรากฏขึ้นโดยใช้งานไม่ได้
  • colors: อินสแตนซ์ของ ButtonColors ที่ใช้กำหนดสีที่ใช้ในปุ่ม
  • contentPadding: ระยะห่างจากขอบภายในปุ่ม

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

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

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

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

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