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

ไทล์ของแอปควรทำงานได้ดีในอุปกรณ์ 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