L'app dovrebbe funzionare bene su dispositivi Wear OS di tutte le dimensioni, sfruttando i vantaggi se disponibile e di avere un aspetto ottimale anche sugli schermi più piccoli. Questa guida fornisce consigli per realizzare questa esperienza utente.
Per saperne di più sui principi di progettazione dei layout adattivi, leggi le guida alla progettazione.
Crea layout adattabili con Horologist
I layout devono avere margini basati sulla percentuale. Poiché Compose funziona per impostazione predefinita in valori assoluti, utilizza i componenti Horologist, che contiene le seguenti funzionalità:
- I margini orizzontali sono impostati correttamente in base a una percentuale dello schermo del dispositivo dimensioni.
- La spaziatura superiore e inferiore è impostata correttamente. Ciò presenta particolari sfide
poiché la spaziatura consigliata in alto e in basso può dipendere dai componenti
in uso. Ad esempio,
Chip
deve avere una spaziatura diversa per unText
quando utilizzato in un elenco. TimeText
margini sono impostati correttamente.
Il seguente snippet di codice utilizza la versione di Horologist del
Layout di ScalingLazyColumn
per creare contenuti accattivanti su una vasta gamma
delle dimensioni dello schermo di Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Questo esempio mostra anche ScreenScaffold
e AppScaffold
.
Si coordina tra l'app e le singole schermate
(percorsi di navigazione) per garantire il corretto comportamento di scorrimento e
Posizionamento TimeText
.
Per la spaziatura interna superiore e inferiore, tieni presente anche quanto segue:
- Specifica il primo e l'ultimo
ItemType
, per determinare il corretto spaziatura interna. - L'utilizzo di
ResponsiveListHeader
per il primo elemento dell'elenco, perché Le intestazioniText
non devono avere spaziatura interna.
Le specifiche complete sono disponibili nei kit di design di Figma. Per maggiori informazioni dettagli ed esempi, consulta:
- La raccolta Horologo: fornisce componenti per aiutarti a costruire ottimizzate e differenziate per Wear OS.
- L'esempio di ComposeStarter è un esempio che mostra il principi descritti in questa guida.
- L'esempio di JetCaster è un esempio più complesso di costruzione di una per lavorare su schermi di diverse dimensioni, utilizzando la raccolta Horologist.
Utilizzare i layout a scorrimento nell'app
Usa un layout a scorrimento, come mostrato in precedenza in questa pagina, come scelta predefinita quando implementi i tuoi schermi. Questo consente agli utenti di raggiungere i componenti della tua app indipendentemente dalle preferenze di visualizzazione o dalle dimensioni dello schermo del dispositivo Wear OS.
![L'effetto delle diverse dimensioni del dispositivo e della scalabilità dei caratteri](https://developer.android.google.cn/static/images/wear/screenshot-test.png?authuser=8&hl=it)
L'effetto delle diverse dimensioni dei dispositivi e la scalabilità dei caratteri.
Finestre di dialogo
Le finestre di dialogo dovrebbero essere scorrevoli, a meno che non ci sia un'ottima ragione per non farlo.
Il componente ResponsiveDialog
, fornito da Horologist, aggiunge il parametro
seguenti:
- Scorrimento per impostazione predefinita.
- Correggi i margini basati su percentuale.
- Pulsanti che si adattano alla propria larghezza dove lo spazio lo consente, per offrire una maggiore target dei tocchi.
![Comportamento adattivo delle finestre di dialogo in Orologo](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?authuser=8&hl=it)
Finestre di dialogo adattabili, che offrono scorrimento per impostazione predefinita e pulsanti che si adattano allo spazio disponibile.
Le schermate personalizzate potrebbero richiedere layout senza scorrimento
Alcuni schermi potrebbero comunque essere adatti a layout non scorrevoli. Diversi esempi includi la schermata principale del player in un'app multimediale e la schermata dell'allenamento in un app per l'attività fisica.
In questi casi, consulta le indicazioni canoniche fornite nella Kit di design Figma e implementano un design che si adatti alle dimensioni dello schermo, usando i margini corretti.
Offri esperienze differenziate tramite punti di interruzione
Con i display più grandi, puoi introdurre funzionalità e contenuti aggiuntivi. A implementare questo tipo di esperienza differenziata, utilizzare punti di interruzione relativi alle dimensioni dello schermo, che mostra un layout diverso quando le dimensioni dello schermo superano 225 dp:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
Le linee guida sulla progettazione illustrano meglio queste opportunità.
Provare combinazioni di dimensioni dello schermo e dei caratteri utilizzando le anteprime
Le anteprime di Scrivi ti aiutano a sviluppare schermi di Wear OS di diverse dimensioni. Utilizza le definizioni di anteprima per i dispositivi e per la scalabilità del carattere per vedere quanto segue:
- L'aspetto degli schermi agli estremi delle dimensioni, ad esempio il carattere più grande accoppiato con uno schermo più piccolo.
- Il comportamento dell'esperienza differenziata sui punti di interruzione.
Assicurati di implementare le anteprime utilizzando WearPreviewDevices
e
WearPreviewFontScales
per tutte le schermate dell'app.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Test degli screenshot
Oltre al test delle anteprime, il test degli screenshot ti consente di eseguire test su una serie dimensioni hardware esistenti. Ciò è particolarmente utile quando questi dispositivi potrebbero non sarà immediatamente disponibile e il problema potrebbe non presentarsi di per sé schermi di altre dimensioni.
Il test degli screenshot è utile anche per identificare le regressioni in posizioni specifiche in il tuo codebase.
Nei nostri esempi viene utilizzato Roborazzi per il test degli screenshot:
- Configura i file del progetto e dell'app
build.gradle
da utilizzare Roborazzi. - Crea un test degli screenshot per ogni schermata della tua app. Ad esempio:
nell'esempio di ComposeStarter, viene eseguito un test per
GreetingScreen
implementato come illustrato inGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Alcuni punti importanti da ricordare:
FixedTimeSource
ti consente di generare screenshot in cuiTimeText
non variare e causare inavvertitamente errori dei test.WearDevice.entries
contiene le definizioni dei dispositivi Wear OS più popolari, quindi i test devono essere eseguiti su schermi di dimensioni rappresentative.
Genera immagini dorate
Per generare immagini per i tuoi schermi, esegui questo comando in un terminale:
./gradlew recordRoborazziDebug
Verifica immagini
Per verificare le modifiche rispetto alle immagini esistenti, esegui questo comando in un terminale:
./gradlew verifyRoborazziDebug
Per un esempio completo di test degli screenshot, vedi l'esempio di ComposeStarter.