ایجاد فهرست در Wear OS

امتحان کردن روش Compose

Jetpack Compose در Wear OS جعبه‌ابزار واسط کاربر توصیه‌شده برای Wear OS است.

ایجاد فهرست بااستفاده از Compose در Wear OS ←

فهرست‌ها به کاربران اجازه می‌دهند به‌راحتی موردی را از مجموعه‌ای از گزینه‌ها در دستگاه‌های Wear OS انتخاب کنند.

«کتابخانه میانای کاربری پوشیدنی» شامل کلاس WearableRecyclerView است که پیاده‌سازی RecyclerView برای ایجاد فهرست‌های بهینه‌شده برای دستگاه‌های پوشیدنی است. با ایجاد کردن محفظه WearableRecyclerView جدید، می‌توانید از این میانای کاربری در برنامه پوشیدنی‌تان استفاده کنید.

از WearableRecyclerView برای فهرست طولانی موارد ساده، مثل راه‌انداز برنامه یا فهرست مخاطبین، استفاده کنید. هر مورد ممکن است رشته‌ای کوتاه و نمادی مرتبط داشته باشد. یا اینکه هر مورد ممکن است فقط یک رشته یا یک نماد داشته باشد.

توجه: از چیدمان‌های پیچیده استفاده نکنید. کاربران باید فقط با یک نگاه به مورد متوجه شوند که آن مورد چیست، به‌ویژه با اندازه محدود صفحه‌نمایش پوشیدنی‌ها.

با گسترش کلاس RecyclerView موجود، میاناهای برنامه‌سازی کاربردی WearableRecyclerView به‌طور پیش‌فرض فهرست موارد پیمایش‌پذیر عمودی را در فهرست مستقیم نمایش می‌دهند. همچنین می‌توانید از WearableRecyclerView APIها برای موافقت با طرح‌بندی منحنی و اشاره پیمایش دایره‌ای در برنامه‌های پوشیدنی خود استفاده کنید.

شکل ۱. نمای فهرست پیش‌فرض در 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 اعمال‌شده بر یک فعالیت را نشان می‌دهد:

کاتلین

class MainActivity : Activity() {

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

جاوا

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() برای تنظیم چیدمان موارد روی صفحه استفاده کنید.

کاتلین

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

جاوا

// 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 نشان می‌دهد:

کاتلین

/** 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
        }
    }
}

جاوا

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);
    }
}

کاتلین

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

جاوا

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