เลย์เอาต์จะกำหนดโครงสร้างภาพสำหรับผู้ใช้เพื่อโต้ตอบกับแอป เช่น ในกิจกรรม Android มีคลัง องค์ประกอบพื้นฐาน และเทคนิคต่างๆ มากมายในการแสดงและจัดตำแหน่งเนื้อหา
สรุปประเด็นสำคัญ
ปฏิบัติตามพื้นที่ปลอดภัยของอุปกรณ์ ซึ่งรวมถึงบางส่วนของ UI เช่น ส่วนที่ตัดออกของจอแสดงผล ส่วนที่ฝังจากขอบถึงขอบ จอแสดงผลที่ขอบ แป้นพิมพ์ซอฟต์แวร์ และแถบระบบ
สิ่งที่ควรทำ: จัดเลย์เอาต์ที่ยืดหยุ่นเพื่อให้ผู้ใช้โต้ตอบกับแป้นพิมพ์ได้
วิดีโอ 1: การจัดวางที่ยืดหยุ่นเพื่อให้ผู้ใช้โต้ตอบได้
วางการโต้ตอบที่สําคัญ เช่น การนําทางหลัก ไว้ในพื้นที่หน้าจอที่เข้าถึงได้
รูปที่ 1: ปุ่มการทำงานแบบลอย (FAB) เป็นจุดโต้ตอบที่เห็นได้ชัดและเข้าถึงได้ ใช้การรวมกลุ่มเพื่อจัดกลุ่มเนื้อหาที่เกี่ยวข้องเพื่อแนะนําผู้ใช้ไปยังเนื้อหาและการดําเนินการต่างๆ
รูปที่ 2: การ์ดที่ใช้การรวมอย่างชัดแจ้งเพื่อจัดกลุ่มเนื้อหาที่มีการดำเนินการที่เกี่ยวข้อง จัดวางเนื้อหาที่คล้ายกันให้สอดคล้องกับองค์ประกอบ UI
สิ่งที่ไม่ควรทำ: ทำให้อ่านยากด้วยการเว้นวรรคองค์ประกอบต่างๆ อย่างไม่สอดคล้องกัน ซึ่งอาจทำให้การออกแบบดูไม่เป็นระเบียบ
สิ่งที่ควรทำ: กำหนดระยะห่างที่สม่ำเสมอระหว่างองค์ประกอบที่คล้ายกัน
รูปที่ 3: อย่ารบกวนความสะดวกในการอ่าน อย่ายึดติดกับแนวตั้งหรือเลย์เอาต์ในอุดมคติ: ให้พิจารณาสัดส่วนภาพ ขนาด และความละเอียดที่แตกต่างกันซึ่งผู้ใช้อาจพบ
อย่าแสดงการกระทําต่อยอดดูมากเกินไปจนผู้ใช้สับสน
เมื่อสร้างเลย์เอาต์ที่กำหนดเอง ให้ระบุวิธีที่เนื้อหาควรอยู่ในเลย์เอาต์โดยใช้คำจำกัดความของการจัดแนว ข้อจำกัด หรือแรงโน้มถ่วง ระบุวิธีที่รูปภาพควรตอบสนองต่อคอนเทนเนอร์เพื่อแสดงอย่างถูกต้อง
ส่วนต่างๆ ของหน้าจอแอป Android ทั่วไป
แอป Android ส่วนใหญ่ประกอบด้วยส่วนต่างๆ ที่เรียกว่าแถบระบบ พื้นที่นำทาง และเนื้อหา
แถบระบบ
แถบสถานะและแถบนําทาง (เรียกรวมกันว่าแถบระบบ) จะแสดงข้อมูลสําคัญ เช่น ระดับแบตเตอรี่ เวลา และการแจ้งเตือน รวมถึงให้การควบคุมอุปกรณ์โดยตรงจากทุกที่ อ่านเพิ่มเติมเกี่ยวกับแถบของระบบ
ภูมิภาคการนำทาง
การนําทางแสดงถึงสิ่งต่างๆ ที่ผู้ใช้สามารถทำได้ ซึ่งช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ภายในแอป เข้าถึงการดําเนินการที่สําคัญ หรือไปยังส่วนต่างๆ ของแพลตฟอร์ม Android ได้
บริเวณของร่างกาย
ภูมิภาคเนื้อหาแสดงเนื้อหาบนหน้าจอ เนื้อหาส่วนเนื้อหาประกอบด้วยการจัดกลุ่มและพารามิเตอร์เลย์เอาต์เพิ่มเติม โดยต้องอยู่ภายใต้ภูมิภาคการนำทางและแถบระบบ
ประกาศ WindowCompat.setDecorFitsSystemWindows(window, false) สำหรับส่วนตัดที่ขอบ
หากต้องการกำหนดองค์ประกอบและรูปแบบการนําทางที่เหมาะสมสําหรับเลย์เอาต์ ให้พยายามทําความเข้าใจวิธีที่ผู้ใช้โต้ตอบกับเนื้อหา และวิธีที่ผู้ใช้ไปยังส่วนต่างๆ ของสถาปัตยกรรมข้อมูลของแอป ความเข้าใจนี้จะช่วยชี้แนะการออกแบบให้มุ่งเน้นผู้ใช้มากขึ้นด้วยการสร้าง UI ที่ผู้ใช้สามารถดำเนินการได้
องค์ประกอบและโครงสร้างของเนื้อหา
สร้างลำดับและจังหวะที่ยืดหยุ่นด้วยโครงสร้างและวิธีการควบคุมเนื้อหา
โครงสร้างพื้นฐาน: ใช้ระยะขอบและคอลัมน์เป็นขอบเขตที่มองเห็นได้
หากต้องการเริ่มสร้างโครงสร้างที่มั่นคงด้วยขอบเขตที่สม่ำเสมอ ให้เพิ่มระยะขอบและคอลัมน์ลงในเลย์เอาต์
ระยะขอบจะเว้นช่องว่างที่ขอบด้านซ้ายและขวาของหน้าจอและเนื้อหา ค่าระยะขอบมาตรฐานสำหรับขนาดกะทัดรัดคือ 16 dp แต่ระยะขอบควรปรับให้เหมาะกับหน้าจอขนาดใหญ่ เนื้อหาและการดำเนินการของส่วนเนื้อหาของแอปต้องอยู่ภายในและสอดคล้องกับระยะขอบเหล่านี้
นอกจากนี้ คุณยังตรวจสอบโซนปลอดภัยหรือส่วนตัดของภาพในขั้นตอนนี้ได้ แถบระบบที่ฝังอยู่ช่วยป้องกันไม่ให้การดำเนินการที่สําคัญอยู่ใต้แถบระบบ ดูรายละเอียดได้ที่วาดเนื้อหาไว้หลังแถบระบบ
ใช้คอลัมน์เพื่อสร้างโครงสร้างตารางกริดที่ยืดหยุ่นสำหรับการจัดแนวที่สอดคล้องกัน และเพื่อกำหนดแนวตั้งให้กับเลย์เอาต์โดยการแบ่งเนื้อหาภายในพื้นที่เนื้อหา เนื้อหาจะอยู่ในบริเวณของหน้าจอที่มีคอลัมน์ คอลัมน์เหล่านี้ช่วยจัดระเบียบเลย์เอาต์ของคุณ และให้โครงสร้างที่สะดวกในการจัดเรียงองค์ประกอบ
ใช้ตารางคอลัมน์เพื่อจัดแนวเนื้อหาให้สอดคล้องกับตารางกริดพื้นฐาน แต่ยังคงมีขนาดที่ยืดหยุ่น ตารางกริดคอลัมน์สามารถรองรับปัจจัยรูปแบบต่างๆ ได้โดยการเปลี่ยนขนาดคอลัมน์และจํานวนคอลัมน์ตามขนาดหน้าจอที่ต้องการ ณ จุดหนึ่งๆ พร้อมกับอนุญาตให้เนื้อหาปรับขนาดได้ด้วย หลีกเลี่ยงการกำหนดตารางกริดคอลัมน์ให้ละเอียดเกินไป ตารางกริดพื้นฐานมีไว้เพื่อจัดให้มีหน่วยระยะห่างที่สอดคล้องกัน
โปรดระมัดระวังในการสร้างตารางกริดของแถวที่มาพร้อมกับแถวอื่นๆ เนื่องจากอาจจํากัดการปรับขนาดเนื้อหาแนวนอนในแนวนอนและรูปแบบต่างๆ โดยปกติแล้วการกำหนดกฎการเว้นวรรคจะให้ความสอดคล้องของภาพที่ต้องการ
ใช้การรวมเพื่อจัดกลุ่มองค์ประกอบให้เห็นภาพ
การรวมหมายถึงการใช้พื้นที่ว่างและองค์ประกอบที่มองเห็นได้ร่วมกันเพื่อสร้างการจัดกลุ่มภาพ คอนเทนเนอร์คือรูปทรงที่แสดงถึงพื้นที่ปิด ในเลย์เอาต์เดียว คุณสามารถจัดกลุ่มองค์ประกอบที่มีเนื้อหาหรือฟังก์ชันการทำงานคล้ายกันไว้ด้วยกัน และแยกออกจากองค์ประกอบอื่นๆ โดยใช้พื้นที่ว่าง ตัวแบบอักษร และตัวแบ่ง
คุณสามารถจัดกลุ่มรายการที่คล้ายกันไว้ด้วยกันโดยใช้พื้นที่ว่างหรือส่วนแบ่งที่มองเห็นได้เพื่อช่วยแนะนำผู้ใช้ไปยังส่วนต่างๆ ของเนื้อหา
การรวมเนื้อหาโดยนัยใช้พื้นที่ว่างเพื่อจัดกลุ่มเนื้อหาเพื่อสร้างขอบเขตของคอนเทนเนอร์ ขณะที่การรวมเนื้อหาโดยชัดแจ้งใช้วัตถุ เช่น เส้นแบ่งและการ์ด เพื่อจัดกลุ่มเนื้อหาเข้าด้วยกัน
รูปภาพต่อไปนี้แสดงตัวอย่างการใช้การรวมแบบไม่เจาะจงเพื่อรวมส่วนหัวและข้อความหลัก ตารางกริดของคอลัมน์ใช้เพื่อจัดแนวและสร้างการจัดกลุ่ม ไฮไลต์จะอยู่ในการ์ดอย่างชัดเจน การใช้ไอคอนและลําดับชั้นของประเภทเพื่อแยกความแตกต่างของภาพให้ดียิ่งขึ้น
การวางตำแหน่งเนื้อหา
Android มีวิธีจัดการองค์ประกอบเนื้อหาในคอนเทนเนอร์ที่เกี่ยวข้องหลายวิธี ซึ่งช่วยจัดตำแหน่งองค์ประกอบอย่างเหมาะสมได้ เช่น แรงโน้มถ่วง ระยะห่าง และการขยาย
Gravity คือมาตรฐานในการวางวัตถุภายในคอนเทนเนอร์ที่อาจมีขนาดใหญ่กว่าสำหรับ Use Case ที่เฉพาะเจาะจง รูปภาพต่อไปนี้แสดงตัวอย่างการวางตำแหน่งวัตถุที่เริ่มต้นและตรงกลาง (1), ด้านบนและตรงกลางในแนวนอน (2), ซ้ายล่าง (3) และท้ายและขวา (1)
การปรับขนาด
การปรับขนาดเป็นสิ่งสําคัญในการรองรับเนื้อหาแบบไดนามิก การวางแนวของอุปกรณ์ และขนาดหน้าจอ องค์ประกอบอาจคงที่หรือปรับขนาดก็ได้
การสังเกตวิธีที่รูปภาพแสดงภายในคอนเทนเนอร์ด้วยการปรับขนาดและตำแหน่งเป็นสิ่งสำคัญเพื่อให้รูปภาพปรากฏในลักษณะที่คุณต้องการ ไม่ว่าจะอยู่ในบริบทของอุปกรณ์ใดก็ตาม ไม่เช่นนั้นโฟกัสหลักของรูปภาพอาจถูกตัดออก รูปภาพอาจเล็กหรือใหญ่เกินไปสำหรับเลย์เอาต์ หรืออาจเกิดผลอื่นๆ ที่ไม่พึงประสงค์
เนื้อหาที่ไม่มีหมายเหตุอาจปรากฏแตกต่างจากที่คุณคาดหวังหรือต้องการ
เนื้อหาที่ปักหมุด
องค์ประกอบหลายอย่างมีการโต้ตอบ การสไลด์ และการวางตำแหน่งในตัวด้วยช่องหรือสคาฟ์เฟิลด องค์ประกอบบางอย่างสามารถแก้ไขให้คงที่แทนที่จะตอบสนองต่อการเลื่อน เช่น ปุ่มการดำเนินการแบบลอย (FAB) ที่มีการดำเนินการที่สำคัญ
การจัดข้อความ
ใช้ AlignmentLine เพื่อสร้างเส้นการจัดตำแหน่งที่กำหนดเอง ซึ่งเลย์เอาต์หลักจะใช้เพื่อจัดตำแหน่งและวางเลย์เอาต์ย่อยได้
สิ่งที่ไม่ควรทำ: ทำให้อ่านยากด้วยการเว้นวรรคองค์ประกอบต่างๆ อย่างไม่สอดคล้องกัน ซึ่งอาจทำให้การออกแบบดูไม่เป็นระเบียบ
สิ่งที่ควรทำ: กำหนดระยะห่างที่สม่ำเสมอระหว่างองค์ประกอบที่คล้ายกัน
เลย์เอาต์คอมโพเนนต์
คอมโพเนนต์ Material 3 มีการกําหนดค่าและสถานะของตนเองสําหรับการโต้ตอบและเนื้อหา
คอมโพซมีเลย์เอาต์ที่สะดวกสำหรับการรวม Material Components เข้าด้วยกันเป็นรูปแบบหน้าจอทั่วไป คอมโพสิเบิล เช่น Scaffold จะมีช่องสำหรับคอมโพเนนต์ต่างๆ และองค์ประกอบอื่นๆ ของหน้าจอ อ่านเพิ่มเติมเกี่ยวกับคอมโพเนนต์และเลย์เอาต์ของ Material
เลย์เอาต์และรูปแบบการนำทาง
หากแอปมีปลายทางหลายแห่งที่ผู้ใช้ไปยังได้ เราขอแนะนำให้ใช้การจับคู่เลย์เอาต์และการนำทางที่แอปอื่นๆ มักใช้ เนื่องจากผู้ใช้จํานวนมากมีรูปแบบความคิดสําหรับการจับคู่เหล่านี้อยู่แล้ว แอปของคุณจึงใช้งานได้ง่ายขึ้นสําหรับผู้ใช้เหล่านั้น
การจับคู่เลย์เอาต์และการนำทาง
แถบนำทางและลิ้นชักการนำทางแบบโมดัลจะใช้เป็นรูปแบบการนำทางหลักสำหรับมุมมองเลย์เอาต์หลักและปลายทางการนำทางหลัก
แถบนําทางสามารถรองรับปลายทางการนำทาง 3-5 แห่งในลําดับชั้นเดียวกัน คอมโพเนนต์นี้จะเปลี่ยนเป็นแถบนําทางสําหรับหน้าจอขนาดใหญ่
แม้ว่าลิ้นชักการนำทางจะรองรับปลายทางการนำทางได้มากกว่า 5 รายการ แต่รูปแบบนี้ก็ไม่เหมาะเท่าแถบนําทางเนื่องจากต้องเข้าถึงแถบด้านบนในขนาดกะทัดรัด
แท็บและแถบแอปด้านล่างของ Material 3 เป็นรูปแบบการนําทางรองที่คุณสามารถใช้เพื่อเสริมการนําทางหลักหรือปรากฏในมุมมองสำหรับเด็ก
การดำเนินการกับเลย์เอาต์
มีการควบคุมเพื่อให้ผู้ใช้ดำเนินการต่างๆ ได้ รูปแบบที่พบบ่อย ได้แก่ การดำเนินการในแถบด้านบน ปุ่มการทำงานแบบลอย (FAB) และเมนู
สําหรับการดําเนินการที่สําคัญที่สุด FAB จะมีปุ่มขนาดใหญ่ที่เห็นได้ชัดเจนสําหรับผู้ใช้ ระบุการดำเนินการเพียงรายการเดียวในแต่ละครั้งในระดับนี้ FAB อาจปรากฏในหลายขนาดและแบบขยายซึ่งมีป้ายกำกับ ใช้ Scaffold เพื่อปักหมุด FAB เพื่อให้มองเห็นอยู่เสมอแม้ขณะเลื่อน
คุณสามารถวางการดำเนินการรองภายในแถบด้านบน หรือภายในหน้าเว็บหากมีการจัดกลุ่มไว้ใกล้กับเนื้อหาที่เกี่ยวข้อง
สำหรับการดำเนินการเพิ่มเติมที่ไม่จําเป็นต้องใช้ทันทีหรือบ่อยครั้ง ให้เพิ่มการดำเนินการเหล่านั้นในเมนูรายการเพิ่มเติม
เลย์เอาต์ Canonical
ใช้เลย์เอาต์แคนอนิกเป็นจุดเริ่มต้น ซึ่งเป็นองค์ประกอบที่พร้อมใช้งานซึ่งช่วยให้เลย์เอาต์ปรับเปลี่ยนตามกรณีการใช้งานทั่วไปและขนาดหน้าจอได้ เลย์เอาต์เหล่านี้มีความสวยงามและใช้งานได้จริง โดยอิงตามคำแนะนำสำหรับ Material 3
เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะที่ทําให้การใช้งานเลย์เอาต์ตรงไปตรงมาและเชื่อถือได้โดยใช้ Jetpack Compose หรือ views API
เลย์เอาต์รายละเอียดรายการ
เลย์เอาต์รายการแบบละเอียดช่วยให้ผู้ใช้สำรวจรายการที่มีรายละเอียดที่อธิบาย อธิบายเพิ่มเติม หรือข้อมูลเสริมอื่นๆ ได้ สำหรับหน้าจอขนาดกะทัดรัด คุณจะเห็นเฉพาะมุมมองรายการหรือมุมมองรายละเอียด การแสดงคอลเล็กชันเนื้อหาในเลย์เอาต์แบบแถวเป็นรูปแบบเลย์เอาต์ที่พบบ่อยที่สุดสำหรับแอป รายละเอียดแบบรายการเหมาะสําหรับแอปรับส่งข้อความ เครื่องมือจัดการรายชื่อติดต่อ โปรแกรมเรียกดูไฟล์ หรือแอปใดก็ตามที่เนื้อหาสามารถจัดระเบียบเป็นรายการรายการที่จะแสดงข้อมูลเพิ่มเติม
เนื้อหาอาจเป็นแบบคงที่หรือแบบไดนามิกก็ได้
- เนื้อหาแบบไดนามิกคือเนื้อหาที่แอปแสดงขณะใช้งาน และเหมาะสําหรับการแสดงเนื้อหาที่ผู้ใช้สร้างขึ้นหรือแสดงถึงค่ากําหนดหรือการกระทำของผู้ใช้ ตัวอย่างเช่น ลองจินตนาการถึงแอปรูปภาพที่มีรายการรูปภาพที่ผู้ใช้สร้างขึ้นซึ่งเลื่อนดูได้ ซึ่งจะแตกต่างกันไปสำหรับผู้ใช้แต่ละรายและเปลี่ยนแปลงเมื่อผู้ใช้อัปโหลดรูปภาพเพิ่มเติม รูปภาพเหล่านี้เป็นเนื้อหาแบบไดนามิก
- เนื้อหาแบบคงที่แสดงถึงเนื้อหาแบบฮาร์ดโค้ด ซึ่งแก้ไขได้โดยการทําการเปลี่ยนแปลงโค้ดของแอปโดยตรงเท่านั้น ตัวอย่างเนื้อหาแบบคงที่ ได้แก่ รูปภาพและข้อความที่ผู้ใช้ทุกคนอาจเห็น
ไฟล์ Figma ตอนนี้มีใน Android มีตัวอย่างเลย์เอาต์หลายแบบ ตัวอย่างต่อไปนี้แสดงคอลเล็กชันเนื้อหาแบบ 1 มิติ
ดูรายการใน Material 3 เพื่อดูคำแนะนำเพิ่มเติมเกี่ยวกับการออกแบบคอมโพเนนต์และข้อมูลจำเพาะของรายการ
เลย์เอาต์ฟีด
เลย์เอาต์ฟีดจะจัดเรียงองค์ประกอบเนื้อหาที่เทียบเท่ากันในตารางกริดที่กำหนดค่าได้เพื่อให้ดูเนื้อหาจำนวนมากได้อย่างรวดเร็วและสะดวก (ดูหลักเกณฑ์ของวัสดุ 3 สำหรับการใช้การ์ดในคอลเล็กชัน) ฟีดอาจเป็นการกำหนดค่าแบบรายการหรือตารางกริดในจอแสดงผลแบบกะทัดรัด ซึ่งมักจะอยู่ในรูปแบบการ์ดหรือการ์ดไทล์ เนื้อหาอาจเป็นแบบไดนามิก ซึ่งหมายความว่ามีการ "ป้อน" เนื้อหาจากแหล่งที่มาภายนอกแบบไดนามิก เช่น API
เลย์เอาต์ตารางกริดประกอบด้วยทั้งแถวและคอลัมน์ที่สร้างขึ้นตามหลักการการรวมอย่างนัยหรืออย่างชัดแจ้ง (ดูข้อมูลเพิ่มเติมเกี่ยวกับการจำกัดในหน้านี้) คุณสามารถใช้เลย์เอาต์ตารางกริดอย่างเข้มงวดมากขึ้นหรือเยื้องเพื่อให้แถวและคอลัมน์มีความหลากหลายก็ได้ ทั้ง 2 รายการควรใช้การเว้นวรรคและตรรกะที่สอดคล้องกันเพื่อไม่ให้ผู้ใช้สับสน ดูหลักเกณฑ์ Material 3 เกี่ยวกับการออกแบบฟีด
คุณสามารถใช้เลย์เอาต์ฟีดใน "เขียน" ด้วยรายการแบบ Lazy หรือตารางกริดแบบ Lazy หรือในมุมมองด้วย RecyclerView หรือ CardView
เลย์เอาต์แผงที่รองรับ
มุมมองบนอุปกรณ์เคลื่อนที่อาจต้องใช้เนื้อหาหรือการควบคุมที่รองรับ โดยปกติแล้ว แผงควบคุมจะอยู่ในรูปชีตหรือกล่องโต้ตอบ ซึ่งช่วยให้มุมมองหลักไม่กระจัดกระจายและโฟกัสได้ ดูคําแนะนํา M3 สําหรับการใช้เลย์เอาต์ Canonical ของแผงสนับสนุน
ดูข้อมูลเกี่ยวกับคำแนะนำ M3 สำหรับชีตด้านล่าง
เลย์เอาต์แบบสัมพัทธ์
อินพุต เนื้อหา หรือการดำเนินการอื่นๆ อาจปรากฏสัมพันธ์กันหรือถูกจำกัดอยู่ในคอนเทนเนอร์หลัก เลย์เอาต์สามารถปรับแต่งได้มากขึ้น แต่อย่าลืมจัดกลุ่ม คอลัมน์ และเว้นวรรคให้สอดคล้องกัน
เลย์เอาต์ยังใช้เลย์เอาต์หลายประเภทผสมผสานกันได้ เช่น คุณอาจจับคู่ภาพสไลด์หรือการเลื่อนแนวนอนกับการ์ดแนวตั้ง หรือจะนำเสนอแผนภูมิที่กําหนดเองพร้อมข้อมูลรายการแนวตั้งก็ได้
คุณสามารถนำเสนอเนื้อหาในแถวหรือคอลัมน์ที่เลื่อนได้ด้วยแถวและคอลัมน์แบบ Lazy
ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นฐานของเลย์เอาต์ Compose และองค์ประกอบของ Composable
การตรวจสอบสิทธิ์เป็นเลย์เอาต์แบบสัมพัทธ์ทั่วไปดังที่แสดงในรูปภาพต่อไปนี้
เลย์เอาต์แบบเต็มหน้าจอเป็นเลย์เอาต์ทั่วไปอีกรูปแบบหนึ่งที่ใช้ในโหมดสมจริง
หากทํางานกับมุมมองแทนการเขียน คุณจะสามารถใช้ ConstraintLayout เพื่อวางเลย์เอาต์มุมมองตามความสัมพันธ์ระหว่างมุมมองที่สัมพันธ์กันและเลย์เอาต์หลัก ซึ่งช่วยให้มีเลย์เอาต์ขนาดใหญ่และซับซ้อนได้
ConstraintLayout ช่วยให้คุณสร้างทั้งหมดด้วยการลากและวางแทนการแก้ไข XML โดยใช้เครื่องมือแก้ไขเลย์เอาต์ ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้าง UI ด้วยเครื่องมือแก้ไขเลย์เอาต์
ปรับเลย์เอาต์
การออกแบบที่ปรับเปลี่ยนได้คือการออกแบบเลย์เอาต์ที่ปรับให้เข้ากับจุดแบ่งหน้าจอและอุปกรณ์ที่เฉพาะเจาะจง โดยปกติแล้วเราจะพิจารณาความกว้างของอุปกรณ์เพื่อพิจารณาว่าควรเปลี่ยนหรือปรับเลย์เอาต์ที่ใด ทั้งเว็บและ Android ต่างก็ใช้แนวคิดการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ เช่น ตารางกริดและรูปภาพที่ยืดหยุ่น เพื่อสร้างเลย์เอาต์ที่ตอบสนองต่อบริบทได้ดียิ่งขึ้น
ดูหลักเกณฑ์การออกแบบเกี่ยวกับการปรับเลย์เอาต์ให้เหมาะกับขนาดหน้าจอที่ขยายใหญ่ขึ้นได้ในคู่มือนักพัฒนาซอฟต์แวร์รองรับหน้าจอขนาดต่างๆ ในเครื่องมือเขียนและหน้า M3การใช้เลย์เอาต์ นอกจากนี้ คุณยังดูแรงบันดาลใจและการใช้งานเลย์เอาต์หน้าจอขนาดใหญ่ได้จากแกลเลอรี Canonical สำหรับหน้าจอขนาดใหญ่ของ Android
แม้ว่าแอปบางแอปไม่จำเป็นต้องพร้อมให้บริการบนหน้าจอทุกขนาด แต่การรองรับหน้าจอทุกขนาดจะช่วยให้ผู้ใช้มีอิสระมากขึ้นในด้านความสะดวกสบายในการใช้งาน ความสามารถในการใช้งาน และคุณภาพของแอป
- คุณสามารถออกแบบหน้าจอหลัก (สื่อสารแนวคิดสําคัญหรือแอปของคุณ) โดยให้ขนาดชั้นเรียนเป็นจุดแบ่งเพื่อใช้เป็นแนวทาง
- หรือออกแบบเนื้อหาให้ปรับเปลี่ยนได้ด้วยการระบุวิธีจำกัด ขยาย หรือจัดเรียงใหม่ของเนื้อหา
ดูข้อมูลเพิ่มเติมเกี่ยวกับเลย์เอาต์ได้ที่หน้าการทำความเข้าใจเลย์เอาต์ของ Material Design 3 (M3)
จำนวนการดูเว็บ
WebView คือมุมมองที่แสดงหน้าเว็บในแอป ในกรณีส่วนใหญ่ เราขอแนะนำให้ใช้เว็บเบราว์เซอร์มาตรฐาน เช่น Chrome เพื่อแสดงเนื้อหาต่อผู้ใช้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับเว็บเบราว์เซอร์ โปรดอ่านคู่มือการเรียกใช้เบราว์เซอร์ด้วย Intent