เลย์เอาต์วิดเจ็ต Canonical

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

ข้อความ

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

ข้อความเท่านั้น

เหมาะสำหรับชื่อ การอัปเดตสถานะ คำอธิบายสั้นๆ หรือสถานการณ์ใดๆ ที่ข้อความบรรทัดเดียวสื่อสารข้อความได้อย่างมีประสิทธิภาพ

ข้อความและรูปภาพ

ใส่รูปภาพเพื่อเพิ่มผลลัพธ์ด้านภาพ ดูข้อมูลเพิ่มเติมได้ที่ เบรกพอยต์ เพื่อดูวิธีปรับเลย์เอาต์นี้ให้เหมาะกับขนาดหน้าจอต่างๆ

แถบเครื่องมือ

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

แถบเครื่องมือค้นหา

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

แถบเครื่องมือ

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

รายการ

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

รายการข้อความและรูปภาพ

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

เช็กลิสต์

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

รายการการดำเนินการ

จัดกลุ่มการควบคุมที่ใช้งานง่ายด้วยรายการการทำงาน ซึ่งสถานะเปิด/ปิดภาพ จะให้ความคิดเห็นทันทีเกี่ยวกับสถานะของรายการ

รูปภาพแบบเต็มหน้าจอ

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

ตารางกริด

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

รูปภาพเท่านั้น

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

รูปภาพและข้อความ

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

ตัวอย่างโค้ด

ตารางต่อไปนี้จะแมปเลย์เอาต์มาตรฐานแต่ละรายการกับการติดตั้งใช้งาน Jetpack Glance ที่เกี่ยวข้องในที่เก็บ GitHub ของตัวอย่างแพลตฟอร์ม Android

เลย์เอาต์ Canonical ไฟล์อ้างอิง คำแนะนำ
เลย์เอาต์รายการการดำเนินการ
  • จัดการการดำเนินการในรายการด้วยการเรียกกลับการดำเนินการของ Glance และตรวจสอบว่ามีการอัปเดตสถานะอย่างถูกต้อง
เลย์เอาต์ของเช็กลิสต์
  • ใช้การสลับสถานะช่องทําเครื่องหมายโดยใช้พารามิเตอร์การกระทําหรือการเรียกกลับเพื่ออัปเดตรายการคอลเล็กชัน
  • ใช้การเรียกกลับของการดำเนินการ Glance เช่น `actionRunCallback`, `ActionCallback(actionParametersOf(...))`, หรือ `actionStartActivity(...)` สำหรับ พารามิเตอร์ `onClick` ของวิดเจ็ตเพื่อจัดการเหตุการณ์การคลิก เช่น การแตะช่องทําเครื่องหมาย
เลย์เอาต์แถบเครื่องมือที่สื่อความหมาย
  • หลีกเลี่ยงข้อผิดพลาดในการนำเข้า `ColorProvider` โดยการนำเข้า `androidx.glance.unit.ColorProvider` และใช้ `androidx.glance.color.ColorProvider(dayColor, nightColor)`
  • ใช้ `GlanceModifier.background(Color)` โดยตรงสำหรับสีพื้นหลังแบบทึบแทน `ColorProvider`
เลย์เอาต์ตารางกริดรูปภาพ
  • ใช้สีทึบ (`GlanceModifier.background`) หรือ Drawable ในเครื่องสำหรับรายการรูปภาพ เว้นแต่จะมีการกำหนดค่าหรือขอไลบรารีการโหลดรูปภาพ
เลย์เอาต์รายการข้อความรูปภาพ
  • กรณีการใช้งานทั่วไป ได้แก่ ฟีดข่าว รายการบทความ ประวัติการออกกำลังกาย ฟีดข้อความ และรายการภาพปกวิดีโอแนวตั้ง
  • ปรับความสูงของแถวรายการและความยาวของข้อความเมื่อรวมรูปภาพขนาดย่อกับข้อความหลัก/รอง
เลย์เอาต์ข้อความยาว
  • หากคุณคูณค่า `Dp` เช่น `2 * padding` ให้นำเข้า `androidx.compose.ui.unit.times`
  • ปฏิบัติตามกฎการกำหนดขนาด: ตรวจสอบว่าใช้มิติข้อมูลจาก `dimens.xml` สำหรับ การปรับขนาดระยะขอบและการจัดรูปแบบข้อความ
เลย์เอาต์แถบเครื่องมือค้นหา
  • หลีกเลี่ยงข้อผิดพลาดในการนำเข้า `ColorProvider` โดยการนำเข้า `androidx.glance.unit.ColorProvider` และใช้ `androidx.glance.color.ColorProvider(dayColor, nightColor)`
  • ใช้ `GlanceModifier.background(Color)` โดยตรงสำหรับสีพื้นหลังแบบทึบแทน ColorProvider
เลย์เอาต์รูปภาพแบบเต็มขอบ / การเลื่อนแบบสแนป
  • ตั้งค่า `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` ใน LazyColumn สำหรับการเลื่อนแบบสแนป
  • หากคุณใช้การเลื่อนแบบสแนป คุณจะต้องใช้ Glance 1.3.0-alpha02 ขึ้นไป, Compile SDK 37 (Baklava) ขึ้นไป และปลั๊กอิน Android Gradle (AGP) 9.1.0 ขึ้นไป
  • ตั้งค่า `override val sizeMode: SizeMode = SizeMode.Exact` ในคลาสผู้ให้บริการวิดเจ็ต
เลย์เอาต์แถบเครื่องมือมาตรฐาน
  • ดูการแก้ปัญหาเพื่อหลีกเลี่ยงข้อผิดพลาดในการนำเข้า `ColorProvider` โดยใช้ `androidx.glance.color.ColorProvider(dayColor, nightColor)`
  • ใช้ `GlanceModifier.background(Color)` โดยตรงสำหรับสีพื้นหลังแบบทึบแทน `ColorProvider`
ข้อความที่มีเลย์เอาต์รูปภาพ
  • ปฏิบัติตามกฎการกำหนดขนาดเลย์เอาต์ที่ตอบสนองตามอุปกรณ์เพื่อรองรับข้อความและรูปภาพที่อยู่ข้างกันหรือซ้อนกันตามขนาดวิดเจ็ตที่มี