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

يجب أن تعمل مربّعات تطبيقك جيدًا على أجهزة 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()
    }
)

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

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

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