Gestire diverse forme di orologi

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: 


<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 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

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