พัฒนาชิ้นส่วนสำหรับหน้าจอขนาดต่างๆ

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับหลักการออกแบบสำหรับเลย์เอาต์แบบปรับอัตโนมัติ โปรดอ่าน หลักเกณฑ์การออกแบบ

สร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์โดยใช้ ProtoLayout

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

ดูเลย์เอาต์การออกแบบของ Figma ซึ่งแสดงถึงหน้า Canonical ที่มีอยู่และวิธีสร้างงานออกแบบโดยใช้รูปแบบเหล่านั้น

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

เราขอแนะนำ PrimaryLayout หรือ EdgeContentLayout เป็นระดับบนสุด สำหรับกรณีการใช้งานส่วนใหญ่ ตั้งค่าลักษณะการปรับเปลี่ยนตามอุปกรณ์โดยใช้ setResponsiveContentInsetEnabled เช่น

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

มอบประสบการณ์ที่แตกต่างผ่านเบรกพอยท์

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

หากต้องการใช้ประสบการณ์การใช้งานที่แตกต่างเช่นนี้ ให้ใช้ขนาดหน้าจอ เบรกพอยท์ หากต้องการแสดงเลย์เอาต์อื่นเมื่อหน้าจอมีขนาดเกิน 225 dp ให้ทำดังนี้

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

หลักเกณฑ์การออกแบบแสดงให้เห็นถึงโอกาสเพิ่มเติม

ทดสอบไทล์บนหน้าจอขนาดต่างๆ โดยใช้ "ตัวอย่าง"

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

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

ดูตัวอย่างที่สมบูรณ์ได้ที่ตัวอย่างการ์ดสื่อใน GitHub