Gestire diverse forme di orologi

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

Figura 2. Finestra su uno schermo rotondo.

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 e right. 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 elemento ConstraintLayout 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.