พัฒนาให้เหมาะกับหน้าจอขนาดต่างๆ

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

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

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

ข้อมูลโค้ดต่อไปนี้ใช้คอมโพเนนต์ TransformingLazyColumn เพื่อสร้างเนื้อหาที่ดูดีในหน้าจอ Wear OS ขนาดต่างๆ

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

ตัวอย่างนี้ยังแสดง ScreenScaffold และ AppScaffold ด้วย ซึ่งจะประสานงานระหว่างแอปกับหน้าจอแต่ละหน้าจอ (เส้นทางการนำทาง) เพื่อให้มั่นใจว่าพฤติกรรมการเลื่อนและตำแหน่งของ TimeText จะถูกต้อง

นอกจากนี้ โปรดทราบสิ่งต่อไปนี้เกี่ยวกับระยะห่างจากขอบด้านบนและด้านล่าง

• ข้อกำหนดของ ItemType รายการแรกและรายการสุดท้าย เพื่อกำหนดระยะห่างจากขอบที่ถูกต้อง
• การใช้ ListHeader สำหรับรายการแรกในรายการ เนื่องจากส่วนหัว Text ไม่ควรมีระยะห่างจากขอบ

ดูข้อกำหนดทั้งหมดได้ในชุดเครื่องมือการออกแบบ Figma ดูรายละเอียดและตัวอย่างเพิ่มเติมได้ที่

• ไลบรารี Horologist \- มีฟังก์ชันช่วยเหลือที่จะช่วยสร้างแอปที่เพิ่มประสิทธิภาพและแตกต่างสำหรับ Wear OS
• ตัวอย่าง ComposeStarter \- ตัวอย่างที่แสดง หลักการที่ระบุไว้ในคู่มือนี้
• ตัวอย่าง JetCaster \- ตัวอย่างที่ซับซ้อนมากขึ้นในการสร้าง แอปให้ทำงานกับหน้าจอขนาดต่างๆ โดยใช้ไลบรารี Horologist

ใช้เลย์เอาต์แบบเลื่อนในแอป

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

ผลกระทบของขนาดอุปกรณ์และการปรับขนาดแบบอักษรที่แตกต่างกัน

กล่องโต้ตอบ

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

หน้าจอที่กำหนดเองอาจต้องใช้เลย์เอาต์ที่ไม่เลื่อน

บางหน้าจออาจยังเหมาะกับเลย์เอาต์ที่ไม่เลื่อน ตัวอย่างเช่น หน้าจอเพลเยอร์หลักในแอปสื่อและหน้าจอการออกกำลังกายในแอปฟิตเนส

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

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

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

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...
List.kt

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

ทดสอบการผสมผสานระหว่างขนาดหน้าจอและขนาดแบบอักษรโดยใช้ตัวอย่าง

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

• ลักษณะที่หน้าจอจะแสดงในขนาดที่แตกต่างกันมาก เช่น แบบอักษรที่ใหญ่ที่สุดจับคู่กับหน้าจอที่เล็กที่สุด
• ลักษณะการทำงานของประสบการณ์ที่แตกต่างกันในเบรกพอยต์ต่างๆ

ตรวจสอบว่าคุณได้ใช้ตัวอย่างโดยใช้ WearPreviewDevices และ WearPreviewFontScales สำหรับหน้าจอทั้งหมดในแอป

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

การทดสอบภาพหน้าจอ

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

การทดสอบภาพหน้าจอยังช่วยให้คุณระบุการถดถอยในตำแหน่งที่เฉพาะเจาะจงในฐานของโค้ดได้ด้วย

ตัวอย่างของเราใช้ Roborazzi สำหรับการทดสอบภาพหน้าจอ โดยทำดังนี้

1. กำหนดค่าไฟล์ โปรเจ็กต์ และ แอป build.gradle เพื่อใช้ Roborazzi
2. สร้างการทดสอบภาพหน้าจอสำหรับแต่ละหน้าจอในแอป เช่น โค้ดต่อไปนี้แสดงการทดสอบภาพหน้าจอสำหรับหน้าจอที่มีรายการ

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}
ListTest.kt

ประเด็นสำคัญที่ควรทราบมีดังนี้

• WearDevice.entries มีคำจำกัดความสำหรับอุปกรณ์ Wear OS ที่ได้รับความนิยมมากที่สุด เพื่อให้การทดสอบทำงานในหน้าจอขนาดต่างๆ ที่เป็นตัวแทน

สร้างรูปภาพมาตรฐาน

หากต้องการสร้างรูปภาพสำหรับหน้าจอ ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

./gradlew recordRoborazziDebug

ยืนยันรูปภาพ

หากต้องการยืนยันการเปลี่ยนแปลงกับรูปภาพที่มีอยู่ ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

./gradlew verifyRoborazziDebug

ดูตัวอย่างการทดสอบภาพหน้าจอทั้งหมดได้ที่ตัวอย่าง ComposeStarter