Ensemble, les barres d'état et de navigation sont appelées barres système. Ils affichent des informations importantes, telles que le niveau de la batterie, l'heure, des alertes et interagir directement avec votre appareil, où que vous soyez.
Il est essentiel de prendre en compte la proéminence des barres système, que vous concevoir une UI pour les interactions avec l'OS Android, les modes de saisie ou d'autres des fonctionnalités de l'appareil. Laissez les barres système en haut de la plupart des calques pour garantir dont elles sont prises en compte.
Points à retenir
Incluez des barres système dans vos conceptions pour tenir compte des zones de sécurité de l'interface utilisateur, des interactions, modes de saisie, encoches et autres fonctionnalités de l'appareil. Gardez les barres système au niveau de la couche supérieure afin qu’elles soient prises en compte.
Rendre les barres système transparentes et afficher votre application en plein écran en continuant l'UI sous les barres pour offrir une expérience bord à bord.
Évitez d'ajouter des gestes tactiles ou des cibles de déplacement sous des encarts de gestes. ces entrent en conflit avec la navigation bord à bord et la navigation par gestes.
Figure 2:Encarts de gestes système Évitez d'appuyer sur l'écran cibles dans ces domaines
Affichez votre contenu derrière les barres système
La fonctionnalité bord à bord permet à Android de dessiner l'interface utilisateur sous les barres système pour une expérience plus immersive. Nous vous recommandons d'utiliser l'affichage bord à bord, car barre de navigation transparente est une demande courante des utilisateurs. (Découvrez comment bord à bord).
Une application peut résoudre les problèmes de chevauchement au niveau du contenu en réagissant aux encarts. Les encarts décrivent la quantité de contenu à ajouter à votre application pour éviter tout chevauchement avec parties de l'interface utilisateur de l'OS Android, telles que la barre de navigation ou la barre d'état, ou avec Fonctionnalités de l'appareil physique, telles que les encoches
Tenez compte des types d'encarts suivants lorsque vous concevez pour une utilisation bord à bord cas:
- Les encarts de barre système s'appliquent aux interfaces utilisateur sur lesquelles il est à la fois tactile et qui ne doivent pas l'être visuellement obscurcies par les barres système.
- Les encarts de gestes système s'appliquent aux zones de navigation par gestes utilisées par le système. qui prévalent sur votre application.
Barre d'état
Sur Android, la barre d'état contient des icônes de notification et des icônes système. La l'utilisateur interagit avec la barre d'état en la faisant glisser vers le bas pour accéder à la notification l'ombre.
La barre d'état peut s'afficher différemment selon le contexte, l'heure de la journée, les préférences ou thèmes définis par l'utilisateur, et d'autres paramètres. Vous pouvez également définir style de barre d'état, comme dans les exemples suivants.
Assurez-vous que le contenu de votre application occupe la totalité de l'écran, maintenant que l'affichage de bord à bord obligatoire. Utilisez des barres système transparentes avec du contenu bord à bord, comme indiqué dans les dans l'exemple suivant.
Lorsque vous recevez une notification, une icône apparaît généralement dans la barre d'état. Ce signale à l'utilisateur qu'il y a quelque chose à voir dans le panneau des notifications. Il peut s'agir de l'icône ou du symbole de votre application pour représenter la chaîne. Voir Conception des notifications :
Définir le style de la barre d'état
Appliquez un style à l'arrière-plan de la barre d'état dans le thème de votre application avec une couleur personnalisée ou style, et définir la transparence et l'opacité.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Si vous définissez manuellement la couleur d'arrière-plan, vous pouvez éventuellement appliquer un style à l'état le contenu de la barre en clair ou sombre pour un contraste optimal.
Encoches et barre d'état
Une encoche est une zone de certains appareils qui s'étend dans l'écran afin de libérer de l'espace pour les capteurs avant. Cela peut affecter l'apparence de barres d'état. Les encoches peuvent varier selon le fabricant.
Découvrez comment prendre en charge les encoches.
Barre de navigation
Android permet aux utilisateurs de contrôler la navigation à l'aide des commandes Retour, Accueil et Aperçu:
- La fonction Retour revient directement à la vue précédente.
- L'écran d'accueil quitte l'application pour revenir à l'écran d'accueil de l'appareil.
- "Vue d'ensemble" indique que les applications sont ouvertes et ont été ouvertes récemment.
Les utilisateurs peuvent choisir parmi diverses configurations de barre de navigation, y compris les gestes (recommandé) et la navigation à trois boutons.
Navigation par gestes
Introduit dans Android 10 (niveau d'API 29), la navigation par gestes est recommandée type de navigation, bien que vous ne puissiez pas remplacer les préférences de l'utilisateur. Geste la navigation n'utilise pas les boutons Retour, Accueil et Aperçu, au lieu d'afficher un poignée de geste unique pour l' affordance. Les utilisateurs interagissent en balayant l’écran de la gauche ou sur le bord droit de l'écran pour avancer et avancer et remonter à domicile. Pour ouvrir l'aperçu, balayez l'écran vers le haut de manière prolongée.
La navigation par gestes est un modèle de navigation plus évolutif pour la conception mobiles et grands écrans. Pour offrir la meilleure expérience utilisateur possible, tenez compte navigation par gestes par:
- Compatibilité avec le contenu bord à bord
- Évitez d'ajouter des interactions ou des zones cibles tactiles sous les encarts de navigation par gestes.
Découvrez comment implémenter la navigation par gestes.
Navigation à trois boutons
La navigation à trois boutons fournit trois boutons pour "Retour", "Accueil" et "Aperçu".
Autres variantes de la barre de navigation
Selon la version d'Android et l'appareil, d'autres configurations de la barre de navigation peuvent mis à la disposition de vos utilisateurs. La navigation à deux boutons, par exemple, offre deux possibilités boutons pour accueil et retour.
Définir un style de navigation
L'exemple suivant montre comment implémenter un style de navigation.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android gère toute la protection visuelle de l'interface utilisateur en un geste le mode de navigation ou dans les modes bouton.
Mode de navigation par gestes: le système applique une adaptation dynamique des couleurs, dont le contenu des barres système change de couleur en fonction du contenu qui se cache derrière. Dans l'exemple suivant, la poignée de la barre de navigation devient sombre s'il est placé au-dessus d'un contenu clair, et inversement.
Figure 12:Adaptation des couleurs dynamique Modes des boutons: le système applique un fond translucide derrière le système. barres (pour le niveau d'API 29 ou supérieur) ou une barre système transparente (pour le niveau d'API) 28 ou version antérieure).
Figure 13:Adaptation des couleurs dynamique, avec les barres système changent de couleur en fonction de leur contenu
Clavier et navigation
Chaque type de navigation réagit de manière appropriée au clavier à l'écran pour :
permettent à l'utilisateur d'effectuer des actions, comme fermer ou même modifier
type de clavier. Pour garantir une transition en douceur au clavier,
qui synchronise la transition entre l'application et le clavier
vers le haut et le bas à partir du bas de l'écran, utilisez
WindowInsetsAnimationCompat
Mode immersif
Vous pouvez masquer les barres système lorsque vous avez besoin d'un affichage en plein écran, par exemple lorsque l'utilisateur regarde un film. L'utilisateur doit toujours pouvoir appuyer sur afficher les barres système et l'interface utilisateur afin de naviguer ou d'interagir avec les commandes système. Apprenez-en plus sur la conception pour les modes plein écran ou découvrez comment masquer les barres système pour le mode immersif.