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

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

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

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

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

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

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

คำแนะนำด้านการออกแบบจะแสดงโอกาสเพิ่มเติม

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

ซึ่งจะช่วยให้คุณดูตัวอย่างเลย์เอาต์ไทล์ได้โดยตรงภายใน Android Studio

ดูตัวอย่างทั้งหมดได้ในตัวอย่างการ์ดจับเวลาใน GitHub