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

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

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

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

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

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

การทดสอบเลย์เอาต์ในหน้าจอขนาดต่างๆ เป็นสิ่งสําคัญ ใช้คำอธิบายประกอบของตัวอย่างการ์ด รวมถึงคลาส TilePreviewHelper และ TilePreviewData

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

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

จอแสดงผลขนาดเล็กและขนาดใหญ่ที่แสดงผลลัพธ์ของจุดหยุดแสดงโฆษณา

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