Sviluppo di riquadri per schermi di diverse dimensioni

I riquadri della tua app devono funzionare bene su dispositivi Wear OS di tutte le dimensioni, sfruttando lo spazio aggiuntivo, se disponibile, e avere un bell'aspetto anche su schermi più piccoli. Questa guida fornisce consigli per ottenere questa esperienza dell'utente.

Per scoprire di più sui principi di progettazione dei layout adattivi, consulta le linee guida per la progettazione.

Creare layout adattabili utilizzando 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.

Consulta i layout di design di Figma, che mostrano i layout canonici disponibili e come utilizzarli per creare il tuo design:

• 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()

Offrire esperienze differenziate tramite i breakpoint

I layout della raccolta ProtoLayout Material sono già responsivi e si occupano del posizionamento e della visibilità corretti degli elementi. Tuttavia, in alcuni casi potrebbe essere opportuno variare il numero di elementi visibili per ottenere risultati ottimali. Ad esempio, potresti volere 3 pulsanti su un display più piccolo e 5 su uno più grande.

Per implementare questo tipo di esperienza differenziata, utilizza le breakpoint per le dimensioni dello schermo. Per mostrare 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 per la progettazione illustrano ulteriori opportunità.

Testare i riquadri su schermi di dimensioni diverse utilizzando le anteprime

È importante testare i layout su schermi di dimensioni diverse. Utilizza le annotazioni Anteprima riquadro insieme alle classi 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 precedente relativo ai breakpoint illustra come vengono visualizzati pulsanti aggiuntivi quando lo spazio sullo schermo lo consente, in anteprima:

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