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

يجب أن تعمل مربّعات تطبيقك بشكل جيد على أجهزة 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 نقطة كثافة، اتّبِع الخطوات التالية:

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

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

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

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

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

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

شاشات صغيرة وكبيرة تعرض تأثير نقطة التوقف

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