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 componenteText
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 intestazioniText
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 del dispositivo e della scalabilità dei caratteri](https://developer.android.com/static/images/wear/screenshot-test.png?hl=it)
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.
![Comportamento adattivo delle finestre di dialogo in Orologo](https://developer.android.com/static/images/wear/adaptive-dialogs.png?hl=it)
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:
- Configura i file del progetto e dell'app
build.gradle
per usare Roborazzi. - 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 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
consente di generare screenshot in cui il valoreTimeText
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.