کاشی ها را برای اندازه های مختلف صفحه نمایش توسعه دهید

کاشی‌های برنامه شما باید روی دستگاه‌های Wear OS در همه اندازه‌ها به خوبی کار کنند و از فضای اضافی در صورت وجود استفاده کنند، و همچنان در صفحه‌نمایش‌های کوچک‌تر نیز عالی به نظر می‌رسند. این راهنما توصیه هایی برای دستیابی به این تجربه کاربری ارائه می دهد.

برای کسب اطلاعات بیشتر در مورد اصول طراحی برای چیدمان های تطبیقی، راهنمای طراحی را بخوانید.

تجربیات متمایز را از طریق نقاط شکست ارائه دهید

طرح‌بندی‌های کتابخانه ProtoLayout Material واکنش‌گرا هستند و از قرارگیری و دید صحیح عناصر مراقبت می‌کنند. با این حال، در برخی موارد ممکن است بخواهید تعداد عناصر قابل مشاهده را برای بهترین نتایج تغییر دهید. به عنوان مثال، ممکن است بخواهید 3 دکمه در یک نمایشگر کوچکتر و 5 دکمه در یک نمایشگر بزرگتر داشته باشید.

برای پیاده سازی این نوع تجربه متمایز، از نقاط شکست اندازه صفحه استفاده کنید. برای نشان دادن طرح‌بندی متفاوت زمانی که اندازه صفحه از 225 dp بیشتر است:

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

راهنمای طراحی فرصت های اضافی را نشان می دهد.

کاشی ها را در اندازه های مختلف صفحه با استفاده از پیش نمایش ها آزمایش کنید

مهم است که طرح بندی های خود را در اندازه های مختلف صفحه نمایش آزمایش کنید. از حاشیه نویسی های Tile Preview به همراه کلاس های TilePreviewHelper و TilePreviewData استفاده کنید:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

این به شما امکان می‌دهد طرح‌بندی کاشی‌های خود را مستقیماً در Android Studio پیش‌نمایش کنید.

برای مثال کامل، نمونه کاشی های تایمر را در GitHub ببینید.