TV App: fejlesztés alapjai Apple TV és Android TV rendszerekhez

Mi az a TV App

TV App — okostévé platformokon való működésre tervezett alkalmazás: Apple TV (tvOS) és Android TV (Google TV). A mobilalkalmazástól való legfontosabb különbség — az interakció módja. A felhasználó nem érinti a képernyőt, hanem a távirányítóval vezérli a felületet. Minden elemnek elérhetőnek kell lennie irányított navigáción (D-pad) keresztül: fel, le, balra, jobbra és a kiválasztó gomb.

A TV App fejlesztés jellemzői: képernyőfelbontás — Full HD-tól (1920x1080) 4K-ig (3840x2160) xhdpi sűrűséggel (Android) vagy @3x (Apple). Kötelező 5%-os biztonsági zóna a szélektől az over-scan kompenzálásához (a kép egy részét a TV levághatja). Nincs érintőképernyő — minden interakció távirányítón vagy gamepadon keresztül. A fókusz mindig kiemeli az aktív elemet. Az energiafogyasztást nem korlátozza az akkumulátor, de az alkalmazásnak megfelelően kell kezelnie az alvó módba váltást. A Statista (2026) szerint a globális smart TV piac meghaladja az új TV-k 80%-át, ahol az Apple TV és Android TV több mint 250 millió eszközt fed le.

TV-alkalmazások kategóriái: videószolgáltatások (Netflix, YouTube, Apple TV+), zene (Spotify, Apple Music), játékok (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), oktatás, hírek, időjárás, fotó. A legnépszerűbb kategória — videóstreaming, amely a smart TV használati idő 70%-át teszi ki.

Apple TV (tvOS): architektúra

tvOS — az Apple operációs rendszere az Apple TV eszközhöz, iOS alapokon. Első kiadás — 2015 az Apple TV 4. generációjával együtt. A tvOS megosztja az iOS-szel az XNU kernelt, a Foundation keretrendszereket, a UIKit-et (adaptált verzióban) és az App Sandbox biztonsági mechanizmust. A fejlesztés Swift nyelven történik SwiftUI vagy UIKit használatával.

A tvOS fő komponensei:

• Focus Engine — fókuszkezelő rendszer, amely automatikusan meghatározza az aktív felületi elemet
• UIKit tvOS-hez — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator a fókuszkezeléshez
• SwiftUI — deklaratív keretrendszer FocusState-tel és focusable() módosítóval
• TVMLKit — keretrendszer JavaScript/TVML felületekhez (ritkán használják modern projektekben)
• StoreKit — alkalmazáson belüli vásárlások és előfizetések
• AVFoundation — videó és audió tartalom lejátszása HDR és Dolby Atmos támogatással

A tvOS alkalmazás életciklusa hasonló az iOS-hez: notRunning, foregroundActive, foregroundInactive, background. Jellemző: az alkalmazás ne kérjen háttérengeélyeket szükség nélkül — a rendszer kényszerítve befejezheti a háttérfolyamatot. A navigációs topológia az UISplitViewController és UITabBarController köré épül „Kezdőlap", „Keresés", „Könyvtár", „Beállítások" fülekkel.

Android TV: architektúra

Android TV — az Android TV-k és set-top boxok számára optimalizált verziója, először 2014-ben mutatták be. 2020-tól létezik Google TV — egy réteg az Android TV felett új felülettel, de az alkalmazásfejlesztés az Android TV SDK-n történik, amely kompatibilis a Google TV-vel. Fő nyelv — Kotlin, UI keretrendszerek — Leanback Library (klasszikus) és Jetpack Compose for TV (kísérleti).

Az Android TV kulcsfontosságú komponensei:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — billentyűzetek, távirányítók és gamepadok létrehozása
• MediaSession — médiatartalom lejátszásának kezelése
• Recommendations — ajánlási csatorna a kezdőképernyőn NotificationManager-en keresztül
• Leanback Preferences — TV-stílusú beállítási képernyők

Az Android TV különbségei a mobil Android-tól: az alkalmazás kötelezően deklarálja a LEANBACK_LAUNCHER kategóriát a manifestben; minimális elrendezési szélesség — 1920dp; az érintési interakciót D-pad navigáció váltja fel; a Leanback fragmentek használata ajánlott; a hardveres gyorsítás kötelező. A build tartalmaz APK/AAB-t ARM64 és x86 architektúrák támogatásával. 2025-től modern projektekhez a Jetpack Compose for TV ajánlott TvLazyColumn, TvButton, TvCard komponensekkel.

Focus Engine és fókuszkezelés

Focus Engine — minden TV platform kulcsfontosságú komponense, amely felelős azért, hogy a felület melyik eleme aktív. A tvOS-ben a Focus Engine be van építve a UIKit-be és automatikusan működik. A D-pad gomb megnyomásakor a rendszer elemzi az összes focusable elem helyzetét, kiszámítja a legközelebbi jelöltet a nyomás irányában, és simán áthelyezi rá a fókuszt animációval (UIFocusAnimationCoordinator).

A Focus Engine szabályai: a rendszer figyelembe veszi az elemek közötti távolságot a mozgás tengelye mentén, az elemek vetületeinek metszését (egy elem akkor tekinthető jelöltnek, ha a vetülete metszi az aktuális fókusz vetületét), az azonos távolságú elemek prioritását (a legközelebbi egyenes vonalban kerül kiválasztásra). A fejlesztő befolyásolhatja a fókuszt az UIFocusGuide segítségével — egy láthatatlan vezető téglalap, amely adott irányba történő megnyomáskor egy adott elemre irányítja a fókuszt.

Android TV-n a fókusz az Android szabványos fókuszrendszerén keresztül valósul meg a focusable és nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) attribútumokkal. Az animáció a StateListAnimator segítségével konfigurálható. A Google azt javasolja, hogy a focusable-t minden interaktív elemre állítsa be, és a nextFocus-t használja a navigáció pontos vezérléséhez. A fókusz animációja kritikus a UX szempontjából — a fókusz átmenetekor egy sima méretezési animációnak (1.0 → 1.05–1.2) kell történnie 150–250 ms időtartammal.

Kódpéldák: Swift és Kotlin

Példa egy egyszerű TV alkalmazásra SwiftUI-ben Apple TV-hez filmek listájának megjelenítésével és Focus Engine támogatással.

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("Filmek").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 }
    }
}

Főbb pontok: @FocusState — aktuális fókusz nyomon követése; .focusable() — elérhetővé teszi az elemet a fókusz számára; .scaleEffect() — nagyítási animáció fókuszban, fontos a vizuális visszajelzéshez a TV-n.

Hasonló példa Android TV-hez Leanback Library-vel Kotlinban:

// 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) {}
}

Főbb pontok: BrowseSupportFragment — a Leanback fő fragmentje fejlécekkel; Presenter — absztrakció ViewHolder létrehozásához, hasonló a RecyclerView.Adapter-hez; ImageCardView — standard kártya képpel, címmel és alcímmel; isFocusable = true — kötelező attribútum TV elemekhez.