Pause et reprise de la lecture de contenus multimédias avec la barre d'espace du clavier

L'optimisation pour les grands écrans doit permettre les interactions au moyen d'un clavier externe, par exemple lorsque l'utilisateur appuie sur la Spacebar pour mettre en pause ou reprendre la lecture de vidéos et d'autres contenus multimédias. Cela est particulièrement utile pour les tablettes, qui sont souvent connectées à des claviers externes, et pour les Chromebooks, qui sont généralement équipés de claviers externes, mais qui peuvent être utilisés en mode Tablette.

Lorsque le contenu multimédia est le seul élément de la fenêtre (par exemple, durant la lecture d'une vidéo en plein écran), répondez aux événements de pression sur une touche au niveau de l'écran dans Jetpack Compose.

Bonnes pratiques

Chaque fois que votre application lit un fichier multimédia, les utilisateurs doivent pouvoir suspendre et reprendre la lecture en appuyant sur la barre d'espace d'un clavier physique.

Ingrédients

• KEYCODE_SPACE: constante de code de touche pour la barre d'espace.
• onPreviewKeyEvent: Modifier qui permet à un composant d'intercepter les événements de touche matérielle lorsque celui-ci (ou l'un de ses enfants) est sélectionné.
• onKeyEvent: à l'instar de onPreviewKeyEvent, ce Modifier permet à un composant d'intercepter les événements de touche matérielle lorsque celui-ci (ou l'un de ses enfants) est sélectionné.

Étapes

Pour répondre aux pressions sur les touches du clavier dans Jetpack Compose, votre application doit écouter les événements de pression sur les touches, les filtrer et répondre aux pressions de touches sélectionnées, comme une barre d'espace.

1. Écouter les événements de clavier

Avec Jetpack Compose, vous pouvez tirer parti du modificateur onPreviewKeyEvent ou onKeyEvent au sein du composant qui gère la frappe.

La principale différence entre les deux modificateurs est l'endroit où l'événement est déclenché si le modificateur ne l'utilise pas.

• onPreviewKeyEvent : distribue l'événement à son premier enfant.
• onKeyEvent : distribue l'événement au parent du composable.

2. Filtrer et gérer les appuis sur la barre d'espace

Dans le lambda du modificateur onPreviewKeyEvent ou onKeyEvent, filtrez les événements de touche où la libération de la touche (KeyEventType.KeyUp) correspond à la barre d'espace (Key.Spacebar).

Renvoyez true si votre code gère l'événement et que vous ne voulez pas qu'il se propage davantage. Renvoyez false pour autoriser d'autres composants à gérer l'événement.

• Option A : Utiliser 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

• Option B : Utiliser 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

Résultats

Votre application peut désormais réagir aux appuis sur la barre d'espace pour mettre en pause et reprendre la lecture d'une vidéo ou d'un autre type de contenu multimédia.

Ressources supplémentaires

Pour en savoir plus sur les événements de clavier et leur gestion, consultez la section Gérer la saisie au clavier.