Sviluppa per schermi di dimensioni diverse

L'app dovrebbe funzionare bene su dispositivi Wear OS di tutte le dimensioni, sfruttando lo spazio aggiuntivo ove disponibile e avere comunque un'ottima resa anche sugli schermi più piccoli. Questa guida fornisce consigli per realizzare questa esperienza utente.

Per scoprire di più sui principi di progettazione per i layout adattivi, leggi le indicazioni sulla 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 della Raccolta Horologist, che include le seguenti funzionalità:

• I margini orizzontali sono impostati correttamente in base a una percentuale delle dimensioni dello schermo del dispositivo.
• La spaziatura superiore e inferiore è impostata correttamente. Ciò presenta particolari problematiche, dato che la spaziatura consigliata in alto e in basso può dipendere dai componenti utilizzati. Ad esempio, Chip dovrebbe avere una spaziatura diversa rispetto a un componente Text se utilizzato in un elenco.
• TimeText margini sono impostati correttamente.

Il seguente snippet di codice utilizza la versione di Horologist del layout ScalingLazyColumn per creare contenuti perfetti su schermi di diverse dimensioni di Wear OS:

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

Questo esempio dimostra anche ScreenScaffold]3 e AppScaffold. Queste si coordinano tra l'app e le singole schermate (percorsi di navigazione) per garantire il corretto comportamento di scorrimento e posizionamento di TimeText.

Per la spaziatura interna superiore e inferiore, tieni presente anche quanto segue:

• Le specifiche del primo e dell'ultimo ItemType per determinare la spaziatura interna corretta.
• L'utilizzo di ResponsiveListHeader per il primo elemento dell'elenco, perché le intestazioni Text non devono avere spaziatura interna.

Le specifiche complete sono disponibili nei kit di design di Figma. Per ulteriori dettagli ed esempi, consulta:

• La libreria Horologist: fornisce componenti per aiutarti a creare app ottimizzate e differenziate per Wear OS.
• L'esempio di ComposeStarter: un esempio che mostra i principi descritti in questa guida.
• L'esempio di JetCaster: un esempio più complesso di creazione di un'app che funzioni con schermi di dimensioni diverse, utilizzando la libreria Horologist.

Utilizzare i layout a scorrimento nell'app

Utilizza un layout a scorrimento, come mostrato in precedenza in questa pagina, come scelta predefinita quando implementi le schermate. In questo modo gli utenti possono 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 dei dispositivi e della scalabilità dei caratteri.

Finestre

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 quanto segue:

• Scorrimento per impostazione predefinita.
• Correggi i margini basati su percentuale.
• Pulsanti che regolano la propria larghezza dove lo spazio lo consente, per aumentare i target di tocco.

Finestre di dialogo adattabili, con 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. Alcuni esempi includono la schermata principale del player in un'app multimediale e la schermata dell'allenamento in un'app per il fitness.

In questi casi, consulta le indicazioni canoniche fornite nei kit di design Figma e implementa un design che si adatti alle dimensioni dello schermo, utilizzando i margini corretti.

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:

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:

• Il modo in cui gli schermi guardano gli estremi del dimensionamento, ad esempio, carattere più grande accoppiato a 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 della tua app.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

Test degli screenshot

Oltre al test dell'anteprima, il test degli screenshot ti consente di eseguire test su una serie di dimensioni hardware esistenti. Ciò è particolarmente utile nei casi in cui questi dispositivi potrebbero non essere immediatamente disponibili e il problema potrebbe non presentarsi su schermi di altre dimensioni.

Il test degli screenshot è utile anche per identificare le regressioni in punti specifici del codebase.

Nei nostri esempi viene utilizzato Roborazzi per il test degli screenshot:

1. Configura i file del progetto e dell'app build.gradle per usare Roborazzi.
2. Crea un test degli screenshot per ogni schermata presente nella tua app. Ad esempio, nell'esempio di ComposeStarter, viene implementato un test per GreetingScreen come illustrato in GreetingScreenTest:

@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 consente di generare screenshot in cui il valore TimeText non varia e causa inavvertitamente il mancato superamento dei test.
• WearDevice.entries contiene le definizioni dei dispositivi Wear OS più diffusi, in modo che i test vengano eseguiti su una gamma rappresentativa di dimensioni dello schermo.

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.