Gestion du clavier détachable

La prise en charge des claviers amovibles permet de maximiser la productivité des utilisateurs sur les appareils à grand écran. Android déclenche une modification de la configuration chaque fois qu'un clavier est connecté ou déconnecté d'un appareil, ce qui peut entraîner une perte de l'état de l'UI. Votre application peut enregistrer et restaurer son état, en laissant le système gérer la recréation de l'activité, ou restreindre la recréation de l'activité pour les modifications de configuration du clavier.

Dans tous les cas, toutes les données liées au clavier sont stockées dans un objet Configuration. Les champs keyboard et keyboardHidden de l'objet de configuration contiennent des informations sur le type de clavier et sa disponibilité.

Bonnes pratiques

Les applications optimisées pour les grands écrans sont compatibles avec tous les types de périphériques d'entrée, des claviers logiciels et physiques aux stylets, souris, pavés tactiles et autres périphériques.

La prise en charge des claviers externes implique des modifications de configuration que vous pouvez gérer de deux manières :

1. Laissez le système recréer l'activité en cours et gérez l'état de votre application.
2. Gérez vous-même la modification de la configuration (l'activité ne sera pas recréée) :
   • Déclarer toutes les valeurs de configuration liées au clavier
   • Créer un gestionnaire de modifications de configuration

Les applications de productivité, qui nécessitent souvent un contrôle précis de l'UI pour la saisie de texte et d'autres entrées, peuvent bénéficier de l'approche "faites-le vous-même" pour gérer les changements de configuration.

Dans certains cas particuliers, vous pouvez modifier la mise en page de votre application lorsqu'un clavier matériel est connecté ou déconnecté, par exemple pour libérer de l'espace pour les outils ou les fenêtres d'édition.

Dans Jetpack Compose, vous pouvez réagir aux modifications de la configuration du clavier de deux manières :

1. UI réactive : lisez l'état de configuration actuel directement dans vos composables à l'aide de LocalConfiguration.current. L'UI se recompose automatiquement pour s'adapter au nouvel état lorsqu'un clavier est connecté ou déconnecté.
2. Callback d'effet secondaire : utilisez un DisposableEffect sensible au cycle de vie pour enregistrer un écouteur de changement de configuration sur l'activité hôte. Cela vous permet de déclencher des événements non liés à l'UI (comme la journalisation ou les analyses) sans recréer l'activité ni instancier d'éléments de vue factices.

Ingrédients

• android:configChanges : attribut de l'élément <activity> du fichier manifeste de l'application. Informe le système des modifications de configuration gérées par l'application.
• LocalConfiguration : fournisseur local composable qui expose le Configuration actuel de l'appareil.
• DisposableEffect : API d'effet secondaire Compose qui exécute un bloc de code lorsqu'un composable entre dans la composition et effectue un nettoyage lorsqu'il en sort.

Étapes

Déclarez l'attribut configChanges et ajoutez des valeurs liées au clavier pour éviter la recréation de l'activité. Ensuite, utilisez LocalConfiguration.current pour adapter dynamiquement la mise en page de votre composable ou enregistrez un écouteur de configuration à l'aide de DisposableEffect.

1. Déclarer l'attribut configChanges

Mettez à jour l'élément <activity> dans le fichier manifeste de l'application en ajoutant les valeurs keyboard|keyboardHidden à la liste des modifications de configuration déjà gérées :

<activity
      …
      android:configChanges="...|keyboard|keyboardHidden">

2. Répondre aux modifications de configuration du clavier

Pour gérer les changements de configuration dans Jetpack Compose, utilisez l'une des options suivantes, selon que vous mettez à jour l'UI ou que vous exécutez un rappel d'effet secondaire :

• Option A : UI réactive (recommandée)

  Lisez le type de clavier directement à partir de LocalConfiguration.current. Lorsque vous connectez ou déconnectez un clavier matériel, cette valeur change et Compose recompose automatiquement votre UI.

  val configuration = LocalConfiguration.current
  val isPhysicalKeyboardAttached = configuration.keyboard == Configuration.KEYBOARD_QWERTY
  
  if (isPhysicalKeyboardAttached) {
      // Render layout optimized for physical keyboard
  } else {
      // Render default layout
  }
  AdaptiveAppCookbook.kt

• Option B : Écouteur d'effets secondaires

  Si vous devez exécuter un effet secondaire (tel que la journalisation, la mise à jour d'une base de données locale ou le déclenchement d'analyses) lorsque la configuration change, utilisez un DisposableEffect pour enregistrer un écouteur de modification de configuration sur le ComponentActivity hôte.

  val context = LocalActivity.current
  DisposableEffect(context) {
      val activity = context as? ComponentActivity
      val listener = Consumer<Configuration> { newConfig ->
          val hasKeyboard = newConfig.keyboard == Configuration.KEYBOARD_QWERTY
          // Trigger non-UI actions, analytics, etc.
      }
      activity?.addOnConfigurationChangedListener(listener)
      onDispose {
          activity?.removeOnConfigurationChangedListener(listener)
      }
  }
  AdaptiveAppCookbook.kt

Résultats

Votre application réagira désormais à la connexion ou à la déconnexion d'un clavier externe sans recréer l'activité en cours d'exécution.

Ressources supplémentaires

Pour savoir comment enregistrer l'état de l'UI de votre application lors des changements de configuration, comme l'ajout ou le retrait d'un clavier, consultez Enregistrer des états d'interface utilisateur.