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

Wypróbuj Compose

Jetpack Compose na Wear OS to zalecany zestaw narzędzi do tworzenia interfejsu na Wear OS.

Wypróbuj Compose na Wear OS →

Aplikacje na Wear OS korzystają z tych samych technik układu co inne urządzenia z Androidem ale muszą być zaprojektowane z uwzględnieniem ograniczeń związanych z zegarkami.

Uwaga: nie przenoś dokładnej funkcjonalności i interfejsu z aplikacji mobilnej na Wear OS, oczekując dobrego wrażenia użytkownika.

Jeśli zaprojektujesz aplikację na prostokątne urządzenie przenośne, treści w pobliżu rogów ekranu mogą zostać przycięte na okrągłych zegarkach. Jeśli używasz przewijanej listy pionowej, problem jest mniejszy, ponieważ użytkownik może przewinąć, aby wyśrodkować treść. W przypadku pojedynczych ekranów może to jednak pogorszyć wrażenia użytkownika.

Jeśli używasz tych ustawień układu, tekst będzie się nieprawidłowo wyświetlać 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ą okrągłe urządzenia.

• Możesz użyć BoxInsetLayout aby zapobiec przycinaniu widoków w pobliżu krawędzi okrągłych ekranów.
• Możesz użyć WearableRecyclerView , aby utworzyć zakrzywiony układ, gdy chcesz wyświetlać i manipulować pionową listą elementów zoptymalizowaną pod kątem okrągłych ekranów.

Więcej informacji o projektowaniu aplikacji znajdziesz w wytycznych dotyczących projektowania na Wear OS.

Używanie BoxInsetLayout

Rysunek 2. Wcięcia okien na okrągłym ekranie.

Klasa BoxInsetLayout w bibliotece interfejsu Wear OS umożliwia zdefiniowanie układu, który działa na okrągłych ekranach. Ta klasa pozwala łatwo wyrównać widoki na środku lub w pobliżu krawędzi ekranu.

Szary kwadrat na rysunku 2 pokazuje obszar, w którym BoxInsetLayout może automatycznie umieszczać widoki podrzędne na okrągłych ekranach po zastosowaniu wymaganych wcięć okien. Aby wyświetlać się w tym obszarze, widoki podrzędne określają atrybut layout_boxedEdges z tymi wartościami:

• Połączenie top, bottom, left i right. Na przykład wartość "left|top" umieszcza lewą i górną krawędź elementu podrzędnego w szarym kwadracie na rysunku 2.
• Wartość "all" umieszcza całą zawartość elementu podrzędnego w szarym kwadracie na rysunku 2. Jest to najczęstsze podejście w przypadku ConstraintLayout wewnątrz.

Układ pokazany na rysunku 2 używa 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 części układu oznaczone pogrubioną czcionką:

• 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 zapewnia, że element ConstraintLayout i jego elementy podrzędne są umieszczone w obszarze zdefiniowanym przez wcięcia okien na okrągłych ekranach.

Używanie zakrzywionego układu

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