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
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
iright
. 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życiaConstraintLayout
.
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.