> ## Content Index > Fetch the complete content index at: https://www.sfeir.dev/llms.txt > Use this file to discover other available public pages before exploring further. # iOS 16.4, une modale de plus en plus customisable - URL: https://www.sfeir.dev/mobile/ios-16-4-une-modale-de-plus-en-plus-customisable/ - Published: 2023-08-10T09:47:13.000Z - Updated: 2023-08-10T09:47:13.000Z - Description: iOS 16.4 introduit de nouvelles fonctionnalités pour les modales dans SwiftUI, y compris la possibilité de spécifier le comportement lors du défilement, de configurer la présentation de la modale en fonction de l'orientation de l'appareil, et de personnaliser l'arrière-plan de la modale. - Author: Arnaud Le Bourblanc - Tags: Mobile, iOS, SwiftUI Dans [un précédent article](https://www.sfeir.dev/mobile/ios-16-dessine-moi-une-modale/), j'ai présenté les nouveaux modifiers de SwiftUI permettant d'afficher une modale à taille variable facilement. **iOS 16.4**, version mineure d'iOS, apporte quelques nouveautés supplémentaires. Il est désormais possible de spécifier le comportement au scroll dans une modale, de configurer la présentation de la modale en fonction de l'orientation du téléphone ou encore de paramétrer l'arrière-plan d'une modale. ## Comportement du scroll dans une modale Le premier de ces nouveaux modifiers, `presentationContentInteraction(_:)`, a pour but de définir clairement quel doit être le comportement d'une modale redimensionnable dans le cas où elle contiendrait une vue elle-même scrollable. Par défaut, dans le cas d'une modale redimensionnable, un swipe passerait la modale à la taille au dessus disponible et si on est à la plus grande taille alors le contenu scrollerait. Il est désormais possible de spécifier que l'on veut prioriser le scroll du contenu de la modale à la place de son redimensionnement. Pour se faire, le modifier `presentationContentInteraction(_:)` prendra en paramètre une des valeurs de l'énumération **PresentationContentInteraction**, **.resizes** ou **.scrolls**. Ses valeurs permettent comme leur nom l'indique de prioriser respectivement le redimensionnement ou le scroll du contenu. ```swift struct ContentView: View { @State private var modaleAffichee: Bool = false var body: some View { Button("Afficher une modale où le contenu est prioritaire lors d'un swipe sur la modale") { modaleAffichee.toggle() }.sheet(isPresented: $modaleAffichee) { ScrollView { Text("Modale où le contenu est prioritaire lors d'un swipe sur la modale") } .presentationDetents([.height(120), .medium]) .presentationContentInteraction(.scrolls) } } } ``` ## Configuration de la présentation en fonction de l'orientation Dans certains cas il peut être intéressant d'avoir un affichage différent pour une modale lorsque l'orientation du téléphone est en mode portrait ou paysage. On pourrait vouloir avoir en mode portrait un affichage sous forme de **sheet** et un affichage au format **fullScreenCover** en mode paysage. C'est désormais possible avec le modifier `presentationCompactAdaptation(horizontal:,vertical:)` qui permet de modifier le type d'affichage suivant le cas où la partie **horizontale** ou verticale du téléphone est au format **compact**. On voudra ainsi spécifier une valeur dans horizontal pour le cas d'un mode **portrait** et dans **vertical** pour le cas d'un mode paysage. ```swift var body: some View { Button("Afficher une modale où le type d'affichage change avec l'orientation") { modaleAffichee.toggle() }.sheet(isPresented: $modaleAffichee) { Text("Modale où le type d'affichage change avec l'orientation") .presentationDetents([.medium]) .presentationBackground(.ultraThinMaterial) .presentationCompactAdaptation( horizontal: .sheet, vertical: .fullScreenCover) } } ``` ## Background de la modale Un nouveau modifier a également fait son apparition pour pouvoir paramétrer facilement le background d'une modale. On a ainsi deux modifiers `presentationBackground(_:)` et `presentationBackground(alignment:content:)` pour ce paramétrage. Le premier permet de passer une valeur de type **ShapeStyle**, on retrouvera notamment comme valeur possible une couleur unie ou un radiant. On pourrait aussi passer une valeur du type **Material** qui permettrait d'avoir une certaine transparence sur la modale et son contenu. ```swift var body: some View { Button("Afficher une modale où le background est une couleur unie") { modaleAffichee.toggle() }.sheet(isPresented: $modaleAffichee) { ScrollView { Text("Modale où le background est une couleur unie") } .presentationDetents([.medium]) .presentationBackground(Color.red) } } ``` Le second modifier va quant à lui prendre une vue en paramètre, nous permettant ainsi de customiser le background de notre modale avec une vue plus ou moins complexe. ```swift var body: some View { Button("Afficher une modale où le background est une vue") { modaleAffichee.toggle() }.sheet(isPresented: $modaleAffichee) { ScrollView { Text("Modale où le background est une vue") } .presentationDetents([.medium]) .presentationBackground ( Text("Background sous forme de vue") ) } } ``` ## Customisation du corner radius d'une modale Il est également désormais possible de modifier le corner radius d'une modale grâce au modifier `presentationCornerRadius(_:)` et ainsi se rapprocher du design system de votre application au besoin. ```swift var body: some View { Button("Afficher une modale où le corner radius a été modifié") { modaleAffichee.toggle() }.sheet(isPresented: $modaleAffichee) { ScrollView { Text("Modale où le corner radius a été modifié") } .presentationDetents([.medium]) .presentationCornerRadius(50) } } ``` iOS et SwiftUI se retrouvent désormais dotés de nombreux modifiers permettant de mettre en place facilement des modales et de les customiser. D'autres nouveautés seront potentiellement ajoutées avec la version 17.0 d'iOS et ne manqueront pas de faire l'objet d'un nouvel article.