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

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

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

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

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

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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 จะปรับเปลี่ยนตามอุปกรณ์และเลื่อนได้โดยค่าเริ่มต้น หากเนื้อหาสูงกว่าความสูงของวิวพอร์ต

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

หน้าจอบางหน้าจออาจยังเหมาะกับเลย์เอาต์แบบไม่เลื่อน ตัวอย่างบางส่วน ได้แก่ หน้าจอโปรแกรมเล่นหลักในแอปสื่อและหน้าจอการออกกําลังกายในแอปฟิตเนส

ในกรณีเหล่านี้ ให้ดูคำแนะนำตามหลักเกณฑ์ที่ระบุไว้ในชุดเครื่องมือการออกแบบ 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

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

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

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

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

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

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

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

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

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

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

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

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

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

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

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

สร้างรูปภาพสีทอง

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

./gradlew recordRoborazziDebug

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

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

./gradlew verifyRoborazziDebug

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