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

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

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

با استفاده از ProtoLayout طرح‌بندی‌های واکنش‌گرا بسازید

کتابخانه ProtoLayout Material طرح‌بندی‌های از پیش تعریف‌شده را برای کمک به شما در ساخت کاشی‌هایتان ارائه می‌کند. این طرح‌بندی‌ها قبلاً برای تطبیق با اندازه صفحه طراحی شده‌اند.

به طرح‌بندی‌های طراحی Figma مراجعه کنید، که طرح‌بندی‌های متعارف موجود و نحوه ساخت طرح خود را با استفاده از آنها نشان می‌دهد:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

ما PrimaryLayout یا EdgeContentLayout به عنوان طرح‌بندی سطح بالا برای بیشتر موارد استفاده توصیه می‌کنیم. رفتار پاسخگو را با استفاده از setResponsiveContentInsetEnabled تنظیم کنید، برای مثال:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

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

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

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

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

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

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

این به شما امکان می‌دهد طرح‌بندی کاشی‌های خود را مستقیماً در Android Studio پیش‌نمایش کنید. مثال نقاط شکست قبلی نشان می‌دهد که چگونه دکمه‌های اضافی هنگامی که فضای صفحه اجازه می‌دهد، هنگام پیش‌نمایش نشان داده می‌شوند:

نمایشگرهای کوچک و بزرگ که اثر نقطه شکست را نشان می دهد

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