تطوير التطبيقات لتناسب أحجام الشاشات المختلفة

يجب أن يعمل تطبيقك بشكل جيد على أجهزة 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، ونفِّذ تصميمًا سريع الاستجابة لحجم الـ شاشة، باستخدام المساحات المتروكة الصحيحة.

توفير تجارب مختلفة من خلال نقاط التوقف

باستخدام شاشات العرض الأكبر، يمكنك عرض محتوى وميزات إضافية. لتنفيذ هذا النوع من التجارب المختلفة، استخدِم نقاط توقف حجم الشاشة، مع عرض تنسيق مختلف عندما يتجاوز حجم الشاشة 225 وحدة بكسل مستقلة الكثافة:

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 لجميع الشاشات في تطبيقك.

@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.