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

Aplikacje na Wear OS używają tych samych technik układu co inne urządzenia z Androidem ale nie musi być dostosowany do konkretnego rodzaju zegarków.

Uwaga: nie przenoś dokładnie takich samych funkcji i interfejsu z aplikacji mobilnej na Wear OS. i wygodę użytkowników.

Jeśli Twoja aplikacja jest przeznaczona na prostokątne urządzenia mobilne, treści w rogach ekranu mogą zostać przycięte na okrągłych zegarkach. Jeśli korzystasz z przewijanej pionowej listy, ta wartość jest mniejsza problem, ponieważ użytkownik może przewinąć stronę, aby wyśrodkować treść. Jednak w przypadku pojedynczych ekranów może pogarszać wrażenia użytkowników.

Jeśli zastosujesz te ustawienia do układu, tekst będzie się wyświetlał 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 w Biblioteka interfejsu Wear OS, która obsługuje okrągłe urządzenia.

  • BoxInsetLayout w celu uniknięcia przycięcia widoków blisko krawędzi okrągłych ekranów.
  • Za pomocą WearableRecyclerView aby utworzyć układ zakrzywiony, gdy chcesz wyświetlać pionowa lista elementów zoptymalizowanych pod kątem okrągłych ekranów.

Aby dowiedzieć się więcej o projektowaniu aplikacji, przeczytaj Wytyczne projektowe dla Wear OS

Użyj układu BoxInsetLayout

Rysunek 2. Wgłębienia okien na okrągłym ekranie.

BoxInsetLayout w bibliotece interfejsu Wear OS pozwala możesz określić układ dla okrągłych ekranów. Te zajęcia pozwalają: możesz łatwo wyrównać widoki na środku lub blisko krawędzi ekranu.

Szary kwadrat na rys. 2 pokazuje obszar, w którym BoxInsetLayout może automatycznie umieszczać widoki podrzędne na okrągłych ekranach po zastosowaniu nie są wymagane. Aby wyświetlać się w tym obszarze, element podrzędny widoki danych określają atrybut layout_boxedEdges o następujących wartościach:

  • Kombinacja wartości top, bottom, left i right. Na przykład plik Wartość "left|top" określa położenie elementu podrzędnego względem lewej i u góry. krawędzie wewnątrz szarego kwadratu na ilustracji 2.
  • Wartość "all" pozwala umieścić w środku treści dziecka szary kwadrat na ilustracji 2. To najczęstsza metoda w przypadku ConstraintLayout w środku.

Układ pokazany na ilustracji 2 korzysta z <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 elementy układu oznaczone pogrubioną czcionką:

  • android:padding="15dp"

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

  • android:padding="5dp"

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

  • app:layout_boxedEdges="all"

    Ten wiersz gwarantuje, że element ConstraintLayout a jego elementy podrzędne są umieszczone wewnątrz obszaru zdefiniowanego przez okno, na okrągłych ekranach.

Użyj układu zakrzywionego

Klasa WearableRecyclerView w bibliotece interfejsu Wear OS pozwala wybrać zakrzywiony układ zoptymalizowany pod kątem okrągłych ekranów. Aby włączyć układ zakrzywiony dla przewijanych list w aplikacji, patrz Tworzenie list w Wear OS