Lição: 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!