เลย์เอาต์วิดเจ็ต Canonical
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
สร้างเลย์เอาต์วิดเจ็ตที่มีประสิทธิภาพโดยระบุเนื้อหาหลักก่อน เลย์เอาต์จะกำหนดวิธีจัดระเบียบข้อมูลและองค์ประกอบแบบอินเทอร์แอกทีฟภายในวิดเจ็ต Android มีเลย์เอาต์ที่สร้างไว้ล่วงหน้าหลายแบบสำหรับแถบเครื่องมือ ข้อความ รายการ และวิดเจ็ตประเภทตารางกริดเพื่อปรับปรุงกระบวนการนี้ให้มีประสิทธิภาพยิ่งขึ้น
ข้อความ
เลย์เอาต์ข้อความเหมาะสําหรับการแสดงข้อมูลที่กระชับ เพิ่มเสน่ห์ให้กับภาพวิดเจ็ตโดยใส่รูปภาพไว้ข้างข้อความ (ไม่บังคับ)
ข้อความเท่านั้น
เหมาะสำหรับชื่อ การอัปเดตสถานะ คำอธิบายสั้นๆ หรือสถานการณ์ใดก็ตามที่ข้อความบรรทัดเดียวสื่อความหมายได้อย่างมีประสิทธิภาพ ดูคำแนะนำในการปรับขนาดเนื้อหาข้อความแบบไดนามิกตามขนาดวิดเจ็ตได้จากตัวอย่างเลย์เอาต์ตามแบบฉบับ
ข้อความและรูปภาพ
ใส่รูปภาพเพื่อให้ภาพดูน่าสนใจยิ่งขึ้น ดูข้อมูลเพิ่มเติมเกี่ยวกับจุดหยุดแสดงเพื่อดูวิธีปรับเลย์เอาต์นี้ให้เหมาะกับหน้าจอขนาดต่างๆ
ใช้เลย์เอาต์แถบเครื่องมือเพื่อให้ผู้ใช้เข้าถึงงานที่ทําบ่อยในแอปได้อย่างรวดเร็วในเลย์เอาต์ที่ยืดหยุ่นซึ่งปรับให้เข้ากับขนาดวิดเจ็ตต่างๆ
แถบเครื่องมือค้นหา
เลย์เอาต์แถบเครื่องมือค้นหาได้รับการออกแบบมาเพื่อดึงดูดความสนใจไปที่การค้นหาในฐานะการดําเนินการหลักในแถบเครื่องมือ ปุ่มเพิ่มเติมที่มีประโยชน์จะช่วยให้เข้าถึงฟังก์ชันที่ใช้บ่อยได้อย่างรวดเร็ว
แถบเครื่องมือ
แถบเครื่องมือจะแสดงการสร้างแบรนด์แอปตามด้วยปุ่มสำหรับงานที่ใช้งานบ่อยที่สุด ซึ่งเหมาะสำหรับการตั้งค่าหรือลิงก์งานแบบเปิด/ปิด เมื่อปรับขนาด ตัวเลือกที่ใช้ไม่บ่อยจะซ่อนอยู่เพื่อให้เห็นการดำเนินการที่ใช้บ่อยมากกว่า ใช้จุดหยุดพักเพื่อเพิ่มปุ่มใหม่ขนาดขั้นต่ำ 48dp ที่กดได้เมื่อมีที่ว่าง
รายการ
ใช้เลย์เอาต์รายการเพื่อจัดระเบียบรายการหลายรายการในรูปแบบที่ชัดเจนและอ่านง่าย รูปแบบนี้เหมาะสําหรับบรรทัดแรกของข่าว รายการสิ่งที่ต้องทํา หรือข้อความ จัดระเบียบเนื้อหาเป็นรายการที่มีโครงสร้างและอ่านง่าย เลือกระหว่างการแสดงผลแบบมีคอนเทนเนอร์หรือแบบไม่มีคอนเทนเนอร์ตามความต้องการด้านเนื้อหา
รายการข้อความและรูปภาพ
รายการข้อความและรูปภาพที่อ่านได้ง่ายเหมาะอย่างยิ่งในการแสดงเนื้อหาหลายประเภท เช่น บรรทัดแรกของข่าว เพลย์ลิสต์ที่มีปกอัลบั้ม หรือข้อความ
เช็กลิสต์
เลย์เอาต์เช็กลิสต์เหมาะอย่างยิ่งในการแสดงงาน เนื่องจากมีเป้าหมายการแตะชัดเจนเพื่อให้ผู้ใช้ทำเครื่องหมายรายการว่าเสร็จแล้วได้ง่ายๆ
รายการการดำเนินการ
จัดกลุ่มการควบคุมที่ใช้งานง่ายด้วยรายการการดำเนินการ ซึ่งสถานะเปิด/ปิดแบบภาพจะให้ความคิดเห็นเกี่ยวกับสถานะของรายการทันที
เส้นตาราง
แสดงรูปภาพในตารางกริดที่กะทัดรัด ยืดหยุ่น และดูน่าสนใจพร้อมป้ายกำกับ (ไม่บังคับ)
ใช้คอลัมน์และแถวที่ปรับให้เข้ากับหน้าจอขนาดต่างๆ
รูปภาพเท่านั้น
สร้างแกลเลอรีรูปภาพที่เลื่อนดูได้และดึงดูดสายตาโดยใช้ตารางกริดที่มีเฉพาะรูปภาพ แถวและคอลัมน์จะปรับให้เข้ากับหน้าจอขนาดต่างๆ โดยอัตโนมัติเพื่อการแสดงผลที่ดีที่สุด
รูปภาพและข้อความ
นอกจากนี้ คุณยังใส่ป้ายกำกับและคำอธิบายข้อความเพื่อเพิ่มบริบทและข้อมูลอื่นๆ ให้กับเนื้อหาตารางกริดรูปภาพได้ด้วย
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Canonical widget layouts\n\nCraft effective widget layouts by first identifying your core content. Your\nlayout dictates how information and interactive elements are organized within\nyour widget. Android offers several prebuilt layouts for toolbars, text, list\nand grid-type widgets to streamline this process.\n| **Note:** View detailed layout specs in our [Figma Widget Canonical Builder](https://goo.gle/widget-canonical), and find the code samples using Jetpack Glance in the [Android Platform Samples GitHub repository](https://github.com/android/platform-samples/tree/main/samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance).\n\nText\n----\n\nText layouts are ideal for displaying concise information. Enhance the visual\nappeal of your widget by optionally including an image alongside the text. \n**Text only**\n\n\nIdeal for titles, status updates, short descriptions, or any scenario\nwhere a single line of text effectively conveys the message. Refer to the\n[Canonical layout sample](https://github.com/android/platform-samples/tree/main/samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance)\nfor guidance on dynamically scaling text content based on widget size. \n**Text and image**\n\n\nInclude an image for added visual impact. For more information, see\n[Breakpoints](/design/ui/mobile/guides/widgets/sizing#breakpoints)\nto learn how to adapt this layout for different screen sizes.\n\nToolbars\n--------\n\nUse toolbar layouts to provide users with quick access to frequently used tasks\nin your app, in a flexible layout that adapts across widget sizes. \n**Search Toolbar**\n\n\nA search toolbar layout is intentionally designed to draw focus to search\nas a primary action in the toolbar. Additional handy buttons can provide\nquick access to frequently used functions.\n\n\n**Toolbar**\n\n\nToolbars presents app branding followed by buttons for the most used tasks\nthat are ideal for toggleable settings or task links. When resizing, less\ncommonly used options can be hidden in favor of more common actions. Use\n[Breakpoints](/design/ui/mobile/guides/widgets/sizing#breakpoints)\nto add a new minimum 48dp tappable button when there's room.\n\n\u003cbr /\u003e\n\nLists\n-----\n\nUse list layouts to organize multiple items in a clear, scannable format. This\nis ideal for news headlines, to-do lists or messages. Organize content into a\nstructured, easily scannable list. Choose between containerized or containerless\npresentation based on your content needs. \n**Text and image list**\n\n\nEasily scannable text and image lists are perfect for showcasing multiple\ncontent types, such as news headlines, playlists with album art, or\nmessages. \n**Checklist**\n\n\nThe checklist layout is perfect for displaying tasks, providing clear tap\ntargets for users to easily mark items as done. \n**Action list**\n\n\nProvide intuitive control grouping with action lists, where visual on/off\nstates offer immediate feedback on item statuses.\n\nGrid\n----\n\nPresent images in a compact, flexible, visually rich grid with optional labels.\nUse columns and rows that adapt to different screen sizes. \n**Image only**\n\n\nCreate visually impactful, scrollable image galleries using image-only\ngrids. Rows and columns automatically adapt to various screen sizes for\noptimal presentation. \n**Image and text**\n\n\nYou can also incorporate text labels and descriptions, enriching your\nimage grid content with additional context and information."]]