22.11.2024

Aula 105: Formas e Caminhos Personalizados no SwiftUI

Nesta aula, vamos explorar como criar formas e caminhos personalizados no SwiftUI. O SwiftUI fornece um conjunto poderoso de ferramentas para criar visualizações únicas e reutilizáveis. Ao definir formas personalizadas, você pode criar gráficos intrincados e layouts ajustados às necessidades do seu aplicativo.

Compreendendo Formas no SwiftUI

Uma forma no SwiftUI é um protocolo que permite definir como seu conteúdo é renderizado. Você pode criar formas personalizadas complexas ao conformar-se ao protocolo Shape.

Aqui está um exemplo simples de uma forma personalizada:

import SwiftUI

struct Triângulo: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        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.closeSubpath()
        return path
    }
}

struct TriânguloView: View {
    var body: some View {
        Triângulo()
            .fill(Color.blue)
            .frame(width: 200, height: 200)
            .padding()
    }
}

struct ContentView: View {
    var body: some View {
        TriânguloView()
    }
}

Neste exemplo, a struct Triângulo conforma-se ao protocolo Shape e implementa o método path(in:) para definir o caminho geométrico do triângulo. Em seguida, exibimos a forma personalizada usando a struct TriânguloView.

Criando Formas Complexas

Você também pode criar formas mais complexas adicionando curvas e realizando transformações em caminhos. Aqui está um exemplo de como desenhar uma forma de coração:

import SwiftUI

struct Coração: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.addArc(center: CGPoint(x: rect.midX - rect.width / 4, y: rect.height / 4),
                    radius: rect.width / 4,
                    startAngle: Angle(degrees: 0),
                    endAngle: Angle(degrees: 180),
                    clockwise: false)
        path.addArc(center: CGPoint(x: rect.midX + rect.width / 4, y: rect.height / 4),
                    radius: rect.width / 4,
                    startAngle: Angle(degrees: 0),
                    endAngle: Angle(degrees: 180),
                    clockwise: false)
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

struct CoraçãoView: View {
    var body: some View {
        Coração()
            .fill(Color.red)
            .frame(width: 200, height: 200)
            .padding()
    }
}

struct ContentView: View {
    var body: some View {
        CoraçãoView()
    }
}

Neste código, definimos a forma Coração combinando arcos e linhas. O método path(in:) constrói a forma do coração usando dois arcos e uma linha para fechar a forma.

Usando Formas Personalizadas em Animações

Formas personalizadas podem ser animadas assim como qualquer outra visualização do SwiftUI. Aqui está um exemplo mostrando como animar nossa forma de coração:

struct CoraçãoAnimadaView: View {
    @State private var pulsar = false

    var body: some View {
        Coração()
            .fill(Color.red)
            .scaleEffect(pulsar ? 1.2 : 1.0)
            .frame(width: 200, height: 200)
            .padding()
            .onAppear {
                withAnimation(Animation.easeInOut(duration: 0.5).repeatForever(autoreverses: true)) {
                    pulsar.toggle()
                }
            }
    }
}

struct ContentView: View {
    var body: some View {
        CoraçãoAnimadaView()
    }
}

Neste exemplo, animamos a forma do coração para pulsar modificando o scaleEffect. O modificador onAppear inicia a animação quando a visualização aparece.

Conclusão

Nesta aula, aprendemos como criar formas personalizadas no SwiftUI ao conformar-se ao protocolo Shape e implementar o método path(in:). Também exploramos como criar formas complexas, usando arcos e linhas para construir designs, e animar nossas formas. Este recurso poderoso do SwiftUI permite que você crie interfaces de usuário únicas que aprimoram a experiência do usuário.

Experimente os exemplos fornecidos e tente criar suas próprias formas e animações personalizadas!

Video

Navigation