Как работать с часами разной формы

Попробуйте Compose

Jetpack Compose – это рекомендуемый набор инструментов для создания пользовательского интерфейса в 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.