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

تجربة طريقة Compose

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

إنشاء قوائم باستخدام Compose على 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));