Работайте с часами разных форм

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

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

Примечание: Не стоит переносить точную функциональность и пользовательский интерфейс мобильного приложения на Wear OS и ожидать хорошего пользовательского опыта.

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

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

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/very_long_hello_world"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

  • Для предотвращения обрезки элементов по краям круглых экранов можно использовать BoxInsetLayout .
  • Вы можете использовать WearableRecyclerView для создания изогнутой компоновки, если хотите отображать и управлять вертикальным списком элементов, оптимизированным для круглых экранов.

Для получения дополнительной информации о разработке приложений ознакомьтесь с рекомендациями по дизайну Wear OS .

Используйте BoxInsetLayout

Рисунок 2. Вставки окон на круглом экране.

Класс BoxInsetLayout из библиотеки пользовательского интерфейса Wear OS позволяет определить макет, подходящий для круглых экранов. Этот класс позволяет легко выравнивать элементы по центру или по краям экрана.

Серый квадрат на рисунке 2 показывает область, где BoxInsetLayout может автоматически размещать свои дочерние элементы на круглых экранах после применения необходимых отступов окна. Для отображения в этой области дочерние элементы указывают атрибут layout_boxedEdges со следующими значениями:

  • Сочетание значений top , bottom , left и right . Например, значение "left|top" позиционирует левый и верхний края дочернего элемента внутри серого квадрата на рисунке 2.
  • Значение "all" размещает все содержимое дочернего элемента внутри серого квадрата на рисунке 2. Это наиболее распространенный подход с использованием ConstraintLayout внутри.

Макет, показанный на рисунке 2, использует элемент <BoxInsetLayout> и работает на круглых экранах:

<androidx.wear.widget.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_boxedEdges="all">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/cancel" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ok" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.wear.widget.BoxInsetLayout>

Обратите внимание на элементы макета, выделенные жирным шрифтом:

  • android:padding="15dp"

    Эта строка задает отступы элементу <BoxInsetLayout> .

  • android:padding="5dp"

    Эта строка задает отступы внутреннему элементу ConstraintLayout .

  • app:layout_boxedEdges="all"

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

Используйте изогнутую разметку.

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