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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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.