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

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