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

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

الشكل 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.