تطوير مربّعات لأحجام الشاشات المختلفة

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

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

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

توفّر مكتبة ProtoLayout Material تنسيقات محددة مسبقًا لمساعدتك في إنشاء المربّعات. تم تصميم هذه التنسيقات لتتلاءم مع حجم الشاشة.

راجِع تنسيقات تصميم Figma التي توضّح التنسيقات الأساسية المتاحة وكيفية إنشاء تصميمك باستخدامها:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

ننصحك باستخدام PrimaryLayout أو EdgeContentLayout كتنسيقات على مستوى أعلى لمعظم حالات الاستخدام. اضبط السلوك المتجاوب باستخدام setResponsiveContentInsetEnabled، على سبيل المثال:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

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

التنسيقات من مكتبة ProtoLayout Material سريعة الاستجابة وتعتني بموضع العنصر وظهوره بشكل صحيح. ومع ذلك، في بعض الحالات، قد تحتاج إلى تغيير عدد العناصر المرئية للحصول على أفضل النتائج. على سبيل المثال، قد تريد 3 أزرار على شاشة أصغر، و5 على شاشة أكبر.

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

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

توضح إرشادات التصميم الفرص الإضافية.

اختبار المربّعات على أحجام شاشات مختلفة باستخدام "المعاينات"

من المهم اختبار تصاميمك على أحجام شاشات مختلفة. استخدِم التعليقات التوضيحية لمعاينة المربّعات، بالإضافة إلى صفَّي TilePreviewHelper و TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

يتيح لك ذلك معاينة تصاميم مربّعات التطبيقات مباشرةً من داخل Android Studio. يوضّح مثال نقاط الاستراحة السابق كيفية عرض أزرار إضافية عند معاينة التطبيق إذا كانت مساحة الشاشة تسمح بذلك:

للحصول على مثال كامل، اطّلِع على نموذج مربّعات الوسائط على GitHub.