iOS 16.4, une modale de plus en plus customisable

Dans un précédent article, 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.

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.

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.

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.

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.

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.