Obsługa różnych kształtów zegarków

Uwaga: ten przewodnik dotyczy korzystania z widoków danych w Androidzie. Rozważ użycie tworzenia na Wear OS – nowoczesnego deklaratywnego podejścia do tworzenia interfejsów użytkownika na urządzeniach do noszenia zgodnych z najnowszymi wytycznymi dotyczącymi materiałów. Jetpack Compose pozwala pisać lepsze aplikacje przy użyciu mniejszej ilości kodu.

Aplikacje na Wear OS wykorzystują tę samą technikę układu co inne urządzenia z Androidem, ale muszą być zaprojektowane pod kątem wymagań typowych dla zegarka.

Uwaga: nie przenoś dokładnie tych funkcji ani UI z aplikacji mobilnej na Wear OS. Pamiętaj tylko, że mogą one być dla użytkowników wygodne.

Jeśli projektujesz aplikację na prostokątne urządzenie przenośne, treści znajdujące się w rogach ekranu mogą zostać przycięte na okrągłych zegarkach. Jeśli używasz przewijanej pionowej listy, nie stanowi to żadnego problemu, ponieważ użytkownik może przewijać treść, aby wyśrodkować zawartość. Jednak w przypadku pojedynczych ekranów może to utrudniać korzystanie z aplikacji.

Jeśli używasz tych ustawień układu, tekst wyświetla się nieprawidłowo na urządzeniach z okrągłymi ekranami:

<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>

Aby rozwiązać ten problem, użyj układów z biblioteki interfejsu Wear OS, które obsługują urządzenia okrągłe.

• Aby zapobiec przycinaniu widoków blisko krawędzi okrągłych ekranów, możesz użyć elementu BoxInsetLayout.
• Za pomocą właściwości WearableRecyclerView możesz utworzyć układ krzywy, gdy chcesz wyświetlać pionową listę elementów zoptymalizowanych pod kątem okrągłych ekranów i modyfikować ich ustawienia.

Więcej informacji o projektowaniu aplikacji znajdziesz w wytycznych na temat projektowania aplikacji na Wear OS.

Używanie obiektu BoxInsetLayout

Rysunek 2. Wyrównane okna na okrągłym ekranie.

Klasa BoxInsetLayout w bibliotece interfejsu użytkownika Wear OS pozwala zdefiniować układ odpowiedni do okrągłych ekranów. Ta klasa pozwala łatwo wyrównywać widoki na środku lub blisko krawędzi ekranu.

Szary kwadrat na ilustracji 2 pokazuje obszar, w którym po zastosowaniu wymaganych ustawień okien obiekt BoxInsetLayout może automatycznie umieszczać widoki podrzędne na okrągłych ekranach. Aby wyświetlać je w tym obszarze, widoki podrzędne mają atrybut layout_boxedEdges o tych wartościach:

• Kombinacja top, bottom, left i right. Na przykład wartość "left|top" umieszcza lewe i górne krawędzie dziecka wewnątrz szarego kwadratu na ilustracji 2.
• Wartość "all" umieszcza wszystkie treści dziecka w szarym kwadracie na ilustracji 2. Jest to najczęstszy sposób użycia ConstraintLayout.

Układ pokazany na Rysunku 2 korzysta z elementu <BoxInsetLayout> i działa na okrągłych ekranach:

<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>

Zwróć uwagę na pogrubione fragmenty układu:

• android:padding="15dp"

  Ta linia przypisuje dopełnienie do elementu <BoxInsetLayout>.

• android:padding="5dp"

  Ta linia przypisuje dopełnienie do wewnętrznego elementu ConstraintLayout.

• app:layout_boxedEdges="all"

  Ta linia dba o to, aby element ConstraintLayout i jego elementy podrzędne znajdowały się w ramkach wewnątrz obszaru zdefiniowanego przez wstawki w oknach na okrągłych ekranach.

Użyj układu krzywego

Klasa WearableRecyclerView w bibliotece interfejsu Wear OS umożliwia włączenie układu krzywego zoptymalizowanego pod kątem okrągłych ekranów. Aby włączyć krzywy układ na potrzeby przewijanych list w aplikacji, przeczytaj artykuł Tworzenie list na Wear OS.