เลย์เอาต์ Canonical

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

ภาพอุปกรณ์ที่มีหน้าจอขนาดใหญ่ซึ่งแสดงเลย์เอาต์มาตรฐาน

เลย์เอาต์ Canonical รองรับโทรศัพท์ที่มีหน้าจอขนาดเล็ก รวมถึงแท็บเล็ต อุปกรณ์แบบพับได้ และอุปกรณ์ ChromeOS เลย์เอาต์เหล่านี้ได้มาจากคำแนะนำของ Material Design จึงมีความสวยงาม และใช้งานได้จริง

เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะที่ทำให้การติดตั้งใช้งานเลย์เอาต์เป็นเรื่องง่ายและเชื่อถือได้

เลย์เอาต์ Canonical สร้าง UI ที่น่าสนใจและช่วยเพิ่มประสิทธิภาพ ซึ่งเป็นรากฐานของแอปที่ยอดเยี่ยม

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

รายละเอียดรายการ

ไวร์เฟรมของเลย์เอาต์รายละเอียดรายการ

เลย์เอาต์รายละเอียดรายการช่วยให้ผู้ใช้สำรวจรายการที่มีคำอธิบาย ข้อมูลอธิบาย หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดรายการ

เลย์เอาต์จะแบ่งหน้าต่างแอปออกเป็น 2 บานหน้าต่างที่อยู่เคียงข้างกัน โดยบานหน้าต่างหนึ่งสำหรับรายการและอีกบานหน้าต่างหนึ่งสำหรับรายละเอียด ผู้ใช้เลือกรายการจากรายการเพื่อแสดงรายละเอียดรายการ ดีปลิงก์ในรายละเอียดจะแสดงเนื้อหาเพิ่มเติมในบานหน้าต่างรายละเอียด

จอแสดงผลที่มีความกว้างแบบขยาย (ดู ใช้คลาสขนาดหน้าต่าง) จะแสดงทั้ง รายการและรายละเอียดพร้อมกัน การเลือกรายการในรายการจะอัปเดตบานหน้าต่างรายละเอียดเพื่อแสดงเนื้อหาที่เกี่ยวข้องกับรายการที่เลือก

จอแสดงผลที่มีความกว้างปานกลางและแบบกะทัดรัดจะแสดงรายการหรือรายละเอียดอย่างใดอย่างหนึ่ง ทั้งนี้ขึ้นอยู่กับการโต้ตอบของผู้ใช้กับแอป เมื่อแสดงเฉพาะรายการ การเลือกรายการจะแสดงรายละเอียดแทนรายการ เมื่อแสดงเฉพาะรายละเอียด การกดปุ่มย้อนกลับจะแสดงรายการอีกครั้ง

การเปลี่ยนแปลงการกำหนดค่า เช่น การเปลี่ยนแปลงการวางแนวอุปกรณ์หรือการเปลี่ยนแปลงขนาดหน้าต่างแอป อาจเปลี่ยนคลาสขนาดหน้าต่างของจอแสดงผล เลย์เอาต์รายละเอียดรายการจะตอบสนองตามนั้น โดยรักษาสถานะของแอปไว้ดังนี้

  • หากจอแสดงผลที่มีความกว้างแบบขยายซึ่งแสดงทั้งบานหน้าต่างรายการและรายละเอียดแคบลงเป็นปานกลางหรือกะทัดรัด บานหน้าต่างรายละเอียดจะยังคงแสดงอยู่และบานหน้าต่างรายการจะซ่อนอยู่
  • หากจอแสดงผลที่มีความกว้างปานกลางหรือแบบกะทัดรัดแสดงเฉพาะบานหน้าต่างรายละเอียดและคลาสขนาดหน้าต่างขยายเป็นแบบขยาย รายการและรายละเอียดจะแสดงพร้อมกัน และรายการจะระบุว่ามีการเลือกรายการที่สอดคล้องกับเนื้อหาในบานหน้าต่างรายละเอียด
  • หากจอแสดงผลที่มีความกว้างปานกลางหรือแบบกะทัดรัดแสดงเฉพาะบานหน้าต่างรายการและขยายเป็นแบบขยาย รายการและบานหน้าต่างรายละเอียดตัวยึดตำแหน่งจะแสดงพร้อมกัน

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

รูปที่ 1. แอปรับส่งข้อความที่แสดงรายการการสนทนาและรายละเอียดของการสนทนาที่เลือก

การใช้งาน

A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.

The SlidingPaneLayout library is designed for implementation of list‑detail layouts based on views or fragments.

First, declare a SlidingPaneLayout as the root element of your XML layout. Next, add the two child elements—either views or fragments—that represent the list and detail content.

Implement a communication methodology to pass data between the list-detail views or fragments. ViewModel is recommended because of its ability to store business logic and survive configuration changes.

SlidingPaneLayout automatically determines whether to display the list and detail together or individually. In a window that has enough horizontal space to accommodate both, the list and detail appear side by side. In a window that lacks sufficient space, either the list or detail is displayed depending on the user's interaction with the app.

For an example implementation, see the List-detail with sliding pane sample.

การฝังกิจกรรม

ใช้การฝังกิจกรรมเพื่อเปิดใช้แอปแบบหลายกิจกรรมเดิมให้แสดงกิจกรรม 2 รายการควบคู่กันในหน้าจอเดียวกันหรือซ้อนกัน (ซ้อนทับกัน) หากแอปใช้รายการและรายละเอียดของเลย์เอาต์รายการแบบมีรายละเอียดในกิจกรรมแยกต่างหาก การฝังกิจกรรมจะช่วยให้คุณสร้างเลย์เอาต์รายการแบบมีรายละเอียดได้ด้วยการแยกโค้ดใหม่เพียงเล็กน้อยหรือไม่ต้องแยกเลย

ใช้การฝังกิจกรรมโดยระบุการแยกหน้าต่างงานโดยใช้ไฟล์การกำหนดค่า XML การแยกจะกําหนดกิจกรรมหลัก ซึ่งจะเริ่มต้นการแยก และกิจกรรมรอง ระบุความกว้างในการแสดงผลขั้นต่ำสำหรับการแยกโดยใช้จุดหยุดพักของ Window Size Class เมื่อความกว้างของการแสดงผลต่ำกว่าจุดหยุดขั้นต่ำ กิจกรรมจะแสดงซ้อนทับกัน เช่น หากความกว้างขั้นต่ำของการแสดงผลคือ 600dp กิจกรรมจะแสดงโดยซ้อนทับอีกรายการหนึ่งบนจอแสดงผลแบบกะทัดรัด แต่จะแสดงคู่กันบนจอแสดงผลขนาดกลางและที่ขยาย

การฝังกิจกรรมใช้ได้ใน Android 12L (API ระดับ 32) ขึ้นไป แต่อาจใช้ได้ใน API ระดับต่ำกว่าด้วยหากผู้ผลิตอุปกรณ์นำมาใช้งาน เมื่อการฝังกิจกรรมไม่พร้อมใช้งานในอุปกรณ์ ลักษณะการทำงานสำรองจะส่งผลให้กิจกรรมรายการหรือกิจกรรมแบบละเอียดครอบครองหน้าต่างแอปทั้งหน้าต่างโดยอิงตามการโต้ตอบของผู้ใช้กับแอป

โปรดดูข้อมูลเพิ่มเติมที่การฝังกิจกรรม

ดูตัวอย่างการใช้งานได้ที่ตัวอย่างรายละเอียดรายการที่มีการฝังกิจกรรม

ฟีด

ไวร์เฟรมของเลย์เอาต์ฟีด

เลย์เอาต์ฟีดจะจัดเรียงองค์ประกอบเนื้อหาที่เทียบเท่ากันในตารางกริดที่กำหนดค่าได้เพื่อให้ดูเนื้อหาจำนวนมากได้อย่างรวดเร็วและสะดวก

ขนาดและตำแหน่งจะกำหนดความสัมพันธ์ระหว่างองค์ประกอบเนื้อหา

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

การ์ดและรายการเป็นคอมโพเนนต์ทั่วไปของเลย์เอาต์ฟีด

เลย์เอาต์ฟีดรองรับจอแสดงผลเกือบทุกขนาด เนื่องจากตารางกริดสามารถปรับจากคอลัมน์เดียวแบบเลื่อนได้เป็นฟีดเนื้อหาแบบเลื่อนได้หลายคอลัมน์

ฟีดเหมาะอย่างยิ่งสำหรับแอปข่าวและแอปโซเชียลมีเดีย

รูปที่ 2. แอปโซเชียลมีเดียที่แสดงโพสต์ในการ์ดขนาดต่างๆ

การใช้งาน

RecyclerView จะแสดงผลรายการจำนวนมากในคอลัมน์เดียวได้อย่างมีประสิทธิภาพ GridLayoutManager จะจัดวางรายการเป็นตารางกริดเพื่อให้กำหนดค่าขนาดและระยะเวลาของรายการได้

กำหนดค่าคอลัมน์ตารางกริดตามขนาดของพื้นที่แสดงผลที่มีอยู่เพื่อกำหนดความกว้างขั้นต่ำที่อนุญาตสำหรับรายการ

คุณลบล้างกลยุทธ์ระยะเวลาเริ่มต้นของ GridLayoutManager ได้ 1 ช่วงต่อรายการโดยการสร้าง SpanSizeLookup ที่กำหนดเอง ปรับระยะเพื่อเน้นรายการบางรายการมากกว่ารายการอื่นๆ

ในจอแสดงผลขนาดกะทัดรัดที่มีพื้นที่เพียงพอสำหรับคอลัมน์เดียวเท่านั้น ให้ใช้ LinearLayoutManager แทน GridLayoutManager

ดูตัวอย่างการใช้งานได้ที่ตัวอย่างฟีดที่มียอดดู

บานหน้าต่างรอง

Wireframe ของเลย์เอาต์แผงสนับสนุน

เลย์เอาต์บานหน้าต่างรองจะจัดระเบียบเนื้อหาแอปเป็นพื้นที่แสดงผลหลักและพื้นที่แสดงผลรอง

พื้นที่แสดงผลหลักจะครอบครองพื้นที่ส่วนใหญ่ของหน้าต่างแอป (โดยปกติประมาณ 2 ใน 3) และมีเนื้อหาหลัก พื้นที่แสดงผลรองคือบานหน้าต่างที่ใช้พื้นที่ส่วนที่เหลือของหน้าต่างแอปและแสดงเนื้อหาที่รองรับเนื้อหาหลัก

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

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

กรณีการใช้งานสำหรับบานหน้าต่างรองมีดังนี้

รูปที่ 3. แอปช็อปปิ้งพร้อมคำอธิบายผลิตภัณฑ์ในบานหน้าต่างรอง

การใช้งาน

A supporting pane layout is implemented using a helper layout such as LinearLayout or ConstraintLayout. Establish the window size classes that divide the amount of horizontal display space available for your app into three categories: compact (< 600dp), medium (>= 600dp), and expanded (>= 840dp).

For each window size class, define layouts as follows:

  • Compact: In the app resources layout folder, place content that renders the supporting pane below the main content or inside a bottom sheet
  • Medium: In the layout-w600dp folder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally
  • Expanded: In the layout-w840dp folder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content

Use a ViewModel for communication between the main content and the supporting pane whether using views, fragments, or a combination.

For implementation examples, see the following samples:

การบังคับใช้

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

โปรดดูตัวอย่างเลย์เอาต์ Canonical ที่ใช้ในแอปประเภทต่างๆ ในแกลเลอรีหน้าจอขนาดใหญ่

รูปที่ 4 แผนผังการตัดสินใจสำหรับเลย์เอาต์ตามแบบฉบับของหน้าจอขนาดใหญ่

แหล่งข้อมูลเพิ่มเติม