หน้านี้ได้รับการแปลโดย Cloud Translation API

เลย์เอาต์ Canonical

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

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

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

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

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

If you're already familiar with the adaptive app canonical layouts but aren't sure which Android APIs to use, jump to the Applicability section for help determining which layout is right for your app's use cases.

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

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

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

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

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

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

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

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

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

รูปที่ 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.

Activity embedding

Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.

Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.

Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.

For more information, see Activity embedding.

For an example implementation, see the List-detail with activity embedding sample.

ฟีด

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

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

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

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

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

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

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

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

การใช้งาน

A RecyclerView efficiently renders a large number of items in a single column. A GridLayoutManager lays out items in a grid, allowing configuration of the item sizes and spans.

Configure the grid columns based on the size of the available display area to set the minimum allowable width for items.

The GridLayoutManager default spanning strategy, which is one span per item, can be overridden by creating a custom SpanSizeLookup. Adjust the span to emphasize some items over others.

On compact-width displays that have enough space for only one column, use LinearLayoutManager instead of GridLayoutManager.

For an example implementation, see the Feed with views sample.

แผงสนับสนุน

โครงร่างเลย์เอาต์ของแผงสนับสนุน

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

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

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

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

กรณีการใช้งานสำหรับแผงสนับสนุนมีดังนี้

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

รูปที่ 3 แอป Shopping ที่มีรายละเอียดผลิตภัณฑ์ในแผงที่รองรับ

การใช้งาน

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** แผนผังการตัดสินใจสำหรับเลย์เอาต์ตามแบบฉบับของหน้าจอขนาดใหญ่

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

Material Design - เลย์เอาต์ Canonical