Le app su Wear OS utilizzano le stesse tecniche di layout degli altri dispositivi Android, ma devono essere progettate con vincoli specifici per gli smartwatch.
Nota: non trasferire la funzionalità e l'interfaccia utente esatte da un'app mobile a Wear OS e aspettati una buona esperienza utente.
Se progetti l'app per un dispositivo portatile rettangolare, i contenuti vicino agli angoli dello schermo potrebbero essere ritagliati sugli orologi rotondi. Se utilizzi un elenco verticale scorrevole, questo è meno un problema, in quanto l'utente può scorrere per centrare i contenuti. Tuttavia, per le singole schermate, può fornire un'esperienza utente negativa.
Se utilizzi le seguenti impostazioni per il layout, il testo viene visualizzato in modo errato sui dispositivi con schermi rotondi:
<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>
Per risolvere il problema, utilizza i layout che supportano i dispositivi rotondi nella libreria UI di Wear OS.
- Puoi utilizzare un elemento
BoxInsetLayout
per evitare che le visualizzazioni vengano ritagliate in prossimità dei bordi degli schermi rotondi. - Puoi utilizzare un elemento
WearableRecyclerView
per creare un layout curvo quando vuoi visualizzare e manipolare un elenco verticale di elementi ottimizzati per gli schermi rotondi.
Per ulteriori informazioni sulla progettazione di app, leggi le linee guida per la progettazione di Wear OS.
Utilizza un BoxInsetLayout
La classe
BoxInsetLayout
nella libreria di UI di Wear OS consente di
definire un layout adatto agli schermi rotondi. Questa classe consente di allineare facilmente le viste al centro o in prossimità dei bordi dello schermo.
Il quadrato grigio nella figura 2 mostra l'area in cui BoxInsetLayout
può posizionare automaticamente le viste secondarie su schermi rotondi dopo aver applicato
i riquadri della finestra richiesti. Per essere visualizzate all'interno di questa area, le viste secondarie specificano l'attributo layout_boxedEdges
con i seguenti valori:
- Una combinazione di
top
,bottom
,left
eright
. Ad esempio, un valore"left|top"
posiziona i bordi sinistro e superiore del riquadro secondario all'interno del quadrato grigio nella figura 2. - Il valore
"all"
posiziona tutti i contenuti del bambino all'interno del quadrato grigio nella figura 2. Questo è l'approccio più comune con un elementoConstraintLayout
all'interno.
Il layout mostrato nella figura 2 utilizza l'elemento <BoxInsetLayout>
e funziona su schermi rotondi:
<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>
Osserva le parti del layout contrassegnate in grassetto:
-
android:padding="15dp"
Questa riga assegna la spaziatura interna all'elemento
<BoxInsetLayout>
. -
android:padding="5dp"
Questa riga assegna la spaziatura interna all'elemento
ConstraintLayout
interno. -
app:layout_boxedEdges="all"
Questa riga assicura che l'elemento
ConstraintLayout
e i suoi elementi secondari siano inseriti all'interno dell'area definita dai riquadri delle finestre sugli schermi rotondi.
Utilizzare un layout curvo
La classe
WearableRecyclerView
nella libreria di UI di Wear OS
ti consente di attivare un layout curvo ottimizzato per gli schermi rotondi.
Per attivare un layout curvo per gli elenchi scorrevoli nella tua
app, consulta la pagina
Creare elenchi su Wear OS.