TV App: bazele dezvoltării pentru Apple TV și Android TV

Ce este TV App

TV App — aplicație destinată să funcționeze pe platformele de televizoare inteligente: Apple TV (tvOS) și Android TV (Google TV). Diferența cheie față de aplicația mobilă — modul de interacțiune. Utilizatorul nu atinge ecranul, ci controlează interfața cu ajutorul telecomenzii. Toate elementele trebuie să fie accesibile prin navigare direcțională (D-pad): sus, jos, stânga, dreapta și butonul de selectare.

Caracteristici ale dezvoltării TV App: rezoluția ecranului — de la Full HD (1920x1080) la 4K (3840x2160) cu densitate xhdpi (Android) sau @3x (Apple). Zona de siguranță de 5% de la margini pentru compensarea over-scan (o parte a imaginii poate fi tăiată de televizor) este obligatorie. Ecran tactil lipsește — toate interacțiunile prin telecomandă sau gamepad. Focusul evidențiază întotdeauna elementul activ. Consumul de energie nu este limitat de baterie, dar aplicația trebuie să gestioneze corect trecerea în modul de repaus. Conform datelor Statista (2026), piața globală a smart TV depășește 80% din televizoarele noi, Apple TV și Android TV acoperind peste 250 de milioane de dispozitive.

Categorii de aplicații TV: servicii video (Netflix, YouTube, Apple TV+), muzică (Spotify, Apple Music), jocuri (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), educație, știri, vreme, foto. Cea mai populară categorie — streaming video, care ocupă 70% din timpul total de utilizare a smart TV.

Apple TV (tvOS): arhitectura

tvOS — sistemul de operare Apple pentru dispozitivul Apple TV, bazat pe iOS. Prima lansare — 2015 odată cu Apple TV de generația a 4-a. tvOS împărtășește cu iOS nucleul XNU, framework-urile Foundation, UIKit (în versiune adaptată) și mecanismul de securitate App Sandbox. Dezvoltarea se face în Swift folosind SwiftUI sau UIKit.

Componentele principale tvOS:

• Focus Engine — sistem de gestionare a focusului care determină automat elementul activ al interfeței
• UIKit pentru tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator pentru gestionarea focusului
• SwiftUI — framework declarativ cu FocusState și modificatorul focusable()
• TVMLKit — framework pentru interfețe JavaScript/TVML (rar folosit în proiecte moderne)
• StoreKit — achiziții în aplicație și abonamente
• AVFoundation — redarea conținutului video și audio cu suport HDR și Dolby Atmos

Ciclul de viață al aplicației tvOS este similar cu iOS: notRunning, foregroundActive, foregroundInactive, background. Caracteristică: aplicația nu trebuie să solicite permisiuni de fundal fără necesitate — sistemul poate termina forțat procesul de fundal. Topologia de navigare se construiește în jurul UISplitViewController și UITabBarController cu filele «Acasă», «Căutare», «Bibliotecă», «Setări».

Android TV: arhitectura

Android TV — versiunea Android optimizată pentru televizoare și set-top-box-uri, prezentată pentru prima dată în 2014. Din 2020 există Google TV — un strat peste Android TV cu o interfață nouă, dar dezvoltarea aplicațiilor se face pe Android TV SDK, compatibil cu Google TV. Limba principală — Kotlin, framework-uri UI — Leanback Library (clasic) și Jetpack Compose for TV (experimental).

Componentele cheie Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — crearea de tastaturi, telecomenzi și gamepad-uri
• MediaSession — gestionarea redării conținutului media
• Recommendations — canal de recomandări pe ecranul principal prin NotificationManager
• Leanback Preferences — ecrane de setări în stil TV

Diferențele Android TV față de Android mobil: aplicația declară obligatoriu categoria LEANBACK_LAUNCHER în manifest; lățimea minimă a layout-ului — 1920dp; interacțiunea tactilă este înlocuită cu navigarea D-pad; se recomandă utilizarea fragmentelor Leanback; accelerarea hardware este obligatorie. Build-ul include APK/AAB cu suport pentru arhitecturile ARM64 și x86. Pentru proiecte moderne din 2025 se recomandă Jetpack Compose for TV cu componentele TvLazyColumn, TvButton, TvCard.

Focus Engine și gestionarea focusului

Focus Engine — componenta cheie a oricărei platforme TV, responsabilă de care element al interfeței este activ. Pe tvOS, Focus Engine este încorporat în UIKit și funcționează automat. La apăsarea butonului D-pad, sistemul analizează poziția tuturor elementelor focusable, calculează cel mai apropiat candidat în direcția apăsării și mută focusul pe acesta cu animație lină (UIFocusAnimationCoordinator).

Regulile Focus Engine: sistemul ia în considerare distanța dintre elemente de-a lungul axei de mișcare, intersecția proiecțiilor elementelor (un element este considerat candidat dacă proiecția sa intersectează proiecția focusului curent), prioritatea elementelor cu aceeași distanță (se alege cel mai apropiat în linie dreaptă). Dezvoltatorul poate influența focusul cu ajutorul UIFocusGuide — un dreptunghi de ghidare invizibil care redirecționează focusul către un anumit element la apăsarea într-o direcție dată.

Pe Android TV focusul este implementat prin sistemul standard de focus Android cu atributele focusable și nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Animația se configurează prin StateListAnimator. Google recomandă setarea focusable pe toate elementele interactive și utilizarea nextFocus pentru controlul precis al navigării. Animația focusului este critică pentru UX — la tranziția focusului trebuie să aibă loc o animație lină de scalare (1.0 → 1.05–1.2) cu o durată de 150–250 ms.

Exemple de cod: Swift și Kotlin

Exemplu de aplicație TV simplă în SwiftUI pentru Apple TV cu afișarea unei liste de filme și suport pentru 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("Filme").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 }
    }
}

Puncte cheie: @FocusState — urmărirea focusului curent; .focusable() — face elementul accesibil pentru focus; .scaleEffect() — animație de mărire la focus, importantă pentru feedback vizual pe TV.

Exemplu analog pentru Android TV cu Leanback Library în 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) {}
}

Puncte cheie: BrowseSupportFragment — fragmentul principal Leanback cu titluri; Presenter — abstractizare pentru crearea ViewHolder, similară cu RecyclerView.Adapter; ImageCardView — carte standard cu imagine, titlu și subtitlu; isFocusable = true — atribut obligatoriu pentru elementele TV.