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

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับหลักการออกแบบสำหรับเลย์เอาต์แบบปรับอัตโนมัติ โปรดอ่าน หลักเกณฑ์การออกแบบ

สร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ด้วย Horologist

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

  • ตั้งค่าขอบแนวนอนได้ถูกต้องตามเปอร์เซ็นต์ของหน้าจออุปกรณ์ ขนาด
  • ตั้งค่าระยะห่างด้านบนและด้านล่างไว้อย่างถูกต้อง ซึ่งมาพร้อมกับความท้าทายบางประการ เนื่องจากระยะห่างด้านบนและด้านล่างที่แนะนำอาจขึ้นอยู่กับองค์ประกอบต่างๆ ตัวอย่างเช่น Chip ควรมีระยะห่างที่แตกต่างกันกับ Text เมื่อใช้ในรายการ
  • ตั้งค่าขอบ TimeText ถูกต้องแล้ว

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

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

สำหรับระยะห่างจากขอบด้านบนและด้านล่าง ให้ทราบข้อมูลดังต่อไปนี้ด้วย

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

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

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

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

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

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

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

กล่องโต้ตอบ

กล่องโต้ตอบก็ควรสามารถเลื่อนได้เช่นกัน เว้นแต่จะมีเหตุผลที่จะปิดได้ คอมโพเนนต์ ResponsiveDialog ที่ให้บริการโดย Horologist จะเพิ่มองค์ประกอบ ดังต่อไปนี้:

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

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

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

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

ในกรณีเหล่านี้ ให้ดูคําแนะนําตามรูปแบบบัญญัติที่ระบุไว้ใน ชุดออกแบบ 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 ที่จะใช้ Robozza
  2. สร้างการทดสอบภาพหน้าจอสำหรับแต่ละหน้าจอที่คุณมีในแอป ตัวอย่างเช่น ในตัวอย่าง ComposeStarter การทดสอบสำหรับ GreetingScreen คือ ตามที่เห็นใน GreetingScreenTest:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

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

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

สิ่งสำคัญบางอย่างที่ควรทราบมีดังนี้

  • FixedTimeSource ช่วยให้คุณสามารถสร้างภาพหน้าจอที่ TimeText ไม่ แตกต่างกันและทำให้การทดสอบล้มเหลวโดยไม่ตั้งใจ
  • WearDevice.entries มีคำจำกัดความสำหรับอุปกรณ์ Wear OS ยอดนิยมส่วนใหญ่ ทดสอบกับขนาดของหน้าจอแบบต่างๆ

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

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

./gradlew recordRoborazziDebug

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

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

./gradlew verifyRoborazziDebug

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