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

يجب أن يعمل تطبيقك بشكل جيد على أجهزة Wear OS بجميع أحجامها، مع الاستفادة من المساحة الإضافية في حال توفّرها، وسيظلّ يبدو رائعًا على الشاشات الأصغر حجمًا أيضًا. ويقدّم هذا الدليل توصيات لتحقيق تجربة المستخدم هذه.

لمعرفة المزيد من المعلومات عن مبادئ التصميم للتنسيقات التكيُّفية، اطّلِع على إرشادات التصميم.

إنشاء تخطيطات سريعة الاستجابة باستخدام Horspeak

يجب أن تحتوي التنسيقات على هوامش تستند إلى النسبة المئوية. نظرًا لأن ميزة Compose تعمل تلقائيًا باستخدام القيم المطلقة بدلاً من ذلك، يمكنك استخدام مكوّنات من Horology Library، التي تحتوي على الميزات التالية:

• يتم ضبط الهوامش الأفقية بشكلٍ صحيح بناءً على النسبة المئوية لحجم شاشة الجهاز.
• تم ضبط التباعد في الأعلى والأسفل بشكل صحيح. وهذا يمثل تحديات معينة حيث يمكن أن يعتمد التباعد العلوي والسفلي الموصى به على المكونات المستخدمة. على سبيل المثال، يجب أن يكون للسمة Chip مسافة مختلفة عن المكوِّن Text عند استخدامها في قائمة.
• تم ضبط الهوامش TimeText بشكل صحيح.

يستخدم مقتطف الرمز التالي إصدار تنسيق ScalingLazyColumn الذي أعدّته شركة Horology لإنشاء محتوى يبدو رائعًا على مجموعة متنوعة من أحجام شاشات Wear OS:

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

يوضِّح هذا المثال أيضًا السمة ScreenScaffold]3 وAppScaffold. وتنسق هذه الإرشادات بين التطبيق والشاشات الفردية (مسارات التنقّل) لضمان اتّباع سلوك التنقّل الصحيح ووضع TimeText في الموضع.

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

• تمثّل هذه السمة مواصفات ItemType الأولى والأخيرة، لتحديد المساحة المتروكة الصحيحة.
• يتم استخدام ResponsiveListHeader للعنصر الأول في القائمة، لأنّ عناوين Text يجب ألا تحتوي على مساحة متروكة.

يمكن العثور على المواصفات الكاملة في مجموعات تصميم Figma. لمزيد من التفاصيل والأمثلة، يُرجى الاطِّلاع على ما يلي:

• مكتبة Horology: توفر مكونات للمساعدة في إنشاء تطبيقات محسنة ومختلفة لنظام Wear OS.
• نموذج ComposeStarter: وهو مثال يوضح المبادئ الموضّحة في هذا الدليل.
• إنّ نموذج JetCaster هو مثال أكثر تعقيدًا لتصميم تطبيق يتناسب مع أحجام شاشات مختلفة باستخدام مكتبة Horology.

استخدام تنسيقات التمرير في تطبيقك

استخدم تخطيط التمرير، كما هو موضح سابقًا في هذه الصفحة، كخيار افتراضي عند تنفيذ الشاشات. يتيح ذلك للمستخدمين الوصول إلى مكوّنات تطبيقك بغض النظر عن إعدادات العرض المفضّلة أو حجم شاشة الجهاز الذي يعمل بنظام التشغيل Wear OS.

تأثير الأحجام المختلفة للأجهزة وتغيّر حجم الخط

مربّعات حوار

يجب أيضًا أن تكون مربّعات الحوار قابلة للتمرير، ما لم يكن هناك سبب وجيه لعدم السماح بذلك. يضيف المكوِّن ResponsiveDialog، الذي يوفره موقع Horology ما يلي:

• الانتقال بشكل تلقائي
• تصحيح الهوامش بناءً على النسبة المئوية.
• يشير ذلك المصطلح إلى الأزرار التي تضبط عرضها في المكان الذي تسمح به المساحة، وذلك لتوفير أهداف نقر أكبر.

مربّعات حوار سريعة الاستجابة، توفّر إمكانية التنقل تلقائيًا وأزرارًا تتكيّف مع المساحة المتوفرة.

قد تتطلب الشاشات المخصّصة تنسيقات لا يمكن التمرير فيها.

قد تكون بعض الشاشات مناسبة للتخطيطات التي لا يتم التمرير بها. تتضمن عدة أمثلة شاشة المشغل الرئيسية في تطبيق الوسائط وشاشة التمرين في تطبيق اللياقة البدنية.

في هذه الحالات، انظر إلى الإرشادات الأساسية المتوفرة في مجموعات تصميم 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.
}

توضح إرشادات التصميم المزيد من هذه الفرص.

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

يساعدك إنشاء المعاينات في تطوير مجموعة متنوعة من أحجام شاشات نظام التشغيل 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.