Как создавать списки на устройстве Wear OS

Попробуйте Compose
Jetpack Compose – это рекомендуемый набор инструментов для создания пользовательского интерфейса в Wear OS.

Списки позволяют пользователям легко выбирать нужный элемент из набора вариантов на устройствах Wear OS.

Библиотека Wearable UI Library включает класс WearableRecyclerView, который представляет собой реализацию RecyclerView для создания списков, оптимизированных для носимых устройств. Вы можете использовать этот интерфейс в приложении для носимых устройств, создав новый контейнер WearableRecyclerView.

Используйте WearableRecyclerView для длинных списков простых элементов, например для программы запуска приложений или списка контактов. Каждый элемент может содержать короткую строку и связанный с ней значок. В качестве альтернативы каждый элемент может иметь только строку или значок.

Примечание. Избегайте сложных макетов. Пользователю должно быть достаточно одного взгляда на элемент, чтобы понять, что это такое, особенно с учетом ограниченного размера экрана носимых устройств.

Расширяя существующий класс RecyclerView, API WearableRecyclerView по умолчанию отображают вертикально прокручиваемый список элементов. Вы также можете использовать API WearableRecyclerView, чтобы включить изогнутый макет и жест круговой прокрутки в приложениях для носимых устройств.

Рисунок 1. Список по умолчанию на Wear OS.

В этом руководстве рассказывается, как использовать класс WearableRecyclerView для создания списков в приложениях для Wear OS, как включить изогнутый макет для прокручиваемых элементов и как настроить внешний вид дочерних элементов при прокрутке.

Как добавить WearableRecyclerView в действие с помощью XML

В следующем макете в объект activity добавляется 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));