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

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

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

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

طرح‌بندی‌ها باید حاشیه‌های مبتنی بر درصد داشته باشند. از آنجا که Compose به‌طور پیش‌فرض در مقادیر مطلق کار می‌کند، از مؤلفه‌های کتابخانه Horologist استفاده کنید که دارای ویژگی‌های زیر است:

• حاشیه های افقی بر اساس درصدی از اندازه صفحه نمایش دستگاه به درستی تنظیم می شوند.
• فاصله بالا و پایین به درستی تنظیم شده است. این چالش های خاصی را ایجاد می کند زیرا فاصله توصیه شده از بالا و پایین می تواند به اجزای مورد استفاده بستگی داشته باشد. به عنوان مثال، یک Chip زمانی که در یک لیست استفاده می شود باید فاصله متفاوتی با یک جزء Text داشته باشد.
• حاشیه های TimeText به درستی تنظیم شده است.

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

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

برای لایه های بالا و پایین نیز به نکات زیر توجه کنید:

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

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

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

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

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

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

دیالوگ ها

دیالوگ ها نیز باید قابل پیمایش باشند، مگر اینکه دلیل بسیار خوبی برای این کار وجود نداشته باشد. مؤلفه ResponsiveDialog که توسط Horologist ارائه شده است، موارد زیر را اضافه می کند:

• اسکرول به صورت پیش فرض
• حاشیه های مبتنی بر درصد را اصلاح کنید.
• دکمه‌هایی که عرض خود را در جایی که فضا اجازه می‌دهد تنظیم می‌کنند تا اهداف ضربه‌ای را افزایش دهند.

دیالوگ های پاسخگو، ارائه اسکرول به طور پیش فرض و دکمه هایی که با فضای موجود سازگار می شوند.

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

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

در این موارد، به راهنمایی های متعارف ارائه شده در کیت های طراحی 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.
}

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

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

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

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

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

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

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

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

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

نمونه های ما از 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(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

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

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

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

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

./gradlew recordRoborazziDebug

تصدیق تصاویر

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

./gradlew verifyRoborazziDebug

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