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

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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

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

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

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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 نگاه کنید و با استفاده از حاشیه های صحیح، طرحی را اجرا کنید که به اندازه صفحه نمایش پاسخگو باشد.

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

با نمایشگرهای بزرگتر، می توانید محتوا و ویژگی های اضافی را معرفی کنید. برای اجرای این نوع تجربه متمایز، از نقاط شکست اندازه صفحه استفاده کنید که زمانی که اندازه صفحه از 225 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

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

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

پیش‌نمایش‌های نوشتن به شما کمک می‌کنند تا برای اندازه‌های مختلف صفحه‌نمایش Wear OS توسعه پیدا کنید. برای مشاهده موارد زیر از تعاریف پیش نمایش دستگاه ها و مقیاس فونت استفاده کنید:

• چگونه صفحه نمایش شما به افراط در اندازه نگاه می کند، به عنوان مثال، بزرگترین فونت جفت شده با کوچکترین صفحه نمایش.
• چگونه تجربه متمایز شما در نقاط شکست رفتار می کند.

مطمئن شوید که پیش‌نمایش‌ها را با استفاده از WearPreviewDevices و WearPreviewFontScales برای همه صفحه‌های برنامه خود پیاده‌سازی می‌کنید.

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

تست اسکرین شات

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

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

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

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

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

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

چند نکته مهم قابل توجه:

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

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

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

./gradlew recordRoborazziDebug

تصدیق تصاویر

برای تأیید تغییرات در تصاویر موجود، دستور زیر را در ترمینال اجرا کنید:

./gradlew verifyRoborazziDebug

برای نمونه کامل تست اسکرین شات، نمونه ComposeStarter را ببینید.