Le app su Wear OS usano le stesse tecniche di layout degli altri dispositivi Android ma devono essere progettati con vincoli specifici per gli orologi.
Nota: non trasferire su Wear OS la funzionalità e l'UI esatte di un'app mobile e aspettarti una buona esperienza utente.
Se progetti l'app per un dispositivo portatile rettangolare, i contenuti si trovano vicino agli angoli dello schermo. potrebbero essere ritagliati sugli orologi rotondi. Se utilizzi un elenco verticale scorrevole, la quantità di questi elementi sarà inferiore un problema, perché l'utente può scorrere per centrare i contenuti. Tuttavia, per i singoli schermi, offrono un'esperienza utente negativa.
Se utilizzi le seguenti impostazioni per il layout, il testo non viene visualizzato correttamente sui dispositivi con schermi rotondi:
a<ndroidx.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" > T<extView 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 questo problema, utilizza i layout in libreria UI di Wear OS che supporta dispositivi rotondi.
- Puoi utilizzare una
BoxInsetLayout
per evitare che le visualizzazioni vengano ritagliate in prossimità dei bordi degli schermi rotondi. - Puoi usare un
WearableRecyclerView
per creare un layout curvo quando vuoi visualizzare e manipolare elenco verticale di elementi ottimizzati per gli schermi rotondi.
Per ulteriori informazioni sulla progettazione di app, leggi il Linee guida per la progettazione per Wear OS.
Utilizza un layout BoxInset
![](https://developer.android.com/static/wear/images/02_uilib.png?authuser=0000&hl=it)
Figura 2. Finestra con riquadri su uno schermo rotondo.
Lo
BoxInsetLayout
nella libreria UI di Wear OS consente di
definisci un layout adatto agli schermi rotondi. Questo corso ti consente
allineare facilmente le visualizzazioni al centro o vicino ai 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 l'applicazione
gli inserti di finestre richiesti. Da visualizzare all'interno di quest'area, bambino
viste specificano l'attributo layout_boxedEdges
con i seguenti valori:
- Una combinazione di
top
,bottom
,left
eright
. Ad esempio, un Il valore"left|top"
posiziona il riquadro secondario a sinistra e in alto i bordi all'interno del quadrato grigio nella Figura 2. - Il valore
"all"
posiziona tutti i contenuti del file secondario all'interno il quadrato grigio nella figura 2. Questo è l'approccio più comune conConstraintLayout
al suo interno.
Il layout mostrato nella figura 2 utilizza lo <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 spaziatura interna alla sezione
<BoxInsetLayout>
. -
android:padding="5dp"
Questa riga assegna spaziatura interna all'elemento
ConstraintLayout
interno. -
app:layout_boxedEdges="all"
Questa riga assicura che l'elemento
ConstraintLayout
e i relativi elementi secondari sono inseriti all'interno dell'area definita dalla finestra riquadri su schermi rotondi.
Utilizzare un layout curvo
Classe
WearableRecyclerView
nella raccolta UI di Wear OS
consente di attivare un layout curvo ottimizzato per gli schermi rotondi.
Per attivare un layout curvo per gli elenchi scorrevoli nel tuo
vedi
Creare elenchi su Wear OS.