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

نسخه Compose for Wear OS Material ۲.۵ ۳

---

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

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

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

چیدمان‌ها باید حاشیه‌های مبتنی بر درصد داشته باشند. در Wear Compose Material 3، ScreenScaffold حاشیه داخلی مبتنی بر درصد را به‌طور خودکار محاسبه می‌کند و contentPadding را به لامبدای محتوای خود ارائه می‌دهد؛ این پارامتر contentPadding را به TransformingLazyColumn ارسال کنید.

تکه‌کد زیر از مؤلفه 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 موقعیت‌یابی اطمینان حاصل شود.

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

• استفاده از Modifier.minimumVerticalContentPadding (مثل ListHeaderDefaults.minimumTopListContentPadding و ButtonDefaults.minimumVerticalListContentPadding)، به‌طوری‌که TransformingLazyColumn حداقل از حاشیه داخلی بالا و پایین توصیه‌شده استفاده کند وقتی آن موارد در لبه فهرست ظاهر می‌شوند.
• استفاده از ListHeader برای اولین مورد در فهرست، به‌جای یک Text ترکیب‌شدنی ساده.

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

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

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

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

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

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

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

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

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

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

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

با نمایشگرهای بزرگ‌تر، می‌توانید محتوا و ویژگی‌های بیشتری را معرفی کنید. برای پیاده‌سازی این نوع تجربه متمایز، از نقاط شکست اندازه صفحه‌نمایش استفاده کنید، و وقتی اندازه صفحه‌نمایش از ۲۲۵ 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.
    }
    // ...
List.kt

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

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

پیش‌نمایش‌های Compose به شما کمک می‌کند برای انواع اندازه‌های صفحه‌نمایش 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 را ببینید.