Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
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.
<ph type="x-smartling-placeholder"></ph>
Figure 1:Images placées derrière les barres système
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.
À faire: 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.
Si vous ne pouvez pas rendre les deux barres transparentes, assurez-vous que les couleurs des barres
correspondre à la couleur du corps de votre application. Par exemple, faites correspondre le bas
couleur de la barre de navigation avec celle de la barre de gestes et de la barre d'état supérieure
couleur avec la couleur du corps.
<ph type="x-smartling-placeholder"></ph>
Figure 2:Assurez-vous que les couleurs de la barre système correspondent à la couleur du corps de votre application
É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.
<ph type="x-smartling-placeholder"></ph>
Figure 3:Encarts de gestes système Évitez d'appuyer sur
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 obscurcis
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.
<ph type="x-smartling-placeholder"></ph>
Figure 4:Zone de la barre d'état mise en évidence au-dessus de la barre d'application supérieure
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.
<ph type="x-smartling-placeholder"></ph>
Figure 5:Barre d'état avec les thèmes clair et sombre
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.
<ph type="x-smartling-placeholder"></ph>
Figure 6:Barres transparentes à l'aide de l'icône
Fonctionnalité bord à bord, idéale pour mettre en valeur votre contenu
en utilisant le plus d'espace à l'écran.
<ph type="x-smartling-placeholder"></ph>
Figure 7:Appliquez un style à vos barres système afin d'améliorer votre contenu ou de les adapter
votre image de marque. Ne conservez pas les attributs par défaut des barres système.
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 :
<ph type="x-smartling-placeholder"></ph>
Figure 8:Icône de notification dans la barre d'état
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é.
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.
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.
<ph type="x-smartling-placeholder"></ph>
Figure 10:Barre de navigation par gestes
Navigation à trois boutons
La navigation à trois boutons fournit trois boutons pour "Retour", "Accueil" et "Aperçu".
<ph type="x-smartling-placeholder"></ph>
Figure 11:Barre de navigation à trois boutons
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.
<ph type="x-smartling-placeholder"></ph>
Figure 12:Barre de navigation à deux boutons
Définir un style de navigation
L'exemple suivant montre comment implémenter un style de navigation.
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.
<ph type="x-smartling-placeholder"></ph>
Figure 13: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).
<ph type="x-smartling-placeholder"></ph>
Figure 14:Adaptation des couleurs dynamique, avec les barres système
changent de couleur en fonction de leur contenu
Clavier et navigation
<ph type="x-smartling-placeholder"></ph>
Figure 15:Clavier à l'écran avec barres de 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
<ph type="x-smartling-placeholder"></ph>
Figure 16:Mode immersif affichant une expérience plein écran
sur un appareil mobile en mode paysage
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.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2024/08/20 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{
"last_modified": "Dernière mise à jour le 2024/08/20 (UTC).",
"state": ""
}