Une encoche est une zone de certains appareils qui s'étend dans l'écran sur la surface de l'écran. Elle offre une expérience bord à bord tout en offrant de l'espace pour capteurs importants à l'avant de l'appareil.
![Exemple de découpe en mode Portrait](https://developer.android.com/static/develop/ui/compose/images/system/cutouts_example_portrait.png?authuser=6&hl=fr)
![Exemple de découpe en mode Paysage](https://developer.android.com/static/develop/ui/compose/images/system/cutouts_example_landscape.png?authuser=6&hl=fr)
Android est compatible avec les encoches sur les appareils équipés d'Android 9 (niveau d'API 28) et plus élevée. Toutefois, les fabricants d'appareils peuvent également prendre en charge les encoches sur appareils équipés d'Android 8.1 ou version antérieure.
Cette page explique comment prendre en charge les appareils dotés d'une encoche dans Compose, y compris comment utiliser la zone d'encoche, c'est-à-dire l'affichage bord à bord rectangle sur la surface de l'écran contenant l'encoche.
Cas par défaut
Par défaut, les encoches sont incluses dans les informations sur les encarts de la fenêtre. Pour cette raison, votre application ne dessine pas dans les zones de l'encoche lorsque vous suivez le guide pour afficher une application de bord à bord.
Par exemple, lorsque vous utilisez
Modifier.windowInsetsPadding(WindowInsets.safeContent)
ou Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
, votre application
ne dessine pas automatiquement
les zones où une encoche est placée.
WindowInsets.safeContent
et WindowInsets.safeDrawing
contiennent tous deux des informations sur l'encoche et ne dessinent pas l'emplacement d'une encoche
l'adresse IP interne.
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) setContent { Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) { // Any composable inside here will avoid drawing behind cutouts } } }
Pour personnaliser davantage ce comportement, vous devez gérer les informations sur l'encoche vous-même.
Gérer manuellement les informations d'encoche
Vous pouvez gérer les découpes de l'une des manières suivantes:
Définition dans le fichier manifeste du thème avec
android:windowLayoutInDisplayCutoutMode
Définir l'option par programmation sur un
Window
avecwindow.attributes.layoutInDisplayCutoutMode
Accéder à l'objet de découpe
Path
avecLocalView.current.rootWindowInsets.displayCutout
Pour Compose, nous vous recommandons de définir windowLayoutInDisplayCutoutMode
sur
default
dans votre thème général, puis exploiter WindowInsets.displayCutout
pour gérer les encarts de vos composables:
Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) { drawRect(Color.Red, style = Stroke(2.dp.toPx())) }
Cette approche vous permet de respecter la marge intérieure displayCutout
si nécessaire.
ou de l'ignorer lorsqu'elle n'est pas requise.
Vous pouvez également appliquer les mêmes paramètres que ceux de la vue Views Cutout
de la documentation décrit en paramétrant
soit le thème de l'activité android:windowLayoutInDisplayCutoutMode
,
ou en définissant l'attribut de fenêtre à l'aide de
window.attributes.layoutInDisplayCutoutMode =
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
Toutefois, le mode d'encoche est ensuite appliqué
à l'ensemble d'une activité et ne peuvent pas être contrôlés par composable individuel.
Pour respecter l'encoche dans certains composables, mais pas dans d'autres, utilisez
WindowInset.displayCutout
Cette API vous permet d'accéder à l'encoche
des informations supplémentaires si nécessaire.
Bonnes pratiques
Lorsque vous utilisez des encoches, tenez compte des points suivants:
- Faites attention au placement des éléments essentiels de l'interface utilisateur. Ne laissez pas le pour masquer le texte, les commandes ou toute autre information important.
- Ne placez pas et n'étendez pas d'éléments interactifs qui nécessitent une dans la zone d'encoche. La sensibilité tactile peut être inférieure dans le dans la zone d'encoche.
- Lorsque vous suivez les instructions d'affichage de bord à bord, les informations d'encoche sont incluses dans
les encarts
safeDrawing
/safeContent
. - Si possible, utilisez
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
. pour déterminer la marge intérieure appropriée à appliquer à votre contenu. À éviter coder en dur la hauteur de la barre d'état, car cela peut entraîner un chevauchement ou une coupure contenus.
Tester le rendu de votre contenu avec les encoches
Veillez à tester tous les écrans et expériences de votre application. Tester sur les appareils avec différents types d'encoches, si possible. Si vous ne possédez pas d'appareil doté d'un d'encoche, vous pouvez simuler des configurations d'encoche courantes sur n'importe quel appareil ou émulateur sous Android 9 ou version ultérieure. Pour ce faire, procédez comme suit:
- Activez les Options pour les développeurs.
- Faites défiler l'écran Developer options (Options pour les développeurs) vers le bas jusqu'à la section Drawing (Dessin). puis sélectionnez Simuler un écran avec une encoche.
- Sélectionnez le type d'encoche.
Figure 3. Utilisez les Options pour les développeurs pour tester l'affichage de votre contenu.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Encarts de fenêtre dans Compose
- Modificateurs graphiques
- Style de paragraphe