TV App: basi di sviluppo per Apple TV e Android TV

Cos'è una TV App

TV App — un'applicazione progettata per funzionare su piattaforme smart TV: Apple TV (tvOS) e Android TV (Google TV). La differenza principale rispetto a un'app mobile è il metodo di interazione. L'utente non tocca lo schermo, ma controlla l'interfaccia utilizzando un telecomando. Tutti gli elementi devono essere accessibili tramite navigazione direzionale (D-pad): su, giù, sinistra, destra e pulsante di selezione.

Caratteristiche dello sviluppo di TV App: la risoluzione dello schermo va da Full HD (1920x1080) a 4K (3840x2160) con densità xhdpi (Android) o @3x (Apple). È obbligatoria una zona di sicurezza del 5% dai bordi per compensare l'over-scan (parte dell'immagine potrebbe essere tagliata dal televisore). Non c'è schermo tattile — tutte le interazioni avvengono tramite telecomando o gamepad. Il focus evidenzia sempre l'elemento attivo. Il consumo energetico non è limitato dalla batteria, ma l'app deve gestire correttamente la transizione alla modalità di sospensione. Secondo Statista (2026), il mercato globale delle smart TV supera l'80% dei nuovi televisori, con Apple TV e Android TV che rappresentano oltre 250 milioni di dispositivi.

Categorie di applicazioni TV: servizi video (Netflix, YouTube, Apple TV+), musica (Spotify, Apple Music), giochi (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), istruzione, notizie, meteo, foto. La categoria più popolare è lo streaming video, che occupa il 70% del tempo totale di utilizzo delle smart TV.

Apple TV (tvOS): architettura

tvOS è il sistema operativo Apple per il set-top box Apple TV, basato su iOS. La prima versione è stata rilasciata nel 2015 insieme all'Apple TV di 4ª generazione. tvOS condivide con iOS il kernel XNU, i framework Foundation, UIKit (in una versione adattata) e il meccanismo di sicurezza App Sandbox. Lo sviluppo viene effettuato in Swift utilizzando SwiftUI o UIKit.

Componenti principali di tvOS:

• Focus Engine — sistema di gestione del focus che determina automaticamente l'elemento attivo dell'interfaccia
• UIKit per tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator per la gestione del focus
• SwiftUI — framework dichiarativo con FocusState e il modificatore focusable()
• TVMLKit — framework per interfacce JavaScript/TVML (raramente usato nei progetti moderni)
• StoreKit — acquisti in-app e abbonamenti
• AVFoundation — riproduzione di contenuti video e audio con supporto HDR e Dolby Atmos

Il ciclo di vita di un'app tvOS è simile a iOS: notRunning, foregroundActive, foregroundInactive, background. Particolarità: l'app non deve richiedere autorizzazioni in background inutilmente — il sistema potrebbe terminare forzatamente un processo in background. La topologia di navigazione è costruita attorno a UISplitViewController e UITabBarController con schede "Home", "Cerca", "Libreria", "Impostazioni".

Android TV: architettura

Android TV è una versione di Android ottimizzata per TV e set-top box, presentata per la prima volta nel 2014. Dal 2020 esiste Google TV — un livello sopra Android TV con una nuova interfaccia, ma lo sviluppo delle app viene effettuato con Android TV SDK, compatibile con Google TV. Il linguaggio principale è Kotlin, i framework UI sono Leanback Library (classico) e Jetpack Compose for TV (sperimentale).

Componenti chiave di Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — creazione di tastiere, telecomandi e gamepad
• MediaSession — gestione della riproduzione di contenuti multimediali
• Recommendations — canale di raccomandazioni sulla schermata home tramite NotificationManager
• Leanback Preferences — schermate delle impostazioni in stile TV

Differenze tra Android TV e Android mobile: l'app deve dichiarare la categoria LEANBACK_LAUNCHER nel manifest; la larghezza minima del layout è 1920dp; l'interazione tattile è sostituita dalla navigazione D-pad; si consiglia l'uso di frammenti Leanback; l'accelerazione hardware è obbligatoria. La build include APK/AAB con supporto per architetture ARM64 e x86. Per i progetti moderni dal 2025, si consiglia Jetpack Compose for TV con componenti TvLazyColumn, TvButton, TvCard.

Focus Engine e gestione del focus

Focus Engine è un componente chiave di qualsiasi piattaforma TV, responsabile di determinare quale elemento dell'interfaccia è attivo. Su tvOS, Focus Engine è integrato in UIKit e funziona automaticamente. Quando si preme un pulsante del D-pad, il sistema analizza la posizione di tutti gli elementi focusable, calcola il candidato più vicino nella direzione della pressione e sposta dolcemente il focus su di esso con animazione (UIFocusAnimationCoordinator).

Regole di Focus Engine: il sistema considera la distanza tra gli elementi lungo l'asse di movimento, l'intersezione delle proiezioni degli elementi (un elemento è considerato candidato se la sua proiezione interseca la proiezione del focus corrente), la priorità per elementi alla stessa distanza (viene selezionato il più vicino in linea retta). Lo sviluppatore può influenzare il focus utilizzando UIFocusGuide — un rettangolo guida invisibile che reindirizza il focus a un elemento specifico quando si preme in una determinata direzione.

Su Android TV, il focus è implementato attraverso il sistema di focus standard di Android con gli attributi focusable e nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). L'animazione è configurata tramite StateListAnimator. Google raccomanda di impostare focusable su tutti gli elementi interattivi e di utilizzare nextFocus per un controllo preciso della navigazione. L'animazione del focus è fondamentale per l'esperienza utente — quando il focus cambia, deve verificarsi un'animazione fluida di scala (1.0 → 1.05–1.2) con una durata di 150–250 ms.

Esempi di codice: Swift e Kotlin

Esempio di una semplice app TV in SwiftUI per Apple TV che mostra un elenco di film con supporto Focus Engine.

import SwiftUI

struct Movie: Identifiable {
    let id = UUID()
    let title: String
    let subtitle: String
}

struct ContentView: View {
    @FocusState private var focusedMovie: UUID?

    let movies: [Movie] = [
        Movie(title: "Inception", subtitle: "2010, Sci-Fi"),
        Movie(title: "Interstellar", subtitle: "2014, Sci-Fi"),
        Movie(title: "The Matrix", subtitle: "1999, Action"),
        Movie(title: "Blade Runner 2049", subtitle: "2017, Sci-Fi"),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 40) {
            Text("Film").font(.title).padding(.leading, 60)
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 40) {
                    ForEach(movies) { movie in
                        VStack {
                            Image(systemName: "film.fill")
                                .resizable()
                                .frame(width: 200, height: 300)
                                .cornerRadius(12)
                                .focusable()
                                .focused($focusedMovie, equals: movie.id)
                            Text(movie.title).font(.headline)
                            Text(movie.subtitle).font(.subheadline).foregroundColor(.secondary)
                        }
                        .scaleEffect(focusedMovie == movie.id ? 1.15 : 1.0)
                        .animation(.easeInOut(duration: 0.2), value: focusedMovie)
                    }
                }
                .padding(.horizontal, 60)
            }
        }
        .onAppear { focusedMovie = movies.first?.id }
    }
}

Punti chiave: @FocusState — tracciamento del focus corrente; .focusable() — rende un elemento focusable; .scaleEffect() — un'animazione di zoom al focus, importante per il feedback visivo sulla TV.

Un esempio simile per Android TV con Leanback Library in Kotlin:

// MainActivity.kt
class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

class MainFragment : BrowseSupportFragment() {
    private val moviePresenter = MoviePresenter()

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        title = getString(R.string.app_name)
        headersState = HEADERS_ENABLED
        setupAdapter()
    }

    private fun setupAdapter() {
        val rowsAdapter = ArrayObjectAdapter(ListRowPresenter())
        val listRowAdapter = ArrayObjectAdapter(moviePresenter)
        listRowAdapter.add(Movie("Inception", "2010", R.drawable.poster_1))
        listRowAdapter.add(Movie("Interstellar", "2014", R.drawable.poster_2))
        rowsAdapter.add(ListRow(HeaderItem(0, "Movies"), listRowAdapter))
        adapter = rowsAdapter
    }
}

data class Movie(val title: String, val subtitle: String, val imageResId: Int)

class MoviePresenter : Presenter() {
    override fun onCreateViewHolder(parent: ViewGroup): ViewHolder {
        val cardView = ImageCardView(parent.context).apply {
            isFocusable = true
            setMainImageDimensions(200, 300)
        }
        return ViewHolder(cardView)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, item: Any) {
        val movie = item as Movie
        (viewHolder.view as ImageCardView).apply {
            titleText = movie.title
            contentText = movie.subtitle
        }
    }

    override fun onUnbindViewHolder(viewHolder: ViewHolder) {}
}

Punti chiave: BrowseSupportFragment — il frammento Leanback principale con intestazioni; Presenter — un'astrazione per creare ViewHolder, simile a RecyclerView.Adapter; ImageCardView — una scheda standard con immagine, titolo e sottotitolo; isFocusable = true — un attributo obbligatorio per gli elementi TV.