يجب أن تعمل مربّعات تطبيقك بشكل جيد على أجهزة Wear OS بجميع أحجامها، مع الاستفادة من المساحة الإضافية في حال توفّرها، مع الحفاظ على شكلها الرائع على الشاشات الأصغر حجمًا أيضًا. يقدم هذا الدليل توصيات لتحقيق تجربة المستخدم هذه.
لمعرفة المزيد من المعلومات عن مبادئ التصميم للتنسيقات التكيُّفية، اطّلِع على إرشادات التصميم.
إنشاء تخطيطات سريعة الاستجابة باستخدام ProtoLayout
توفّر مكتبة ProtoLayout Material تنسيقات محددة مسبقًا لمساعدتك في إنشاء المربّعات. تم تصميم هذه التخطيطات بالفعل للتكيّف مع حجم الشاشة.
راجع تخطيطات تصميم Figma، التي توضح التنسيقات الأساسية المتاحة وكيفية إنشاء التصميم باستخدامها:
ننصح باستخدام 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.