Eseguire ed eseguire il debug di un riquadro

I riquadri non sono app, pertanto vengono implementati e avviati utilizzando meccanismi diversi. Quando su un dispositivo sono attive le opzioni sviluppatore (gli emulatori hanno queste funzionalità attive per impostazione predefinita), diventano disponibili funzionalità aggiuntive che supportano lo sviluppo di riquadri per l'utilizzo sia in Android Studio che in adb.

Eseguire il deployment dei riquadri

Per eseguire il deployment del riquadro, puoi installare l'app su un dispositivo fisico o un emulatore utilizzando Android Studio, come descritto in Compilare ed eseguire l'app. Poi, seguendo gli stessi passaggi degli utenti normali, aggiungi manualmente il riquadro al carosello dei riquadri.

Durante lo sviluppo attivo, potresti trovare più facile e veloce utilizzare la funzionalità "Wear OS Tile" Run/Debug Configuration di Android Studio. Questo metodo esegue il deployment e attiva automaticamente il riquadro, consentendo un'interazione immediata senza passaggi manuali aggiuntivi.

Creare automaticamente la configurazione

Il modo più semplice per eseguire il deployment e l'esecuzione di un riquadro è utilizzare l'icona "Esegui servizio" nel gutter. In questo modo viene creata automaticamente una configurazione di esecuzione, se non esiste già. Per maggiori informazioni, consulta Configurazioni di esecuzione/debug di Wear OS.

Screenshot con freccia rossa che punta a "▷" nel margine
Fai clic su "▷" nel margine
Screenshot che mostra la freccia rossa che punta al menu a discesa della configurazione di esecuzione e l'opzione di configurazione "TestTileService" evidenziata in rosso
Viene creata automaticamente una "configurazione di esecuzione"

Creare la configurazione manualmente

Se la configurazione automatica non funziona o vuoi un maggiore controllo sul risultato, consulta le istruzioni riportate di seguito. Gli screenshot sono di Android Studio Meerkat (2024.3.1).

  1. Seleziona l'opzione "⋮" ("hamburger") dalla barra del titolo.

    Screenshot con freccia rossa che indica l'opzione "⋮" (a forma di hamburger) nella barra del titolo.

  2. Seleziona "Modifica…".

    "Modifica…" è la prima opzione nella sezione Configurazione dell'elenco a discesa.

  3. Seleziona "+" per aggiungere una configurazione nella finestra di dialogo visualizzata.

    Screenshot con freccia rossa che punta a "+".

  4. Seleziona "Wear OS Tile" come tipo della nuova configurazione.

    Screenshot con freccia rossa che punta all'opzione di configurazione "Riquadro Wear OS".

  5. Inserisci un nome per la configurazione e seleziona il modulo e il riquadro in base alle tue esigenze.

    Screenshot con tre frecce rosse che indicano le aree della finestra di dialogo.

  6. Tocca "Ok". La configurazione verrà visualizzata nella barra del titolo. Tocca il pulsante "▷" ("Esegui") e il riquadro verrà implementato e attivato.

Visualizzare l'anteprima dei riquadri in Android Studio

A partire dal rilascio di funzionalità di Android Studio Koala, puoi visualizzare gli snapshot delle tessere dell'app Wear OS. Questo pannello è particolarmente utile se l'aspetto del riquadro cambia in risposta a condizioni, ad esempio contenuti diversi a seconda delle dimensioni del display del dispositivo o una partita di sport che raggiunge l'intervallo.

I nomi dei gruppi nel riquadro di anteprima corrispondono al nome del gruppo indicato nell'annotazione di anteprima
Riquadro di anteprima dei riquadri in Android Studio.

Aggiungere dipendenze

Includi le seguenti dipendenze nel file build.gradle.kts o build.gradle della tua app:

dependencies {
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.5.0")
    debugImplementation("androidx.wear.tiles:tiles-tooling:1.5.0")
    implementation("androidx.wear:wear-tooling-preview:1.0.0")
}

Configurare le anteprime dei riquadri

Per visualizzare un'anteprima dell'aspetto del riquadro su schermi Wear OS di dimensioni diverse, aggiungi l'annotazione @Preview e trasmetti il parametro device. Tieni presente che questa annotazione @Preview proviene da un pacchetto diverso da quello che utilizzi per le anteprime componibili.

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
@Preview(device = WearDevices.LARGE_ROUND)
fun tilePreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

Aggiungere e registrare le risorse

Se il riquadro utilizza risorse Android, devi registrarle all'interno del parametro onTileResourceRequest di TilePreviewData, come mostrato nello snippet di codice seguente:

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
fun previewWithResources(context: Context) = TilePreviewData(
    onTileResourceRequest = { request ->
        Resources.Builder()
            .setVersion(myResourcesVersion)
            .addIdToImageMapping(
                    myImageId, getImageById(R.drawable.myDrawableImageId))
            .build()
    },
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

fun getImageById(
    @DrawableRes id: Int,
): ImageResource =
    ImageResource.Builder()
        .setAndroidResourceByResId(
            AndroidImageResourceByResId.Builder()
                .setResourceId(id)
                .build(),
        )
        .build()

Mostrare valori specifici dalle origini dati della piattaforma

Se il riquadro utilizza dati della piattaforma, come battito cardiaco, calorie, distanza e passi, mostra i valori predefiniti.

Per mostrare un valore specifico, imposta il parametro platformDataValues durante la creazione dell'oggetto TilePreviewData, come mostrato nello snippet di codice seguente:

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
fun previewWithPlatformOverride(context: Context) = TilePreviewData(
    platformDataValues = PlatformDataValues.of(
        PlatformHealthSources.Keys.HEART_RATE_BPM,
        DynamicDataBuilders.DynamicDataValue.fromFloat(160f)
    ),
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

Manipolare i riquadri utilizzando adb

adb può essere utilizzato per installare, rimuovere e attivare i riquadri in modo programmatico durante lo sviluppo.

Nei seguenti comandi, ComponentName è una stringa composta dal nome del pacchetto e da una classe all'interno di questo pacchetto, ad esempio com.example.wear.tiles/com.example.wear.tiles.PreviewTileService.

add-tile

Aggiunge un riquadro fornito da COMPONENT_NAME e restituisce l'indice.

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SURFACE --es operation add-tile --ecn component [COMPONENT_NAME]

Output di esempio:

Broadcast completed: result=1, data="Index=[0]"

Se una scheda esiste già nel carosello, viene rimossa e reinserita nella stessa posizione. In caso contrario, viene inserito in Index[0]. Inoltre, se il carosello ha raggiunto la capacità massima, l'ultimo riquadro viene rimosso per fare spazio al nuovo.

show-tile

Attiva il riquadro all'indice TILE_INDEX.

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SYSUI --es operation show-tile --ei index [TILE_INDEX]

Output di esempio:

Broadcast completed: result=1

remove-tile

Rimuove tutte le istanze di riquadro nel carosello associate a COMPONENT_NAME.

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SURFACE --es operation remove-tile --ecn component [COMPONENT_NAME]

Output di esempio:

result=1, data="Tile(s) removed."

Valori restituiti

  • result=0: nessun ricevitore di trasmissione ha risposto a questo comando, molto probabilmente perché la versione di Wear OS è troppo vecchia o il processo di debug non è in esecuzione.
  • result=1: operazione riuscita.
  • result>1: Errore.