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

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

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

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

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

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

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

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

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

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

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