Lição: 68: Visões de Texto, Imagem e Forma
Nesta aula, vamos explorar como usar as visões de Texto, Imagem e Forma no SwiftUI. Essas visões são blocos de construção fundamentais para criar interfaces de usuário em aplicações iOS. Vamos aprender a criá-las e personalizá-las.
Visão de Texto
A visão Text
é utilizada para exibir uma ou mais linhas de texto. Ela é altamente personalizável em termos de fonte, cor e estilo.
Exemplo Básico
Aqui está um exemplo simples de como exibir texto em uma visão SwiftUI:
import SwiftUI
struct ExemploVisaoTexto: View {
var body: some View {
Text("Olá, SwiftUI!")
.font(.largeTitle)
.foregroundColor(.blue)
.padding()
}
}
struct ExemploVisaoTexto_Previews: PreviewProvider {
static var previews: some View {
ExemploVisaoTexto()
}
}
Personalização Avançada
Você pode aplicar vários modificadores para mudar a aparência do texto, como deixá-lo em negrito ou adicionar sombras:
import SwiftUI
struct TextoPersonalizado: View {
var body: some View {
Text("SwiftUI é incrível!")
.font(.system(size: 24, weight: .bold, design: .serif))
.foregroundColor(.green)
.shadow(color: .gray, radius: 2, x: 1, y: 1)
.padding()
}
}
struct TextoPersonalizado_Previews: PreviewProvider {
static var previews: some View {
TextoPersonalizado()
}
}
Visão de Imagem
A visão Image
permite que você exiba imagens em sua aplicação. Você pode carregar imagens de ativos ou até mesmo de uma URL externa.
Carregando uma Imagem de Ativos
Para carregar uma imagem do catálogo de ativos do seu projeto, use o seguinte exemplo:
import SwiftUI
struct ExemploVisaoImagem: View {
var body: some View {
Image("imagemExemplo") // Certifique-se de que "imagemExemplo" esteja no catálogo de ativos
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
.clipShape(Circle())
.shadow(radius: 10)
}
}
struct ExemploVisaoImagem_Previews: PreviewProvider {
static var previews: some View {
ExemploVisaoImagem()
}
}
Carregando uma Imagem de URL
Para carregar uma imagem de uma URL, você normalmente utiliza um AsyncImage
no SwiftUI:
import SwiftUI
struct VisaoImagemAssincrona: View {
let url: URL? = URL(string: "https://via.placeholder.com/150")
var body: some View {
if let url = url {
AsyncImage(url: url) { image in
image
.resizable()
.scaledToFit()
.frame(width: 150, height: 150)
.clipShape(Circle())
.shadow(radius: 10)
} placeholder: {
ProgressView()
}
}
}
}
struct VisaoImagemAssincrona_Previews: PreviewProvider {
static var previews: some View {
VisaoImagemAssincrona()
}
}
Visão de Forma
As formas no SwiftUI permitem que você crie caminhos e formas personalizadas. Você pode usar formas integradas como Circle
, Rectangle
e Polygon
, ou pode criar formas personalizadas usando o protocolo Shape
.
Formas Básicas
Veja como usar formas integradas:
import SwiftUI
struct ExemploFormas: View {
var body: some View {
VStack {
Circle()
.fill(Color.red)
.frame(width: 100, height: 100)
Rectangle()
.fill(Color.blue)
.frame(width: 100, height: 100)
Capsule()
.fill(Color.green)
.frame(width: 100, height: 50)
}
}
}
struct ExemploFormas_Previews: PreviewProvider {
static var previews: some View {
ExemploFormas()
}
}
Forma Personalizada
Para criar uma forma personalizada, você pode se conformar ao protocolo Shape
:
import SwiftUI
struct FormaEstrela: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
let pontos = [
CGPoint(x: rect.width * 0.5, y: rect.height * 0),
CGPoint(x: rect.width * 0.6, y: rect.height * 0.35),
CGPoint(x: rect.width * 0.95, y: rect.height * 0.35),
CGPoint(x: rect.width * 0.68, y: rect.height * 0.57),
CGPoint(x: rect.width * 0.76, y: rect.height * 0.91),
CGPoint(x: rect.width * 0.5, y: rect.height * 0.73),
CGPoint(x: rect.width * 0.24, y: rect.height * 0.91),
CGPoint(x: rect.width * 0.32, y: rect.height * 0.57),
CGPoint(x: rect.width * 0.05, y: rect.height * 0.35),
CGPoint(x: rect.width * 0.4, y: rect.height * 0.35)
]
path.move(to: pontos[0])
for i in 1..<pontos.count {
path.addLine(to: pontos[i])
}
path.closeSubpath()
return path
}
}
struct ExemploFormaEstrela: View {
var body: some View {
FormaEstrela()
.fill(Color.yellow)
.frame(width: 100, height: 100)
}
}
struct ExemploFormaEstrela_Previews: PreviewProvider {
static var previews: some View {
ExemploFormaEstrela()
}
}
Conclusão
Nesta aula, cobrimos como criar e personalizar as visões de Texto
, Imagem
e Forma
no SwiftUI. Essas visões são essenciais para construir interfaces ricas e visualmente atraentes. À medida que você continuar desenvolvendo suas habilidades em SwiftUI, experimentar com essas visões permitirá que você crie layouts e designs ainda mais complexos. Boa codificação!