Sviluppo di riquadri per schermi di diverse dimensioni

I riquadri dell'app dovrebbero funzionare bene sui dispositivi Wear OS di tutte le dimensioni, prendendo spazio aggiuntivo ove disponibile e vengono comunque visualizzati in modo ottimale sulle app più piccole schermi di Google. Questa guida fornisce consigli per raggiungere questo utente un'esperienza senza intervento manuale.

Per saperne di più sui principi di progettazione dei layout adattivi, leggi le guida alla progettazione.

Creare layout adattabili con ProtoLayout

La libreria ProtoLayout Material fornisce layout predefiniti per aiutarti costruisci i tuoi riquadri. Questi layout sono già progettati per adattarsi allo schermo dimensioni.

Fai riferimento ai layout di progettazione di Figma, che mostrano la versione canonica layout disponibili e come sviluppare il tuo progetto utilizzandoli:

Consigliamo PrimaryLayout o EdgeContentLayout come livello superiore layout 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

I layout della libreria ProtoLayout Material sono già adattabili e di gestire il posizionamento e la visibilità degli elementi in modo corretto. Tuttavia, in alcuni casi, potresti voler variare il numero di elementi visibili per ottenere risultati ottimali. Per Ad esempio, potresti volere 3 pulsanti su uno schermo più piccolo e 5 su uno più grande display.

Per implementare questo tipo di esperienza differenziata, usa le dimensioni dello schermo punti di interruzione. 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 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 la Le annotazioni dell'anteprima dei riquadri, insieme a TilePreviewHelper e TilePreviewData corsi:

@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. La L'esempio precedente di punti di interruzione illustra il modo in cui pulsanti aggiuntivi Quando lo spazio dello schermo lo consente, vengono mostrati quando vengono visualizzati in anteprima:

Pulsanti aggiuntivi su display più grandi

Display piccoli e grandi che mostrano l'effetto del punto di interruzione

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