Mettere in pausa e riprendere la riproduzione dei contenuti multimediali con la barra spaziatrice della tastiera

L'ottimizzazione per schermi di grandi dimensioni include la possibilità di gestire gli input della tastiera esterna, ad esempio reagire alla pressione della barra spaziatrice per mettere in pausa o riprendere la riproduzione di video e altri contenuti multimediali. Questa funzionalità è particolarmente utile per i tablet, che spesso si collegano a tastiere esterne, e per i Chromebook, che in genere sono dotati di tastiere esterne, ma possono essere utilizzati in modalità tablet.

Quando i contenuti multimediali sono l'unico elemento della finestra (ad esempio la riproduzione di video a schermo intero), rispondi agli eventi di pressione dei tasti a livello di schermo in Jetpack Compose.

Best practice

Ogni volta che la tua app riproduce un file multimediale, gli utenti devono essere in grado di mettere in pausa e riprendere la riproduzione premendo la barra spaziatrice su una tastiera fisica.

Ingredienti

• KEYCODE_SPACE: costante del codice chiave per la barra spaziatrice.
• onPreviewKeyEvent: Modifier che consente a un componente di intercettare gli eventi chiave hardware quando è attivo (o uno dei suoi elementi secondari).
• onKeyEvent: simile a onPreviewKeyEvent, questo Modifier consente a un componente di intercettare gli eventi chiave hardware quando è attivo (o uno dei suoi elementi secondari).

Passaggi

Per rispondere alla pressione dei tasti della tastiera in Jetpack Compose, la tua app deve ascoltare gli eventi di pressione dei tasti, filtrare gli eventi e rispondere alle pressioni dei tasti selezionati, ad esempio la pressione della barra spaziatrice.

1. Ascolta gli eventi della tastiera

Con Jetpack Compose, puoi utilizzare il modificatore onPreviewKeyEvent o onKeyEvent all'interno del componente che gestisce la sequenza di tasti.

La differenza principale tra i due modificatori è la posizione in cui viene inviato l'evento se il modificatore non lo utilizza:

• onPreviewKeyEvent: invia l'evento al suo primo elemento secondario.
• onKeyEvent: invia l'evento al componente principale del composable.

2. Filtra e gestisci le pressioni della barra spaziatrice

All'interno della lambda del modificatore onPreviewKeyEvent o onKeyEvent, filtra gli eventi chiave in cui il rilascio della chiave (KeyEventType.KeyUp) corrisponde alla barra spaziatrice (Key.Spacebar).

Restituisci true se il codice gestisce l'evento e non vuoi che l'evento si propaghi ulteriormente. Restituisci false per consentire ad altri componenti di gestire l'evento.

• Opzione A: utilizzo di onPreviewKeyEvent

  Column(
      modifier = Modifier.onPreviewKeyEvent { event ->
          if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
              // Handle spacebar keypress to pause/resume playback.
              true
          } else {
              false
          }
      }
  ) {
      // Content
  }
  AdaptiveAppCookbook.kt

• Opzione B: utilizzo di onKeyEvent

  Column(
      modifier = Modifier.onKeyEvent { event ->
          if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
              // Handle spacebar keypress to pause/resume playback.
              true
          } else {
              false
          }
      }
  ) {
      // Content
  }
  AdaptiveAppCookbook.kt

Risultati

Ora la tua app può rispondere alla pressione della barra spaziatrice per mettere in pausa e riprendere un video o altri contenuti multimediali.

Risorse aggiuntive

Per scoprire di più sugli eventi della tastiera e su come gestirli, consulta Gestire l'input da tastiera.