ปรับเลย์เอาต์

การออกแบบแบบปรับอัตโนมัติคือการออกแบบเลย์เอาต์ที่ปรับให้เข้ากับเบรกพอยต์และอุปกรณ์ที่เฉพาะเจาะจง

วิธีใช้เลย์เอาต์แบบปรับอัตโนมัติอย่างมีประสิทธิภาพ

• ก่อนอื่น ให้พิจารณาความกว้างของคลาสหน้าต่างของอุปกรณ์เพื่อกำหนดการเปลี่ยนแปลงเลย์เอาต์ จากนั้นปรับความสูง
• Android ใช้แนวคิดการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์เช่นเดียวกับการพัฒนาเว็บ โดยใช้ตารางกริดและรูปภาพที่ยืดหยุ่นเพื่อสร้างเลย์เอาต์ที่ตอบสนอง ต่อบริบทได้อย่างมีประสิทธิภาพ

ดูหลักเกณฑ์การออกแบบเกี่ยวกับการปรับเลย์เอาต์ให้เข้ากับขนาดหน้าจอที่ขยายได้ในคู่มือนักพัฒนาแอป Support different screen sizes ใน Compose และหน้าApplying Layout ของ M3 นอกจากนี้ คุณยังดูแกลเลอรีCanonical สำหรับหน้าจอขนาดใหญ่ของ Android เพื่อเป็นแรงบันดาลใจและแนวทางในการใช้ เลย์เอาต์สำหรับหน้าจอขนาดใหญ่ได้ด้วย

คิดแบบปรับเปลี่ยนได้

คุณควรใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์เป็นค่าเริ่มต้นเมื่อออกแบบแอป ตลาดอุปกรณ์เคลื่อนที่ Android มีการพัฒนาอยู่ตลอดเวลา ดังนั้นคุณจึงไม่ควรมองว่าอุปกรณ์เคลื่อนที่คือโทรศัพท์มือถือเท่านั้น แต่ควรครอบคลุมทุกอย่างตั้งแต่โทรศัพท์มือถือ อุปกรณ์พับได้ แท็บเล็ต และอื่นๆ

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

วิธีการและคุณภาพ

คุณสามารถเริ่มต้นด้วยการออกแบบหน้าจอหลัก (สื่อสารแนวคิดสำคัญหรือแอปของคุณ) โดยใช้ขนาดคลาสเป็นเบรกพอยท์เพื่อเป็นแนวทางสำหรับส่วนอื่นๆ ของแอป ประสบการณ์ที่โดดเด่นเหล่านี้จะช่วยเน้นย้ำคุณภาพของฟีเจอร์การปรับเปลี่ยนและฟอร์มแฟกเตอร์ที่แตกต่าง หรือออกแบบเนื้อหาให้ตอบสนองในระดับพื้นฐานโดย การระบุวิธีจำกัด ขยาย หรือจัดวางเนื้อหาใหม่

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

อนุญาตให้องค์ประกอบเลื่อนและจัดเรียงใหม่โดยมุ่งเน้นที่วิธีปรับองค์ประกอบให้เข้ากับ ตารางกริด พิจารณาการเปลี่ยนแปลงแนวตั้งสำหรับองค์ประกอบและรวมกับการเปลี่ยนแปลงข้อจำกัดและการนำเสนอ

แอปคุณภาพสูงควรเป็นไปตามระดับที่แตกต่างในหลักเกณฑ์แอปหลักและ คุณภาพสำหรับหน้าจอขนาดใหญ่

ดูข้อมูลเพิ่มเติมเกี่ยวกับเลย์เอาต์ได้ที่หน้าทำความเข้าใจเลย์เอาต์ของ Material Design 3 (M3)