La plate-forme Android est chargée de dessiner l'UI du système, comme la barre d'état et la barre de navigation. Cette UI système s'affiche, quelle que soit l'application utilisée par l'utilisateur.
WindowInsets fournit des informations sur l'UI du système pour s'assurer que votre application s'affiche dans la zone appropriée et que votre UI n'est pas masquée par l'UI du système.
Sur Android 14 (niveau d'API 34) ou version antérieure, l'interface utilisateur de votre application ne s'affiche pas par défaut sous les barres système et les encoches.
Sur Android 15 (niveau d'API 35) ou version ultérieure, votre application s'affiche sous les barres système et les encoches une fois qu'elle cible le SDK 35. Cela permet d'offrir une expérience utilisateur plus fluide et de tirer pleinement parti de l'espace d'affichage disponible.
L'affichage du contenu derrière l'UI du système est appelé bord à bord. Sur cette page, vous allez découvrir les différents types d'encarts, comment passer en plein écran et comment utiliser les API d'encart pour animer votre interface utilisateur et vous assurer que le contenu de votre application n'est pas masqué par les éléments d'interface utilisateur du système.
Principes de base des marges intérieures
Lorsqu'une application s'affiche de bord à bord, vous devez vous assurer que le contenu et les interactions importants ne sont pas masqués par l'UI du système. Par exemple, si un bouton est placé derrière la barre de navigation, l'utilisateur risque de ne pas pouvoir cliquer dessus.
La taille de l'UI du système et les informations sur son emplacement sont spécifiées à l'aide d'encarts.
Chaque partie de l'UI du système possède un type d'encart correspondant qui décrit sa taille et son emplacement. Par exemple, les encarts de la barre d'état fournissent la taille et la position de la barre d'état, tandis que les encarts de la barre de navigation fournissent la taille et la position de la barre de navigation. Chaque type d'encart se compose de quatre dimensions en pixels : haut, gauche, droite et bas. Ces dimensions indiquent la distance entre l'UI du système et les côtés correspondants de la fenêtre de l'application. Pour éviter tout chevauchement avec ce type d'UI système, l'UI de l'application doit donc être décalée de cette valeur.
Ces types d'encarts Android intégrés sont disponibles via WindowInsets :
Insets décrivant les barres d'état. Il s'agit des barres d'UI système supérieures contenant les icônes de notification et d'autres indicateurs. |
|
Marges intérieures de la barre d'état lorsqu'elle est visible. Si les barres d'état sont masquées (en raison du passage en mode plein écran immersif), les encarts de la barre d'état principale seront vides, mais ces encarts ne seront pas vides. |
|
Insets décrivant les barres de navigation. Il s'agit des barres de l'UI du système situées à gauche, à droite ou en bas de l'appareil, qui décrivent la barre des tâches ou les icônes de navigation. Ces éléments peuvent changer au moment de l'exécution en fonction de la méthode de navigation préférée de l'utilisateur et de l'interaction avec la barre des tâches. |
|
Marges intérieures de la barre de navigation lorsqu'elles sont visibles. Si les barres de navigation sont masquées (en raison du passage en mode plein écran immersif), les encarts de la barre de navigation principale seront vides, mais pas ces encarts. |
|
La marge intérieure décrivant la décoration de la fenêtre de l'UI du système si elle se trouve dans une fenêtre de forme libre, comme la barre de titre supérieure. |
|
Marges intérieures de la barre de légende lorsqu'elle est visible. Si les barres de sous-titres sont masquées, les encarts de la barre de sous-titres principale seront vides, mais ces encarts ne seront pas vides. |
|
Union des encarts de la barre système, qui incluent les barres d'état, de navigation et de légende. |
|
Insets de la barre système lorsqu'elle est visible. Si les barres système sont masquées (en raison du passage en mode plein écran immersif), les encarts de la barre système principale seront vides, mais ces encarts ne seront pas vides. |
|
Insets décrivant l'espace occupé par le clavier virtuel en bas de l'écran. |
|
Insets décrivant l'espace occupé par le clavier virtuel avant l'animation actuelle du clavier. |
|
Les encarts décrivant l'espace que le clavier virtuel occupera après l'animation actuelle du clavier. |
|
Type d'encarts décrivant plus en détail l'UI de navigation, indiquant l'espace où les "appuis" seront gérés par le système, et non par l'application. Pour les barres de navigation transparentes avec navigation par gestes, certains éléments de l'application peuvent être accessibles via l'UI de navigation du système. |
|
Marges intérieures de l'élément cliquable lorsqu'il est visible. Si les éléments tactiles sont masqués (en raison du passage en mode plein écran immersif), les encarts des éléments tactiles principaux seront vides, mais ces encarts ne seront pas vides. |
|
Insets représentant la quantité d'insets où le système interceptera les gestes de navigation. Les applications peuvent spécifier manuellement la gestion d'un nombre limité de ces gestes à l'aide de |
|
Sous-ensemble des gestes système qui seront toujours gérés par le système et qui ne peuvent pas être désactivés à l'aide de |
|
Marges intérieures représentant l'espacement nécessaire pour éviter tout chevauchement avec une découpe de l'écran (encoche ou trou). |
|
Insets représentant les zones incurvées d'un écran Waterfall. Un écran incurvé comporte des zones incurvées le long des bords de l'écran, là où l'écran commence à s'enrouler sur les côtés de l'appareil. |
Ces types sont résumés par trois types d'encarts "sûrs" qui garantissent que le contenu n'est pas masqué :
Ces types d'encarts "sécurisés" protègent le contenu de différentes manières, en fonction des encarts de la plate-forme sous-jacente :
- Utilisez
WindowInsets.safeDrawingpour protéger le contenu qui ne doit pas être dessiné sous l'UI du système. Il s'agit de l'utilisation la plus courante des encarts : empêcher le dessin de contenu masqué par l'UI du système (partiellement ou complètement). - Utilisez
WindowInsets.safeGesturespour protéger le contenu avec des gestes. Cela évite que les gestes système n'entrent en conflit avec les gestes de l'application (comme ceux des bottom sheets, des carrousels ou des jeux). - Utilisez
WindowInsets.safeContentcomme combinaison deWindowInsets.safeDrawingetWindowInsets.safeGesturespour vous assurer que le contenu ne présente aucun chevauchement visuel ni aucun chevauchement de gestes.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Composants et mises en page Material
- Migrer
CoordinatorLayoutvers Compose - Autres points à prendre en compte