18.11.2024

Aula 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!

Video

Navigation