تستخدم التطبيقات على Wear OS أساليب التنسيق نفسها التي تستخدمها أجهزة Android الأخرى، ولكن يجب تصميمها وفقًا لقيود خاصة بالساعة.
ملاحظة: لا تنقِل الوظائف وواجهة المستخدم بشكل دقيق من تطبيق متوافق مع الأجهزة الجوّالة إلى نظام التشغيل Wear OS وتتوقّع تقديم تجربة جيدة للمستخدم.
إذا صمّمت تطبيقك لجهاز مستطيل محمول باليد، قد يتم اقتصاص المحتوى بالقرب من زوايا الشاشة على الساعات المستديرة. أمّا إذا كنت تستخدم قائمة عمودية قابلة للتمرير، فلن يمثّل هذا الأمر مشكلة، إذ يمكن للمستخدم الانتقال للأعلى أو للأسفل لتوسيط المحتوى. ومع ذلك، يمكن أن يقدّم تجربة مستخدم سيئة للشاشات الفردية.
إذا استخدمت الإعدادات التالية في التنسيق، سيظهر النص بشكل غير صحيح على الأجهزة التي تحتوي على شاشات دائرية:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text" android:layout_width="0dp" android:layout_height="0dp" android:text="@string/very_long_hello_world" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
لحلّ هذه المشكلة، يمكنك استخدام التنسيقات المتوفرة في مكتبة واجهة مستخدم Wear OS التي تتوافق مع الأجهزة المستديرة.
- يمكنك استخدام
BoxInsetLayout
لمنع اقتصاص المشاهَدات بالقرب من أطراف الشاشات المستديرة. - يمكنك استخدام
WearableRecyclerView
لإنشاء تنسيق منحني عندما تريد عرض قائمة عمودية بالعناصر التي تم تحسينها لتتوافق مع الشاشات المستديرة.
للحصول على مزيد من المعلومات حول تصميم التطبيقات، يمكنك الاطّلاع على إرشادات تصميم نظام التشغيل Wear OS.
استخدام BoxInsetLayout
تتيح لك فئة
BoxInsetLayout
في مكتبة واجهة مستخدم Wear OS
تحديد تنسيق يناسب الشاشات المستديرة. وتتيح لك هذه الفئة محاذاة طرق العرض بسهولة في وسط الشاشة أو بالقرب من حوافها.
يوضّح المربّع الرمادي في الشكل 2 المنطقة التي يمكن فيها للسمة BoxInsetLayout
وضع طرق العرض الفرعية تلقائيًا على الشاشات المستديرة بعد تطبيق النوافذ الداخلية المطلوبة. للعرض داخل هذه المنطقة، تحدد طرق العرض الثانوية السمة layout_boxedEdges
بالقيم التالية:
- وهي مجموعة من
top
وbottom
وleft
وright
. على سبيل المثال، تضع القيمة"left|top"
الحافتين اليسرى والعلوية الخاصة بالطفل داخل المربع الرمادي في الشكل 2. - تضع القيمة
"all"
كل المحتوى الخاص بالطفل داخل المربّع الرمادي في الشكل 2. هذا هو الأسلوب الأكثر شيوعًا إذا كانConstraintLayout
بداخله.
يستخدم التنسيق الذي يظهر في الشكل 2 العنصر <BoxInsetLayout>
ويعمل على الشاشات المستديرة:
<androidx.wear.widget.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" android:padding="15dp"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" app:layout_boxedEdges="all"> <TextView android:layout_height="wrap_content" android:layout_width="match_parent" android:text="@string/sometext" android:textAlignment="center" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <ImageButton android:background="@android:color/transparent" android:layout_height="50dp" android:layout_width="50dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" android:src="@drawable/cancel" /> <ImageButton android:background="@android:color/transparent" android:layout_height="50dp" android:layout_width="50dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" android:src="@drawable/ok" /> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.wear.widget.BoxInsetLayout>
لاحظ أجزاء التخطيط المميزة بالخط العريض:
-
android:padding="15dp"
يوفّر هذا السطر مساحة متروكة للعنصر
<BoxInsetLayout>
. -
android:padding="5dp"
يوفّر هذا السطر مساحة متروكة للعنصر
ConstraintLayout
الداخلي. -
app:layout_boxedEdges="all"
يضمن هذا السطر أن يتم وضع عنصر
ConstraintLayout
وعناصره الثانوية في مربّع داخل المنطقة التي تحدّدها النوافذ الداخلية على الشاشات المستديرة.
استخدام تصميم مقوّس
تتيح لك فئة
WearableRecyclerView
في مكتبة واجهة مستخدم Wear OS تفعيل تصميم منحني محسَّن للشاشات المستديرة.
لتفعيل تنسيق منحني للقوائم القابلة للتمرير في تطبيقك، راجِع المقالة
إنشاء قوائم على نظام التشغيل Wear OS.