Shapes

Shapes

Rectangle

Rectangle() : Dessine un rectangle.

Rectangle()
  .fill(Color.blue)
  .frame(width: 300, height: 100)
  .shadow(radius: 10)

Circle

Circle() : Dessine un cercle.

 Circle()
    .fill(Color.brown)
    .frame(width: 200, height: 200)
    .shadow(radius: 10)

Ellipse

Ellipse() : Dessine une ellipse.

Ellipse()
  .fill(Color.pink)
  .frame(width: 300, height: 150)
  .shadow(radius: 10)

Capsule

Capsule() : Dessine une forme capsule, qui est essentiellement un rectangle avec des demi-cercles aux deux extrémités.

Capsule()
  .fill(Color.orange)
  .frame(width: 200, height: 75)
  .shadow(radius: 10)

RoundedRectangle

RoundedRectangle() : Dessine un rectangle aux coins arrondis, où tu peux contrôler le rayon de l’arrondi.

RoundedRectangle(cornerRadius: 12)
  .fill(Color.indigo)
  .frame(width: 200, height: 100)
  .shadow(radius: 10)

Shape custom Protocole :Shape

Les custom shapes te permettent de créer des formes uniques qui ne sont pas dispo par défaut dans le framework. Ça t’ouvre pas mal de possibilités pour ton design d’interface, en te permettant de dessiner exactement ce qu’il te faut pour ton appli.

struct ContentView: View {
    var body: some View {
        VStack {
            StarShape(points: 5, innerRadiusRatio: 0.5)
                .fill(Color.orange)
                .frame(width: 300, height: 300)
        }
    }
}

struct StarShape: Shape {
    let points: Int
    let innerRadiusRatio: CGFloat
    
    func path(in rect: CGRect) -> Path {
        let centerX = rect.midX
        let centerY = rect.midY
        let outerRadius = min(rect.width, rect.height) / 2
        let innerRadius = outerRadius * innerRadiusRatio
        let angleIncrement = CGFloat.pi * 2 / CGFloat(points * 2)
        let startAngle = -CGFloat.pi / 2
        var path = Path()
        for i in 0..<points * 2 {
            let radius = (i % 2 == 0) ? outerRadius : innerRadius
            let angle = startAngle + CGFloat(i) * angleIncrement
            let x = centerX + radius * cos(angle)
            let y = centerY + radius * sin(angle)
            
            if i == 0 {
                path.move(to: CGPoint(x: x, y: y))
            } else {
                path.addLine(to: CGPoint(x: x, y: y))
            }
        }
        path.closeSubpath()
        return path
    }
}

SVG to SwiftUI Converter

Comme tu peux le constater, créer une forme directement depuis le code peut être légèrement complexe. Pour t’aider, il existe ce site SVG to SwiftUI Converter, une vraie pépite pour gagner du temps dans la création de tes custom shapes. Il te suffit de copier le code de ton SVG sur leur site, et il sera automatiquement converti en une structure SwiftUI utilisant le protocole Shape.

N’hésite pas à visiter leur GitHub et à leur laisser une étoile pour les remercier du travail fourni !

Je te montre comment ça fonctionne :

1 → Prends le SVG de ton choix. Pour récupérer le code source, tu as plusieurs façons de procéder. La plus simple : tu places ton SVG dans ton navigateur, tu inspectes la page, et tu récupères directement le code dans l’inspecteur.

2 →Tu colle ensuite ton code svg dans SVG to SwiftUI Converter et tu appuis sur le bouton convert et paf, ca te génère ta structure prête à l’emploi.

3 → Pour finir il te suffit simplement de copié ta structure dans ton projet XCode, et tu retrouvera ton svg en custom shape.