Le concept de Shape en SwiftUI

Introduction au protocole Shape

Le protocole Shape est essentiel pour créer et intégrer à la fois des formes prédéfinies et des formes personnalisées dans une application SwiftUI. Ce protocole hérite des spécificités des protocoles Sendable, Animatable, et View. Il offre ainsi une grande flexibilité lors de la conception d'interfaces graphiques.

Création de formes intégrées

SwiftUI propose plusieurs formes intégrées qui se conforment au protocole Shape. Par exemple, pour créer une forme de cercle ou de rectangle, il vous suffit de les instancier directement :

Circle()
Rectangle()

D'autres formes intégrées comprennent : - Capsule - Ellipse - RoundedRectangle

Chacune de ces formes peut être utilisée facilement dans votre interface utilisateur, permettant une conception rapide et efficace.

Définition de formes personnalisées

Lorsque vous souhaitez créer une forme qui n'est pas intégrée, vous pouvez définir votre propre forme en utilisant des opérations de chemin tout en respectant le protocole Shape. Voici comment vous pouvez le faire :

struct someShape: Shape {
    func path(in rect: CGRect) -> Path {
        // Définir la forme à l'aide d'opérations de chemin
    }
}

La méthode path(in:) doit retourner un objet de type Path qui décrit la forme à l'intérieur d'un cadre rectangulaire.

Exemple : Création d'une forme de triangle personnalisée

Pour illustrer la création d'une forme personnalisée, prenons l'exemple d'un triangle. Vous pouvez construire une forme triangulaire à l'aide des opérations de chemin comme suit :

import SwiftUI

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
        }
    }
}

En vous conformant au protocole Shape, cette forme personnalisée acquiert toutes les fonctionnalités d'une forme intégrée.

Affichage de la forme personnalisée

Pour afficher votre forme personnalisée, il vous suffit de l'intégrer dans une vue de mise en page, tout comme vous le feriez pour une forme intégrée :

var body: some View {
    ZStack {
        // Définit la couleur de fond
        Color.blue.ignoresSafeArea()
        Triangle()
            .foregroundColor(.yellow)
            .frame(width: 180, height: 180)
    }
}

Ce code produit une sortie avec un triangle jaune sur fond bleu, illustrant comment les formes personnalisées peuvent enrichir visuellement vos applications.