Sviluppo di riquadri per schermi di diverse dimensioni

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

Per scoprire di più sui principi di progettazione per i layout adattivi, leggi la guida alla progettazione.

Offrire esperienze differenziate tramite i punti di interruzione

I layout della libreria ProtoLayout Material sono reattivi e si occupano del corretto posizionamento e della visibilità degli elementi. Tuttavia, in alcuni casi potresti voler variare il numero di elementi visibili per ottenere risultati ottimali. Ad esempio, potresti volere 3 pulsanti su un display più piccolo e 5 su un display più grande.

Per implementare questo tipo di esperienza differenziata, utilizza i breakpoint delle dimensioni dello schermo. Per mostrare un layout diverso quando le dimensioni dello schermo superano i 225 dp:

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

La guida alla progettazione illustra 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 {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

In questo modo, puoi visualizzare l'anteprima dei layout dei riquadri direttamente in Android Studio.

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