Material Design เป็นคู่มือที่ครอบคลุมสำหรับการออกแบบภาพ การเคลื่อนไหว และการโต้ตอบในแพลตฟอร์มและอุปกรณ์ต่างๆ หากต้องการใช้ Material Design ในแอป Android ให้ทำตามหลักเกณฑ์ที่กำหนดไว้ใน ข้อกำหนดของ Material Design หากแอปของคุณใช้ Jetpack Compose คุณสามารถใช้ ไลบรารี Compose Material 3 ได้ หากแอปของคุณ ใช้ View คุณสามารถใช้ ไลบรารี Android Material Components ได้
Android มีฟีเจอร์ต่อไปนี้ที่จะช่วยคุณสร้างแอป Material Design
- ธีมแอป Material Design สำหรับจัดสไตล์วิดเจ็ต UI ทั้งหมด
- วิดเจ็ตสำหรับ View ที่ซับซ้อน เช่น รายการและการ์ด
- API สำหรับเงาและภาพเคลื่อนไหวที่กำหนดเอง
ธีมและวิดเจ็ต Material
หากต้องการใช้ประโยชน์จากฟีเจอร์ Material เช่น การจัดสไตล์สำหรับวิดเจ็ต UI มาตรฐาน และเพื่อปรับปรุงการกำหนดสไตล์ของแอป ให้ใช้ธีมที่อิงตาม Material กับแอป
หากคุณใช้ Android Studio เพื่อสร้างโปรเจ็กต์ Android ระบบจะใช้ธีม Material โดยค่าเริ่มต้น ดูวิธีอัปเดตธีมของโปรเจ็กต์ได้ที่ สไตล์และธีม
ใช้รูปแบบ UX ที่พบบ่อยที่สุดของ Material ดังนี้เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่คุ้นเคย
- โปรโมตการทำงานหลักของ UI ด้วย ปุ่มการทำงานแบบลอย (FAB)
- แสดงแบรนด์ การนำทาง การค้นหา และการทำงานอื่นๆ โดยใช้ แถบแอป
- แสดงและซ่อนการนำทางของแอปด้วย ลิ้นชักการนำทาง
- เลือกจาก Material Components อื่นๆ มากมายสำหรับเลย์เอาต์และการนำทางของแอป เช่น แถบเครื่องมือแบบยุบได้ แท็บ แถบการนำทางด้านล่าง และอื่นๆ หากต้องการดูทั้งหมด โปรดดู แคตตาล็อก Material Components สำหรับ Android
ใช้ Material Icons ที่กำหนดไว้ล่วงหน้าทุกครั้งที่ทำได้ เช่น สำหรับปุ่ม "เมนู" การนำทางสำหรับลิ้นชักการนำทาง ให้ใช้ไอคอน "แฮมเบอร์เกอร์" มาตรฐาน ดูรายการไอคอนที่พร้อมใช้งานได้ที่ Material Design Icons นอกจากนี้ คุณยังนำเข้าไอคอน SVG จากไลบรารี Material Icon ด้วย Vector Asset Studio ของ Android Studio ได้ด้วย
เงาความสูงและการ์ด
นอกจากพร็อพเพอร์ตี้ X และ Y แล้ว View ใน Android ยังมีพร็อพเพอร์ตี้ Z ด้วย พร็อพเพอร์ตี้นี้แสดงถึงระดับความสูงของ View ซึ่งกำหนดสิ่งต่อไปนี้
- ขนาดของเงา: View ที่มีค่า Z สูงกว่าจะสร้างเงาที่ใหญ่กว่า
- ลำดับการวาด: View ที่มีค่า Z สูงกว่าจะปรากฏอยู่ด้านบนของ View อื่นๆ
คุณสามารถใช้ความสูงกับเลย์เอาต์แบบการ์ด ซึ่งจะช่วยให้คุณแสดงข้อมูลสำคัญในการ์ดที่มีลักษณะเป็น Material คุณสามารถใช้วิดเจ็ต CardView เพื่อสร้างการ์ดที่มีระดับความสูงเริ่มต้น ดูข้อมูลเพิ่มเติมได้ที่
สร้างเลย์เอาต์แบบการ์ด
ดูข้อมูลเกี่ยวกับการเพิ่มความสูงให้กับ View อื่นๆ ได้ที่ สร้างเงาและคลิป View
ภาพเคลื่อนไหว
API ภาพเคลื่อนไหวช่วยให้คุณสร้างภาพเคลื่อนไหวที่กำหนดเองสำหรับการตอบสนองการสัมผัสในตัวควบคุม UI, การเปลี่ยนแปลงสถานะ View และการเปลี่ยนผ่านของกิจกรรม
API เหล่านี้ช่วยให้คุณทำสิ่งต่อไปนี้ได้
- ตอบสนองต่อเหตุการณ์การสัมผัสใน View ด้วยภาพเคลื่อนไหวการตอบสนองการสัมผัส
- ซ่อนและแสดง View ด้วยภาพเคลื่อนไหวการเปิดเผยแบบวงกลม
- สลับระหว่างกิจกรรมต่างๆ ด้วยภาพเคลื่อนไหวการเปลี่ยนผ่านของกิจกรรมที่กำหนดเอง
- สร้างภาพเคลื่อนไหวที่เป็นธรรมชาติมากขึ้นด้วยการเคลื่อนไหวแบบโค้ง
- สร้างภาพเคลื่อนไหวการเปลี่ยนแปลงพร็อพเพอร์ตี้ View อย่างน้อย 1 รายการด้วยภาพเคลื่อนไหวการเปลี่ยนแปลงสถานะ View
- แสดงภาพเคลื่อนไหวในDrawable รายการสถานะระหว่างการเปลี่ยนแปลงสถานะ View
ภาพเคลื่อนไหวการตอบสนองการสัมผัสมีอยู่ใน View มาตรฐานหลายรายการ เช่น ปุ่ม API ภาพเคลื่อนไหวช่วยให้คุณปรับแต่งภาพเคลื่อนไหวเหล่านี้และเพิ่มลงใน View ที่กำหนดเองได้
ดูข้อมูลเพิ่มเติมได้ที่ ข้อมูลเบื้องต้นเกี่ยวกับภาพเคลื่อนไหว
Drawable
ความสามารถเหล่านี้ของ Drawable จะช่วยคุณใช้แอป Material Design ได้
- Vector Drawable ปรับขนาดได้โดยไม่สูญเสียความคมชัดและเหมาะสำหรับไอคอนในแอปสีเดียว ดูข้อมูลเพิ่มเติมเกี่ยวกับ Vector Drawable
- การย้อมสี Drawable ช่วยให้คุณกำหนดบิตแมปเป็นมาสก์อัลฟ่าและย้อมสีบิตแมปด้วยสีในรันไทม์ได้ ดูวิธีเพิ่มการย้อมสีลงใน Drawable
- การดึงสี ช่วยให้คุณดึงสีเด่นจากรูปภาพบิตแมปได้โดยอัตโนมัติ ดูวิธี เลือกสีด้วย Palette API