23.11.2024

Lição 110: SwiftUI no watchOS

Nesta lição, exploraremos como construir interfaces de usuário para aplicativos watchOS usando SwiftUI. O SwiftUI facilitou o desenvolvimento para todas as plataformas da Apple, incluindo o Apple Watch. Abordaremos os conceitos básicos de como criar um aplicativo simples para watchOS usando SwiftUI, além de algumas melhores práticas e dicas para aprimorar a experiência do usuário em seu aplicativo.

Configurando Seu Projeto watchOS

Para começar, abra o Xcode e crie um novo projeto SwiftUI. Escolha o modelo "App" e selecione "SwiftUI" para a interface e "Ciclo de Vida" como "Aplicativo SwiftUI".

Quando solicitado, certifique-se de incluir o alvo do watchOS. Dê um nome ao seu projeto, por exemplo, "ExemploSwiftUIWatch".

Layout Básico no watchOS

Diferentemente do iOS, os aplicativos watchOS são projetados para fornecer informações que podem ser vistas rapidamente. Portanto, o layout deve ser simples e claro. Vamos criar uma interface básica para o relógio.

Criando um Aplicativo Simples para o Relógio

Abra ContentView.swift e substitua o conteúdo pelo seguinte código:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Bem-vindo ao Aplicativo do Relógio!")
                .font(.headline)
                .padding()

            Text("Este é um exemplo simples de SwiftUI.")
                .font(.subheadline)
                .padding()

            Button("Clique Aqui") {
                print("Botão clicado")
            }
            .buttonStyle(.borderedProminent)
            .padding()
        }
        .navigationTitle("Início")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explicação do Código

• Importamos SwiftUI para usar o framework SwiftUI.
• Criamos uma estrutura ContentView que conforma ao protocolo View.
• Dentro da propriedade body, usamos um VStack para organizar os elementos verticalmente.
• Adicionamos elementos de texto com diferentes fontes e um botão.
• O modificador .padding() é usado para adicionar espaço ao redor do texto e do botão.
• Definimos o título de navegação da visualização usando .navigationTitle.

Navegação no watchOS

O watchOS suporta navegação de maneira simples, mantendo as interações fáceis e rápidas. Você pode usar NavigationView e NavigationLink para gerenciar a navegação entre as visualizações.

Vamos criar outra visualização que aparece quando o botão é clicado.

Adicionando Navegação

1. Crie um novo arquivo Swift chamado DetailView.swift e adicione o seguinte código:

import SwiftUI

struct DetailView: View {
    var body: some View {
        Text("Visualização Detalhada")
            .font(.largeTitle)
            .padding()
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView()
    }
}

2. Atualize ContentView.swift para incluir NavigationView e NavigationLink:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Bem-vindo ao Aplicativo do Relógio!")
                    .font(.headline)
                    .padding()

                Text("Este é um exemplo simples de SwiftUI.")
                    .font(.subheadline)
                    .padding()

                NavigationLink(destination: DetailView()) {
                    Text("Ir para Visualização Detalhada")
                }
                .buttonStyle(.borderedProminent)
                .padding()
            }
            .navigationTitle("Início")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explicação do Código de Navegação

• Envolvemos nosso VStack em um NavigationView para gerenciar a navegação.
• Usamos NavigationLink para criar um link para a DetailView.
• Quando o botão (link) é clicado, ele navega para a DetailView.

Layouts Responsivos

Ao desenvolver para watchOS, é importante acomodar diferentes tamanhos de tela e orientações. Sempre teste a interface do usuário em várias condições para garantir uma boa experiência.

Usando GeometryReader

Você pode usar GeometryReader para criar layouts responsivos. Aqui está um exemplo que ajusta o tamanho do texto com base na face do relógio:

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Bem-vindo ao Aplicativo do Relógio!")
                    .font(.system(size: min(geometry.size.width, geometry.size.height) / 12))
                    .padding()

                Text("Fique atento às mudanças de tamanho!")
                    .font(.system(size: min(geometry.size.width, geometry.size.height) / 20))
                    .padding()
            }
            .navigationTitle("Início")
        }
    }
}

Explicação do Código GeometryReader

• GeometryReader fornece o tamanho do contêiner, ajudando a criar um layout dinâmico.
• Ajustamos o tamanho da fonte dos textos com base na menor dimensão do espaço disponível.

Conclusão

Nesta lição, cobrimos o básico de como construir um aplicativo watchOS usando SwiftUI. Aprendemos como configurar um aplicativo simples, criar navegação e usar layouts responsivos para aprimorar a experiência do usuário.

À medida que você continua a desenvolver para watchOS, lembre-se de priorizar a clareza e a simplicidade em seus designs, tendo em mente que os usuários interagem com seu aplicativo de forma rápida e visual. Boa codificação!

Video

Navigation