ไทล์ของแอปควรทำงานได้ดีในอุปกรณ์ Wear OS ทุกขนาด โดยใช้ประโยชน์จากพื้นที่เพิ่มเติมหากมี และยังคงดูดีบนหน้าจอขนาดเล็กด้วย คู่มือนี้จะให้คำแนะนำในการทำให้ผู้ใช้ ได้รับประสบการณ์การใช้งานที่ดี
ดูข้อมูลเพิ่มเติมเกี่ยวกับหลักการการออกแบบเลย์เอาต์แบบปรับเปลี่ยนได้ได้ที่คำแนะนำด้านการออกแบบ
สร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์โดยใช้ ProtoLayout
ไลบรารี ProtoLayout Material มีเลย์เอาต์ที่กำหนดไว้ล่วงหน้าเพื่อช่วยคุณสร้างการ์ด เลย์เอาต์เหล่านี้ออกแบบมาให้ปรับขนาดหน้าจอได้อยู่แล้ว
โปรดดูเลย์เอาต์การออกแบบของ Figma ซึ่งแสดงเลย์เอาต์ Canonical ที่มีและวิธีสร้างการออกแบบโดยใช้เลย์เอาต์ดังกล่าว
เราขอแนะนำให้ใช้ 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