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:
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:
Display piccoli e grandi che mostrano l'effetto del punto di interruzione
Per un esempio completo, vedi l'esempio di riquadri multimediali su GitHub.