Lição: 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!