23.11.2024

Aula 112: SwiftUI no tvOS

Nesta aula, vamos explorar como construir interfaces de usuário para aplicativos tvOS utilizando SwiftUI. Com SwiftUI, você pode criar interfaces elegantes e responsivas com menos código em comparação aos métodos tradicionais do UIKit. Vamos mergulhar nos componentes principais e nas melhores práticas para criar um aplicativo tvOS.

Começando com SwiftUI no tvOS

Para começar, certifique-se de que você tenha o Xcode instalado com suporte para SwiftUI. Crie um novo projeto tvOS selecionando "tvOS" nas opções de template e escolhendo "App".

Uma vez que seu projeto esteja criado, adicione SwiftUI no arquivo ContentView.swift:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Bem-vindo ao tvOS com SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.blue)
            .padding()
    }
}

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

Projetando a Interface do Usuário

Ao projetar para tvOS, considere o maior tamanho da tela e o modelo de interação orientado ao foco. Use layouts simples com elementos grandes e facilmente selecionáveis.

Criando um Layout em Pilha

Você pode usar HStack e VStack para organizar seus elementos de UI horizontal e verticalmente. Aqui está um exemplo de uma pilha vertical contendo imagens e texto:

struct ListaFilmesView: View {
    let filmes: [String] = ["Filme 1", "Filme 2", "Filme 3"]

    var body: some View {
        VStack {
            Text("Filmes em Destaque")
                .font(.title)
                .padding()

            ForEach(filmes, id: \.self) { filme in
                LinhaFilme(nomeFilme: filme)
            }
        }
    }
}

struct LinhaFilme: View {
    var nomeFilme: String

    var body: some View {
        HStack {
            Image(nomeFilme)
                .resizable()
                .frame(width: 100, height: 150)
                .cornerRadius(10)

            Text(nomeFilme)
                .font(.headline)
                .foregroundColor(.primary)
                .padding()
        }
    }
}

Gerenciando o Foco

No tvOS, a navegação através dos elementos da interface é feita pelo controle remoto, por isso é essencial gerenciar o foco de forma eficaz. O SwiftUI oferece uma maneira simples de lidar com o foco usando o modificador .focusable().

struct LinhaFilmeComFoco: View {
    var nomeFilme: String

    var body: some View {
        HStack {
            Image(nomeFilme)
                .resizable()
                .frame(width: 100, height: 150)
                .cornerRadius(10)
                .focusable()
                .onTapGesture {
                    print("\(nomeFilme) selecionado")
                }

            Text(nomeFilme)
                .font(.headline)
                .foregroundColor(.primary)
                .padding()
        }
    }
}

Navegando entre Views com NavigationView

Para criar um aplicativo com várias telas, use o NavigationView para gerenciar as transições entre views:

struct ViewPrincipal: View {
    var body: some View {
        NavigationView {
            ListaFilmesView()
                .navigationTitle("Filmes")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Visualizando Seu Aplicativo

Para aproveitar o recurso de pré-visualização do SwiftUI, certifique-se de que você está rodando no simulador tvOS. Você pode adicionar pré-visualizações para suas views assim:

struct ListaFilmesView_Previews: PreviewProvider {
    static var previews: some View {
        ListaFilmesView()
            .previewDevice("Apple TV 4K")
    }
}

Conclusão

O SwiftUI no tvOS traz um novo nível de simplicidade e flexibilidade ao design de interfaces para aplicativos de televisão. Ao aproveitar a sintaxe declarativa do SwiftUI, a gestão de foco e as ferramentas de navegação integradas, você pode criar experiências envolventes para os usuários.

Nesta aula, utilizamos blocos básicos de construção como Text, Image, HStack, VStack, e NavigationView para criar um aplicativo funcional para tvOS. Experimente com seu design, gerenciamento de foco e navegação para aproveitar ao máximo as excepcionais capacidades do SwiftUI. Boas codificações!

Video

Navigation