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

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

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

ساختن چیدمان‌های واکنش‌گرا بااستفاده از Material 3

تکه‌کد زیر از TransformingLazyColumn عنصر برای ایجاد محتوایی استفاده می‌کند که در اندازه‌های مختلف صفحه‌نمایش Wear OS عالی به‌نظر می‌رسد:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

این مثال همچنین ScreenScaffold و AppScaffold را نشان می‌دهد. این‌ها بین «برنامه» و صفحه‌های جداگانه هماهنگی می‌کنند (مسیرهای پیمایش) تا از عملکرد پیمایش صحیح و TimeText موقعیت‌یابی مطمئن شوند.

برای حاشیه بالا و پایین، به موارد زیر نیز توجه کنید:

• مشخصات اولین و آخرین ItemType، برای تعیین حاشیه صحیح.
• استفاده از ListHeader برای اولین مورد در فهرست، زیرا سرصفحه‌های Text نباید حاشیه داشته باشند.

مشخصات کامل را می‌توانید در کیت‌های طراحی Figma پیدا کنید. برای جزئیات و نمونه‌های بیشتر، به اینجا مراجعه کنید:

• کتابخانه Horologist - ابزارهای کمکی برای کمک به ساختن برنامه‌های بهینه‌سازی‌شده و متمایز برای Wear OS ارائه می‌دهد.
• نمونه ComposeStarter - مثالی که اصول ذکرشده در این راهنما را نشان می‌دهد.
• نمونه JetCaster - نمونه‌ای پیچیده‌تر از ساختن برنامه برای کار با اندازه‌های مختلف صفحه‌نمایش بااستفاده از کتابخانه Horologist.

استفاده از چیدمان‌های پیمایشی در برنامه

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

تأثیر اندازه‌های مختلف دستگاه و مقیاس‌بندی قلم.

کادرهای گفتگو

مگر اینکه دلیل بسیار خوبی برای عدم پیمایش وجود داشته باشد، گفتگوها نیز باید پیمایش‌پذیر باشند. عنصر AlertDialog واکنش‌گرا است و به‌طور پیش‌فرض اگر محتوا از ارتفاع ناحیه نمایش فراتر رود، پیمایش‌پذیر است.

صفحه‌های سفارشی ممکن است به چیدمان‌های بدون پیمایش نیاز داشته باشند

برخی‌از صفحه‌ها ممکن است همچنان برای چیدمان‌های غیرپیمایشی مناسب باشند. چند مثال شامل صفحه پخش‌کننده اصلی در برنامه رسانه‌ای و صفحه تمرین در برنامه تناسب اندام می‌شود.

در این موارد، به راهنمایی‌های متعارف ارائه‌شده در کیت‌های طراحی Figma نگاه کنید و طراحی‌ای را پیاده‌سازی کنید که بااستفاده از حاشیه‌های صحیح، به اندازه صفحه‌نمایش واکنش نشان دهد.

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

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

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 برای همه صفحه‌های برنامه پیاده‌سازی کنید. برای جزئیات کامل درباره پیکربندی پیش‌نمایش‌های Wear OS، مشخصات سخت‌افزار سفارشی، و پیش‌نمایش فهرست‌های پیمایشی، به پیش‌نمایش کردن میانای کاربر در Compose برای Wear OS مراجعه کنید.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

آزمایش نماگرفت

علاوه‌بر آزمایش پیش‌نمایش، آزمایش نماگرفت به شما امکان می‌دهد در طیف وسیعی از اندازه‌های سخت‌افزار موجود آزمایش کنید. این کار به‌ویژه در مواردی مفید است که ممکن است این دستگاه‌ها فوراً دردسترس شما نباشند و مشکل ممکن است در اندازه‌های صفحه دیگر نمایان نشود.

آزمایش نماگرفت همچنین به شما کمک می‌کند پسرفت‌ها را در مکان‌های خاصی در پایگاه کدتان شناسایی کنید.

نمونه‌های ما از Roborazzi برای آزمایش نماگرفت استفاده می‌کنند:

1. پروژه و فایل‌های برنامه build.gradle را برای استفاده از Roborazzi پیکربندی کنید.
2. برای هر صفحه‌ای که در برنامه‌تان دارید، آزمون نماگرفت ایجاد کنید. برای مثال، کد زیر آزمون نماگرفتی را برای صفحه‌ای که حاوی فهرست است نشان می‌دهد:

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

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

چند نکته مهم که باید به آن‌ها توجه کنید:

• ‫WearDevice.entries شامل تعاریف اکثر دستگاه‌های Wear OS پرطرفدار است تا آزمایش‌ها در طیف نماینده‌ای از اندازه‌های صفحه‌نمایش اجرا شوند.

تولید تصاویر طلایی

برای تولید تصاویر برای صفحه‌نمایش‌هایتان، فرمان زیر را در پایانه اجرا کنید:

./gradlew recordRoborazziDebug

درستی‌سنجی تصویرها

برای درستی‌سنجی تغییرات دربرابر تصاویر موجود، فرمان زیر را در پایانه اجرا کنید:

./gradlew verifyRoborazziDebug

برای مشاهده نمونه کامل آزمایش نماگرفت، نمونه ComposeStarter را ببینید.