التعامل مع أشكال ساعات مختلفة

تجربة طريقة Compose

‫Jetpack Compose على Wear OS هي مجموعة أدوات واجهة المستخدم المقترَحة لأجهزة Wear OS.

تجربة Compose على Wear OS ←

تستخدم التطبيقات على 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 design guidelines.

استخدام BoxInsetLayout

الشكل 2: حواف النافذة على شاشة مستديرة

يتيح لك الصف 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.