Sviluppo di riquadri per schermi di diverse dimensioni

I riquadri dell'app dovrebbero funzionare bene sui dispositivi Wear OS di tutte le dimensioni, sfruttando lo spazio aggiuntivo se disponibile e avere comunque un aspetto fantastico anche sugli schermi più piccoli. Questa guida fornisce suggerimenti per ottenere questa esperienza utente.

Per scoprire di più sui principi di progettazione per i layout adattivi, leggi le indicazioni sulla progettazione.

Creare layout adattabili con ProtoLayout

La libreria ProtoLayout Material fornisce layout predefiniti per aiutarti a creare i tuoi riquadri. Questi layout sono già progettati per adattarsi alle dimensioni dello schermo.

Fai riferimento ai layout di progettazione di Figma, che mostrano i layout canonici disponibili e come utilizzarli per creare il tuo progetto:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Consigliamo PrimaryLayout o EdgeContentLayout come layout di primo livello per la maggior parte dei casi d'uso. Imposta il comportamento adattabile utilizzando setResponsiveContentInsetEnabled, ad esempio:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

Offri esperienze differenziate tramite punti di interruzione

Con i display più grandi, puoi introdurre funzionalità e contenuti aggiuntivi. Per implementare questo tipo di esperienza differenziata, utilizza i punti di interruzione dimensioni schermo, che mostrano un layout diverso quando le dimensioni dello schermo superano i 225 dp:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

Le linee guida sulla progettazione illustrano ulteriori opportunità.

Provare riquadri su schermi di dimensioni diverse utilizzando la funzionalità Anteprime

È importante testare i layout su schermi di dimensioni diverse. Utilizza le annotazioni Anteprima riquadro, insieme ai corsi TilePreviewHelper e TilePreviewData:

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

In questo modo puoi visualizzare l'anteprima dei layout dei riquadri direttamente in Android Studio. L'esempio di punti di interruzione precedente illustra come vengono visualizzati i pulsanti aggiuntivi quando lo spazio sullo schermo lo consente, quando visualizzati in anteprima:

Per un esempio completo, vedi l'esempio di riquadri multimediali su GitHub.