Gestire diverse forme di orologi

Prova Compose

Jetpack Compose su Wear OS è il toolkit UI consigliato per Wear OS.

Prova Compose su Wear OS →

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 eseguire il porting della funzionalità e della UI esatte da un'app mobile a Wear OS e aspettarti una buona esperienza utente.

Se progetti l'app per un dispositivo portatile rettangolare, i contenuti vicino agli angoli dello schermo potrebbero essere ritagliati sugli smartwatch rotondi. Se utilizzi un elenco verticale scorrevole, il problema è minore, poiché l'utente può scorrere per centrare i contenuti. Tuttavia, per le schermate singole, può offrire una pessima esperienza utente.

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 questo problema, utilizza i layout nella libreria UI di Wear OS che supportano i dispositivi rotondi.

• Puoi utilizzare un BoxInsetLayout per impedire che le visualizzazioni vengano ritagliate vicino ai bordi degli schermi rotondi.
• Puoi utilizzare un 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, consulta le linee guida di progettazione di Wear OS.

Utilizza un BoxInsetLayout

Figura 2. Inserimenti finestra su uno schermo rotondo.

La classe BoxInsetLayout nella libreria UI di Wear OS ti consente di definire un layout che funziona per gli schermi rotondi. Questa classe ti consente di allineare facilmente le visualizzazioni al centro o vicino ai bordi dello schermo.

Il quadrato grigio nella figura 2 mostra l'area in cui il BoxInsetLayout può posizionare automaticamente le visualizzazioni secondarie sugli schermi rotondi dopo aver applicato gli inserimenti finestra richiesti. Per essere visualizzate all'interno di questa area, le visualizzazioni secondarie specificano l'attributo layout_boxedEdges con i seguenti valori:

• Una combinazione di top, bottom, left e right. Ad esempio, un "left|top" valore posiziona i bordi sinistro e superiore dell'elemento secondario all'interno del quadrato grigio nella figura 2.
• Il valore "all" posiziona tutti i contenuti dell'elemento secondario all'interno del quadrato grigio nella figura 2. Questo è l'approccio più comune con un ConstraintLayout all'interno.

Il layout mostrato nella figura 2 utilizza l'elemento <BoxInsetLayout> e funziona sugli 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 il padding all'elemento <BoxInsetLayout>.

• android:padding="5dp"

  Questa riga assegna il padding all'elemento ConstraintLayout interno.

• app:layout_boxedEdges="all"

  Questa riga garantisce che l'elemento ConstraintLayout e i relativi elementi secondari siano racchiusi all'interno dell'area definita dagli inserimenti finestra sugli schermi rotondi.

Utilizza un layout curvo

La classe WearableRecyclerView nella libreria 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 Creare elenchi su Wear OS.