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

يجب أن يعمل تطبيقك بشكل جيد على أجهزة 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.

بالنسبة إلى المساحة المتروكة في الأعلى والأسفل، يُرجى أيضًا مراعاة ما يلي:

• استخدام Modifier.minimumVerticalContentPadding (مثل ListHeaderDefaults.minimumTopListContentPadding و ButtonDefaults.minimumVerticalListContentPadding)، بحيث يستخدم TransformingLazyColumn على الأقل المساحة المتروكة المقترَحة في الأعلى والأسفل عندما تظهر هذه العناصر على حافة القائمة
• استخدام 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 لجميع الشاشات في تطبيقك. للحصول على تفاصيل كاملة حول ضبط معاينات 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.