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
![](https://developer.android.com/static/wear/images/02_uilib.png?authuser=4&hl=pl)
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
iright
. 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 przypadkuConstraintLayout
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