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

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

لمعرفة المزيد حول مبادئ التصميم للتخطيطات التكيفية، اطلع على إرشادات التصميم.

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

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

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

يستخدم مقتطف الرمز التالي نسخة Horology التنسيق 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. لمزيد من المعلومات، التفاصيل والأمثلة، يُرجى الاطّلاع على:

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

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

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