20.11.2024

Aula 80: Visualizações de Guia e Controles Segmentados

Nesta aula, vamos explorar dois componentes importantes de UI no SwiftUI: Visualizações de Guia e Controles Segmentados. Ambos os componentes podem ser usados para melhorar a experiência do usuário em seus aplicativos iOS, permitindo que os usuários alternem facilmente entre diferentes visualizações.

Visualizações de Guia

As Visualizações de Guia permitem organizar o conteúdo do seu aplicativo em guias separadas, proporcionando aos usuários uma maneira intuitiva de alternar entre diferentes seções do seu aplicativo. Vamos criar um exemplo simples de Visualização de Guia.

Exemplo: Criando uma Visualização de Guia

Aqui está um exemplo simples de como usar uma Visualização de Guia no SwiftUI:

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Tela Inicial")
                .tabItem {
                    Image(systemName: "house")
                    Text("Início")
                }

            Text("Tela de Ajustes")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Ajustes")
                }

            Text("Tela de Perfil")
                .tabItem {
                    Image(systemName: "person")
                    Text("Perfil")
                }
        }
        .font(.headline) // Altera a fonte dos itens da guia
    }
}

@main
struct MeuApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Explicação

1. TabView: Este é o contêiner principal para a interface com guias. Cada visualização que você deseja incluir como uma guia deve ser adicionada dentro do TabView.

2. tabItem: Para cada visualização dentro do TabView, fornecemos um modificador tabItem que especifica uma imagem e um título para a guia.

3. Usando SF Symbols: O exemplo utiliza SF Symbols (como house, gear e person) para os ícones das guias, tornando a interface mais atraente visualmente.

Controles Segmentados

Os Controles Segmentados oferecem uma maneira de apresentar várias opções em um formato horizontal, onde apenas uma opção pode ser selecionada por vez. Vamos dar uma olhada em como implementar controles segmentados.

Exemplo: Construindo um Controle Segmentado

Aqui está um exemplo de como usar um Controle Segmentado no SwiftUI:

import SwiftUI

struct SegmentedControlView: View {
    @State private var opcaoSelecionada = 0

    var body: some View {
        VStack {
            Picker(selection: $opcaoSelecionada, label: Text("Selecione uma opção")) {
                Text("Opção 1").tag(0)
                Text("Opção 2").tag(1)
                Text("Opção 3").tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding()

            Text("Você selecionou: \(opcaoSelecionada == 0 ? "Opção 1" : opcaoSelecionada == 1 ? "Opção 2" : "Opção 3")")
                .padding()
        }
    }
}

@main
struct MeuApp: App {
    var body: some Scene {
        WindowGroup {
            SegmentedControlView()
        }
    }
}

Explicação

1. Picker: O parâmetro selection do picker é vinculado a uma variável de estado (opcaoSelecionada). Isso controla qual segmento está atualmente selecionado.

2. tag: Cada segmento é atribuído a uma tag, que corresponde ao seu valor na variável de estado.

3. SegmentedPickerStyle: Este estilo dá ao picker uma aparência de controle segmentado.

4. Exibindo a Seleção: A opção selecionada é exibida abaixo do controle segmentado, atualizando em tempo real com base na interação do usuário.

Conclusão

Nesta aula, exploramos como usar Visualizações de Guia e Controles Segmentados no SwiftUI. Ambos os componentes de UI permitem uma navegação e interação mais fáceis dentro do seu aplicativo, tornando-o mais amigável. Você pode personalizá-los ainda mais com base nas necessidades do seu aplicativo, incluindo o trabalho com modelos, rede e layouts mais sofisticados. Boa codificação!

Video

Navigation