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

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

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

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

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

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

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

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

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

يتيح لك ذلك معاينة تخطيطات "البلاطات" مباشرةً في Android Studio.

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