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 interface utilisateur du 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 dessine dans la zone appropriée et que votre UI n'est pas masquée par l'UI du système.
Sous Android 14 (niveau d'API 34) et version antérieure, l'UI de votre application ne s'affiche pas sous les barres système et les encoches par défaut.
Sur Android 15 (niveau d'API 35) ou version ultérieure, votre application s'affiche sous les barres du système et affiche des découpes une fois qu'elle cible le SDK 35. Cela offre une expérience utilisateur plus fluide et permet à votre application de tirer pleinement parti de l'espace de fenêtre dont elle dispose.
L'affichage du contenu derrière l'UI du système s'appelle le bord à bord. Sur cette page, vous découvrirez les différents types d'encarts, comment aller d'un bord à l'autre et comment utiliser les API d'encart pour animer votre UI et vous assurer que le contenu de votre application n'est pas masqué par les éléments d'UI du système.
Principes de base des encarts
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'interface utilisateur du système. Par exemple, si un bouton est placé derrière la barre de navigation, l'utilisateur ne pourra peut-être pas cliquer dessus.
La taille de l'interface utilisateur du système et les informations sur son emplacement sont spécifiées via des encarts.
Chaque partie de l'interface utilisateur du système est associée à un type d'encart correspondant qui décrit sa taille et son emplacement. Par exemple, les encarts de la barre d'état indiquent la taille et la position de la barre d'état, tandis que les encarts de la barre de navigation indiquent la taille et la position de la barre de navigation. Chaque type d'encart se compose de quatre dimensions de pixels: haut, gauche, droite et bas. Ces dimensions spécifient la distance à laquelle l'interface utilisateur du système s'étend à partir des côtés correspondants de la fenêtre de l'application. Pour éviter tout chevauchement avec ce type d'interface utilisateur système, l'UI de l'application doit être en retrait de cette valeur.
Ces types d'encarts Android intégrés sont disponibles via WindowInsets:
Les encarts décrivant les barres d'état. Il s'agit des barres d'interface utilisateur système supérieures contenant des icônes de notification et d'autres indicateurs. |
|
Encoches de la barre d'état lorsqu'elles sont visibles. Si les barres d'état sont actuellement masquées (en raison de l'activation du mode plein écran immersif), les encarts de la barre d'état principale sont vides, mais ils ne le sont pas. |
|
Les inserts décrivant les barres de navigation. Il s'agit des barres de l'interface utilisateur 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. Ils 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 ses interactions avec la barre des tâches. |
|
La barre de navigation est en retrait lorsqu'elle est visible. Si les barres de navigation sont actuellement masquées (en raison de l'activation du mode plein écran immersif), les encarts de la barre de navigation principale sont vides, mais ils ne le sont pas. |
|
Insère décrivant la décoration de la fenêtre de l'UI du système dans une fenêtre de forme libre, comme la barre de titre supérieure. |
|
La barre de sous-titres est en retrait lorsqu'elle est visible. Si les barres de sous-titres sont actuellement masquées, les encarts de la barre de sous-titres principale sont vides, mais ces encarts ne sont pas vides. |
|
Union des encarts de la barre système, y compris les barres d'état, les barres de navigation et la barre de légende. |
|
Encastrement de la barre système lorsqu'elle est visible. Si les barres système sont actuellement masquées (en raison de l'activation du mode plein écran immersif), les encarts de la barre système principale sont vides, mais ils ne le sont pas. |
|
Les encarts décrivant la quantité d'espace occupée par le clavier logiciel en bas. |
|
Les encarts décrivant la quantité d'espace que le clavier logiciel occupait avant l'animation du clavier actuelle. |
|
Les encarts décrivant l'espace que le clavier virtuel occupera après l'animation du clavier actuelle. |
|
Type d'encarts décrivant des informations plus détaillées sur l'UI de navigation, indiquant la quantité d'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 enfoncés via l'UI de navigation du système. |
|
Les éléments cliquables sont en retrait lorsqu'ils sont visibles. Si les éléments cliquables sont actuellement masqués (en raison de l'activation du mode plein écran immersif), les encarts principaux des éléments cliquables seront vides, mais ces encarts ne seront pas vides. |
|
Les encarts représentant le nombre d'encoches où le système interceptera les gestes de navigation. Les applications peuvent spécifier manuellement la gestion d'un nombre limité de ces gestes via |
|
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 via |
|
Les encarts représentant l'espacement nécessaire pour éviter tout chevauchement avec une découpe d'écran (encoche ou trou d'épingle). |
|
Les inserts représentant les zones incurvées d'un affichage en cascade. Un écran en cascade comporte des zones incurvées sur les bords, là où l'écran commence à se replier sur les côtés de l'appareil. |
Ces types sont résumés par trois types d'incrustations "sûres" qui garantissent que le contenu n'est pas masqué:
Ces types d'encarts "sûrs" 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'interface utilisateur du système. Il s'agit de l'utilisation la plus courante des insets: pour éviter de dessiner du contenu masqué par l'UI du système (partiellement ou complètement). - Utilisez
WindowInsets.safeGesturespour protéger le contenu à l'aide de gestes. Cela évite que les gestes système ne se heurtent aux gestes de l'application (comme ceux des bottom sheets, des carrousels ou des jeux). - Utilisez
WindowInsets.safeContenten combinantWindowInsets.safeDrawingetWindowInsets.safeGesturespour vous assurer que le contenu ne se chevauche pas visuellement ni par 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