Создание списков в Wear OS

Попробуйте способ создания композиций.

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

Создание списков с помощью Compose на Wear OS →

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

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

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

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

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

Рисунок 1. Стандартный вид списка в Wear OS.

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

Добавьте WearableRecyclerView в активность с помощью XML.

Следующий макет добавляет WearableRecyclerView в Activity:

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

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() .

Котлин

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 :

Котлин

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

Котлин

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

Java

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