Gestion des gestes: bord à bord. Partie 1

Bonjour à tous. Surtout pour les étudiants d'un cours avancé de développement Android, ils ont préparé la traduction d'un article intéressant.

---

Il s'agit du premier article de leur série Gesture Management. Vous trouverez d'autres articles ici .

Android Q a ajouté un nouveau mode de navigation pour le système, permettant à l'utilisateur de revenir à l'écran précédent, d'accéder à l'écran principal et de lancer l'assistant à l'aide de gestes.


Démonstration de nouveaux gestes dans Android Q

Avec la transition vers un modèle de système de contrôle gestuel, les applications ont gagné plus d'espace sur l'écran. Cela a permis aux applications de fournir une expérience utilisateur plus immersive.

Sur la plupart des appareils, les utilisateurs peuvent choisir le mode de navigation à leur goût. Le mode de navigation à trois boutons existant (composé des boutons retour, accueil, recents) demeure néanmoins. Cette mesure est nécessaire pour tous les appareils de la version Q et supérieure.

Vous pouvez en savoir plus sur les recherches et les solutions incluses dans le concept de contrôle gestuel dans cet article des chefs de produit de l'interface utilisateur du système Android.

Cet article est le premier d'une petite série qui se concentre sur la façon dont les développeurs peuvent fournir un contrôle gestuel dans leurs applications. Dans la série, nous couvrirons les sujets suivants:

1. Bord à bord: autorisez votre application à remplir tout l'écran.
2. Traitement des superpositions visuelles de l'interface utilisateur du système.
3. La gestion des gestes d'application est en conflit avec les gestes du système.
4. Scénarios courants et moyens de les prendre en charge.

Commençons par la façon dont les applications peuvent varier d'un bord à l'autre de l'écran.

Bord à bord

J'utilise le terme bord à bord pour décrire les applications dont la fenêtre peut être étendue en plein écran pour obtenir un effet plus excitant. Par défaut, les applications sont situées sous la barre d'état (barre d'état) et au-dessus de la barre de navigation (barre de navigation) (ensemble, elles sont appelées barres système).

D'un bord à l'autre, les applications vont au-delà des panneaux système. Cela gardera le contenu de votre application à l'honneur pour créer une bonne expérience utilisateur.

En pratique, cela signifie que le créateur de l'application doit se souvenir de deux choses:

Utilisation de la zone de barre de navigation

La première et la plus importante considération pour prendre en charge le contrôle gestuel est la gestion de l'emplacement derrière la barre de navigation. Comme la barre de navigation a diminué en taille et en pertinence, il est fortement recommandé de placer des applications derrière la barre de navigation lorsque vous travaillez avec Android Q + pour créer une UX plus convaincante et moderne.

Lorsqu'il est lancé sur des appareils avec Android Pie et inférieurs, l'emplacement derrière la barre de navigation est considéré comme facultatif, et il appartient au créateur de l'application de décider si cela a du sens. Cependant, presque toutes les API nécessaires sont rétrocompatibles jusqu'à l'API 21 (ou AndroidX gérera les différences par lui-même), de sorte que la quantité de travail supplémentaire requise pour prendre en charge les appareils avant la version Q est minime. Les utilisateurs d'appareils jusqu'à la génération Q peuvent également profiter d'une expérience immersive. Seule la minimisation du travail et des tests nécessaires est considérée comme facultative.

Utilisation de la zone de la barre d'état

Deuxièmement, vous faites attention à la partie supérieure de l'écran - la barre d'état. Il est désormais judicieux d'utiliser des zones de la barre d'état si votre contenu ou votre mise en page en a besoin. Qu'entendons-nous par là? Un exemple de mise en page pouvant prendre la barre d'état est une image grand écran. Pour les développeurs, cela signifie utiliser quelque chose comme AppBarLayout , qui est situé et fixé en haut de l'écran.


Exemple d'application avec une image plein écran sur la barre d'état

D'un autre côté, si l'interface utilisateur se compose d'une liste d'éléments avec une position fixe de la barre d'outils en haut, il peut être inutile d'utiliser la zone de la barre d'état. Les mêmes règles s'appliquent à la barre de navigation: il n'est pas nécessaire de les utiliser sur des appareils antérieurs à Android Q.

Implémentation

La mise en œuvre de l'utilisation de zones bord à bord comporte trois étapes clés.

1. Demande d'affichage en plein écran

La première étape consiste à indiquer au système que notre application doit être placée au-dessus des panneaux du système (le long de l'axe Y). L'API que nous utilisons pour cela est setSystemUiVisibility () sur une vue avec plusieurs drapeaux. Les drapeaux qui nous intéressent ressemblent à ceci:

view.systemUiVisibility = // Tells the system that the window wishes the content to // be laid out at the most extreme scenario. See the docs for // more information on the specifics View.SYSTEM_UI_FLAG_LAYOUT_STABLE or // Tells the system that the window wishes the content to // be laid out as if the navigation bar was hidden View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 

Après cela, nos view seront situées en mode plein écran sur la barre de navigation.


Maintenant, notre application sera située en mode plein écran sur la barre de navigation

1. Modifier les couleurs du panneau système

Puisque notre application est maintenant en mode plein écran, nous devons changer les couleurs du panneau système afin que nous puissions voir le contenu qui se trouve derrière.

Android Q

Lors du lancement sur Android Q, notre seule tâche est de rendre le panneau système transparent.

 <!-- values-v29/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> @android:color/transparent </item> <!-- Optional, if drawing behind the status bar too --> <item name="android:statusBarColor"> @android:color/transparent </item> </style> 

Dans Android Q, le système est désormais responsable du traitement de toute la protection visuelle du contenu du panneau système (heure, icônes, traitement par glisser-déposer, etc.) dans tous les modes de navigation. Cela signifie que nous n'avons plus besoin d'y penser. En pratique, cela signifie que le système fera l'une des deux choses suivantes:

Adaptation dynamique des couleurs

Le contenu du panneau système change de couleur en fonction du contenu situé derrière lui. Ainsi, si le panneau est au-dessus d'une sorte de contenu clair, sa couleur deviendra sombre. Inversement, la couleur devient claire si le contenu est sombre. C'est ce que nous appelons l'adaptation dynamique des couleurs.


Adaptation dynamique des couleurs dans Android Q

Maille translucide

Alternativement, le système peut utiliser une grille translucide (canevas) derrière les panneaux du système. Veuillez noter que cela ne fonctionne que si vous avez déclaré targetSdkVersion 29 dans votre application. Si votre application cible le SDK 28 ou inférieur, la grille ne s'affichera pas automatiquement et il vous restera une barre de navigation transparente.


Grille fournie par le système en mode contrôle sur Android Q

Ces deux actions sont effectuées afin que l'utilisateur puisse toujours voir le contenu du panneau système. L'option choisie par le système dépend de plusieurs facteurs. La grille sera utilisée si:

• Un des modes de bouton est activé (bouton 2 ou 3);
• En mode de contrôle gestuel, le fabricant lui-même a décidé de désactiver l'adaptation dynamique des couleurs. Une raison possible peut être le manque de performances de l'appareil pour le traitement de l'adaptation des couleurs.

Un exemple d'utilisation d'un écran avec le contrôle gestuel

Dans tous les autres cas, une adaptation dynamique des couleurs sera utilisée. Les raisons énumérées ne sont pertinentes qu'à ce moment, à l'avenir, tout peut changer.

Désactivation de la protection du panneau système dans Q

Si vous ne souhaitez pas que le système protège automatiquement le contenu, vous pouvez désactiver cette option en définissant android:enforceNavigationBarContrast et / ou android:enforceStatusBarContrast sur false .

Android Pie et ci-dessous

Si vous décidez de passer au concept «bord à bord» et sur les appareils jusqu'à la version Q, vous devez définir les couleurs translucides du panneau système pour utiliser la protection du contenu. Un maillage noir avec 70% d'opacité sera une bonne étape pour créer un thème avec des panneaux système sombres.

 <!-- values/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> #B3FFFFFF </item> </style> <!-- values-night/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> #B3000000 </item> </style> 

Vous devrez peut-être ajuster la transparence des panneaux supérieur et inférieur, selon le contenu qui se trouve derrière eux. Pour les thèmes clairs, vous pouvez définir une couleur translucide claire (par exemple, # B3FFFFFF).


Un exemple montrant les deux grilles dans des thèmes sombres et clairs

1. Conflits visuels

Après avoir terminé ces étapes, vous avez peut-être remarqué que certaines de vos vues se trouvent désormais derrière les panneaux système. Notre troisième et dernière étape est le traitement de toute superposition visuelle, dont nous discuterons dans les articles suivants.

C’est tout. Nous invitons tous les lecteurs à un webinaire pratique sur les tests d'interface utilisateur Android .