แอปของคุณควรทำงานได้ดีในอุปกรณ์ 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 = { } ) } } }
ตัวอย่างนี้ยังแสดงถึง ScreenScaffold
และ AppScaffold
อีกด้วย
พิกัดเหล่านี้ระหว่างแอปกับแต่ละหน้าจอ
(เส้นทางการนำทาง) เพื่อให้มั่นใจได้ว่าสามารถเลื่อนได้อย่างถูกต้อง และ
จุดยืนของ TimeText
สำหรับระยะห่างจากขอบด้านบนและด้านล่าง ให้ทราบข้อมูลดังต่อไปนี้ด้วย
- ข้อกำหนดของพารามิเตอร์
ItemType
แรกและสุดท้าย เพื่อระบุพารามิเตอร์ ระยะห่างจากขอบ - การใช้
ResponsiveListHeader
เป็นรายการแรกในรายการ เนื่องจาก ส่วนหัวText
ไม่ควรมีระยะห่างจากขอบ
ดูข้อกำหนดทั้งหมดได้ในชุดออกแบบ Figma สำหรับข้อมูลเพิ่มเติม รายละเอียดและตัวอย่าง โปรดดูที่
- ห้องสมุดนักวิชาการ มีส่วนประกอบที่ช่วยในการสร้าง แอปที่ได้รับการเพิ่มประสิทธิภาพ และความแตกต่างสำหรับ Wear OS
- ตัวอย่าง ComposeStarter - ตัวอย่างที่แสดงให้เห็นถึง หลักการที่ระบุไว้ในคู่มือนี้
- ตัวอย่างของ JetCaster ซึ่งเป็นตัวอย่างที่ซับซ้อนมากขึ้นในการสร้าง เพื่อใช้งานกับหน้าจอขนาดต่างๆ ได้โดยใช้ไลบรารี Horologist
ใช้เลย์เอาต์แบบเลื่อนในแอป
ใช้เลย์เอาต์แบบเลื่อนตามที่แสดงในก่อนหน้านี้ของหน้านี้ เป็นตัวเลือกเริ่มต้น เมื่อคุณใช้งานหน้าจอ วิธีนี้ช่วยให้ผู้ใช้เข้าถึงคอมโพเนนต์ของแอปได้ โดยไม่ต้องคำนึงถึงค่ากำหนดการแสดงผลหรือขนาดหน้าจอของอุปกรณ์ Wear OS
![ผลกระทบของการปรับขนาดอุปกรณ์และแบบอักษรที่แตกต่างกัน](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=9&hl=th)
ผลกระทบของอุปกรณ์ขนาดต่างๆ และการปรับขนาดแบบอักษร
กล่องโต้ตอบ
กล่องโต้ตอบก็ควรสามารถเลื่อนได้เช่นกัน เว้นแต่จะมีเหตุผลที่จะปิดได้
คอมโพเนนต์ ResponsiveDialog
ที่ให้บริการโดย Horologist จะเพิ่มองค์ประกอบ
ดังต่อไปนี้:
- การเลื่อนโดยค่าเริ่มต้น
- ส่วนต่างกำไรเป็นเปอร์เซ็นต์ที่ถูกต้อง
- ปุ่มที่ปรับความกว้างเองในบริเวณที่มีพื้นที่เพียงพอเพื่อให้เพิ่มพื้นที่ได้ เป้าหมายการแตะ
![ลักษณะการทำงานของกล่องโต้ตอบแบบปรับอัตโนมัติใน Horologist](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=9&hl=th)
กล่องโต้ตอบที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งให้การเลื่อนโดยค่าเริ่มต้นและปุ่มที่ปรับ ตามพื้นที่ว่าง
หน้าจอที่กำหนดเองอาจต้องใช้เลย์เอาต์แบบไม่เลื่อน
บางหน้าจออาจยังเหมาะสำหรับเลย์เอาต์แบบไม่เลื่อน ตัวอย่างหลายรายการ ใส่หน้าจอโปรแกรมเล่นหลักในแอปสื่อ และหน้าจอการออกกำลังกายใน แอปฟิตเนส
ในกรณีเหล่านี้ ให้ดูคําแนะนําตามรูปแบบบัญญัติที่ระบุไว้ใน ชุดออกแบบ 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. } // ...
หลักเกณฑ์การออกแบบแสดงให้เห็นถึงโอกาสเหล่านี้เพิ่มเติม
ทดสอบชุดค่าผสมของขนาดหน้าจอและแบบอักษรโดยใช้ตัวอย่าง
เขียนตัวอย่างช่วยคุณพัฒนาสำหรับหน้าจอ Wear OS หลายขนาด ใช้ทั้งคำจำกัดความของตัวอย่างอุปกรณ์และการปรับขนาดแบบอักษรเพื่อดูข้อมูลต่อไปนี้
- วิธีที่หน้าจอใช้การปรับขนาดอย่างสุดโต่ง เช่น แบบอักษรที่ใหญ่ที่สุด จับคู่กับหน้าจอขนาดเล็กที่สุดแล้ว
- ลักษณะการทำงานของประสบการณ์ที่ไม่เหมือนใครในเบรกพอยท์ต่างๆ
อย่าลืมใช้การแสดงตัวอย่างโดยใช้ WearPreviewDevices
และ
WearPreviewFontScales
สำหรับหน้าจอทั้งหมดในแอป
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
การทดสอบภาพหน้าจอ
นอกจากการทดสอบตัวอย่างแล้ว การทดสอบภาพหน้าจอยังช่วยให้คุณทดสอบเทียบกับ ขนาดฮาร์ดแวร์ที่มีอยู่ ซึ่งจะเป็นประโยชน์อย่างยิ่งในกรณีที่อุปกรณ์ ไม่พร้อมใช้งานในทันที และปัญหาอาจไม่แสดงใน หน้าจอขนาดอื่นๆ
การทดสอบภาพหน้าจอยังช่วยให้คุณสามารถระบุการเกิดปัญหาซ้ำที่ตำแหน่งที่เฉพาะเจาะจงใน ฐานของโค้ด
ตัวอย่างของเราใช้ Roborazzi สำหรับการทดสอบภาพหน้าจอ
- กําหนดค่าไฟล์โปรเจ็กต์และแอป
build.gradle
ที่จะใช้ Robozza - สร้างการทดสอบภาพหน้าจอสำหรับแต่ละหน้าจอที่คุณมีในแอป ตัวอย่างเช่น
ในตัวอย่าง 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