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

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

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

ارائه تجربه‌های متمایز ازطریق نقاط گسست

چیدمان‌های کتابخانه ProtoLayout Material واکنش‌گرا هستند و از جای‌گذاری و رؤیت‌پذیری صحیح عنصر مراقبت می‌کنند. بااین‌حال، در برخی موارد ممکن است بخواهید تعداد عناصر نمایان را برای بهترین نتایج تغییر دهید. برای مثال، ممکن است بخواهید در صفحه‌نمایش کوچک‌تر ۳ دکمه و در صفحه‌نمایش بزرگ‌تر ۵ دکمه داشته باشید.

برای پیاده‌سازی این نوع تجربه متمایز، از نقطه‌های گسست اندازه صفحه‌نمایش استفاده کنید. برای نمایش چیدمانی متفاوت وقتی اندازه صفحه‌نمایش از ۲۲۵ واحد مستقل پیکسل بیشتر می‌شود:

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

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

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

مهم است که چیدمان‌هایتان را در اندازه‌های مختلف صفحه‌نمایش آزمایش کنید. از حاشیه‌نویسی‌های «پیش‌نمایش کاشی» به‌همراه کلاس‌های 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» پیش‌نمایش کنید.

برای دیدن نمونه کامل، نمونه کاشی‌های زمان‌سنج را در GitHub ببینید.