إنشاء قوائم على Wear OS

تتيح القوائم للمستخدمين اختيار عنصر من بين مجموعة من الخيارات بسهولة على أجهزة Wear OS.

تتضمن مكتبة واجهة المستخدم القابلة للارتداء WearableRecyclerView، وهي RecyclerView التنفيذ لإنشاء قوائم محسنة للأجهزة القابلة للارتداء. يمكنك استخدام هذه الصفحة في تطبيقك القابل للارتداء من خلال إنشاء حاوية جديدة في WearableRecyclerView.

يمكنك استخدام WearableRecyclerView للحصول على قائمة طويلة من العناصر البسيطة، مثل مشغّل التطبيقات أو قائمة جهات الاتصال. قد يكون كل عنصر تحتوي على سلسلة قصيرة ورمز مرتبط بها. بدلاً من ذلك، قد يحتوي كل عنصر على سلسلة فقط أو رمز.

ملاحظة: تجنَّب التنسيقات المعقّدة. يجب أن يحتاج المستخدمون فقط إلى إلقاء نظرة سريعة على عنصر على مفهومها، خاصةً مع الأجهزة القابلة للارتداء حجم الشاشة المحدود.

من خلال تمديد فئة RecyclerView الحالية، WearableRecyclerView تعرض واجهات برمجة التطبيقات قائمة عناصر قابلة للتمرير عموديًا في قائمة مستقيمة افتراضيًا. يمكنك أيضًا استخدام واجهات برمجة تطبيقات WearableRecyclerView لتفعيل تصميم منحنٍ إيماءة تمرير دائري في تطبيقاتك القابلة للارتداء.

الشكل 1. عرض القائمة التلقائي على نظام التشغيل Wear OS

يوضّح لك هذا الدليل كيفية استخدام فئة WearableRecyclerView لإنشاء في تطبيقات Wear OS، وكيف يمكن تفعيل التصميم المنحني عن العناصر القابلة للتمرير، وكيفية تخصيص مظهر الأطفال أثناء التمرير.

إضافة WearableRecyclerView إلى نشاط باستخدام XML

يضيف التنسيق التالي WearableRecyclerView إلى نشاط: 

<androidx.wear.widget.WearableRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recycler_launcher_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

يوضّح المثال التالي WearableRecyclerView تم تطبيقه على نشاط:

Kotlin

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    ...
}

Java

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    ...
}

إنشاء تخطيط منحنٍ

لإنشاء تصميم منحنٍ للعناصر القابلة للتمرير في تطبيقك القابل للارتداء، قم بما يلي:

  • استخدام WearableRecyclerView باعتبارها حاويتك الرئيسية في تنسيق XML ذي الصلة.
  • ضبط setEdgeItemsCenteringEnabled(boolean) إلى true. هذا النمط لتوسيط العنصرين الأول والأخير عموديًا في القائمة الموجودة على الشاشة.
  • استخدِم الطريقة WearableRecyclerView.setLayoutManager() لضبط تنسيق العناصر على الشاشة.

Kotlin

wearableRecyclerView.apply {
    // To align the edge children (first and last) with the center of the screen.
    isEdgeItemsCenteringEnabled = true
    ...
    layoutManager = WearableLinearLayoutManager(this@MainActivity)
}

Java

// To align the edge children (first and last) with the center of the screen.
wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
...
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this));

إذا كان لتطبيقك متطلبات محدّدة لتخصيص مظهر الأطفال أثناء التصفّح، مثل تغيير حجم الرموز والنص أثناء تمرير العناصر بعيدًا عن الوسط - تمديد WearableLinearLayoutManager.LayoutCallback وإلغاء onLayoutFinished

تعرض مقتطفات الرمز التالية مثالاً لتخصيص تمرير العناصر لتغيير الحجم. بعيدًا عن المركز بتمديد صف واحد (WearableLinearLayoutManager.LayoutCallback):

Kotlin

/** How much icons should scale, at most.  */
private const val MAX_ICON_PROGRESS = 0.65f

class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

    private var progressToCenter: Float = 0f

    override fun onLayoutFinished(child: View, parent: RecyclerView) {
        child.apply {
            // Figure out % progress from top to bottom.
            val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
            val yRelativeToCenterOffset = y / parent.height + centerOffset

            // Normalize for center.
            progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset)
            // Adjust to the maximum scale.
            progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS)

            scaleX = 1 - progressToCenter
            scaleY = 1 - progressToCenter
        }
    }
}

Java

public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {
    /** How much icons should scale, at most. */
    private static final float MAX_ICON_PROGRESS = 0.65f;

    private float progressToCenter;

    @Override
    public void onLayoutFinished(View child, RecyclerView parent) {

        // Figure out % progress from top to bottom.
        float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
        float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

        // Normalize for center.
        progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
        // Adjust to the maximum scale.
        progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS);

        child.setScaleX(1 - progressToCenter);
        child.setScaleY(1 - progressToCenter);
    }
}

Kotlin

wearableRecyclerView.layoutManager =
        WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())

Java

CustomScrollingLayoutCallback customScrollingLayoutCallback =
                new CustomScrollingLayoutCallback();
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this, customScrollingLayoutCallback));