TV App: základy vývoje pro Apple TV a Android TV

Co je TV App

TV App — aplikace určená pro provoz na platformách chytrých televizorů: Apple TV (tvOS) a Android TV (Google TV). Klíčový rozdíl od mobilní aplikace — způsob interakce. Uživatel se nedotýká obrazovky, ale ovládá rozhraní pomocí dálkového ovladače. Všechny prvky musí být přístupné pomocí směrové navigace (D-pad): nahoru, dolů, doleva, doprava a tlačítko pro výběr.

Vlastnosti vývoje TV App: rozlišení obrazovky — od Full HD (1920x1080) po 4K (3840x2160) s hustotou xhdpi (Android) nebo @3x (Apple). Povinná bezpečnostní zóna 5 % od okrajů pro kompenzaci over-scan (část obrazu může být televizorem oříznuta). Chybí dotyková obrazovka — všechny interakce přes dálkový ovladač nebo gamepad. Fokus vždy zvýrazňuje aktivní prvek. Spotřeba energie není omezena baterií, ale aplikace musí správně zpracovávat přechod do režimu spánku. Podle Statista (2026) globální trh smart TV přesahuje 80 % nových televizorů, přičemž Apple TV a Android TV pokrývají více než 250 milionů zařízení.

Kategorie TV aplikací: video služby (Netflix, YouTube, Apple TV+), hudba (Spotify, Apple Music), hry (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), vzdělávání, zprávy, počasí, foto. Nejoblíbenější kategorie — streamování videa, které zabírá 70 % celkového času používání smart TV.

Apple TV (tvOS): architektura

tvOS — operační systém Apple pro zařízení Apple TV, založený na iOS. První vydání — 2015 společně s Apple TV 4. generace. tvOS sdílí s iOS jádro XNU, frameworky Foundation, UIKit (v adaptované verzi) a bezpečnostní mechanismus App Sandbox. Vývoj probíhá v Swift pomocí SwiftUI nebo UIKit.

Hlavní komponenty tvOS:

• Focus Engine — systém správy fokusu, který automaticky určuje aktivní prvek rozhraní
• UIKit pro tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator pro správu fokusu
• SwiftUI — deklarativní framework s FocusState a modifikátorem focusable()
• TVMLKit — framework pro JavaScript/TVML rozhraní (zřídka používaný v moderních projektech)
• StoreKit — nákupy v aplikaci a předplatné
• AVFoundation — přehrávání video a audio obsahu s podporou HDR a Dolby Atmos

Životní cyklus tvOS aplikace je podobný iOS: notRunning, foregroundActive, foregroundInactive, background. Vlastnost: aplikace by neměla žádat o oprávnění na pozadí bez nutnosti — systém může násilně ukončit proces na pozadí. Topologie navigace je postavena kolem UISplitViewController a UITabBarController s kartami „Domů", „Hledat", „Knihovna", „Nastavení".

Android TV: architektura

Android TV — verze Androidu optimalizovaná pro televizory a set-top boxy, poprvé představena v roce 2014. Od roku 2020 existuje Google TV — vrstva nad Android TV s novým rozhraním, ale vývoj aplikací probíhá na Android TV SDK, kompatibilním s Google TV. Hlavní jazyk — Kotlin, UI frameworky — Leanback Library (klasický) a Jetpack Compose for TV (experimentální).

Klíčové komponenty Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — vytváření klávesnic, dálkových ovladačů a gamepadů
• MediaSession — správa přehrávání mediálního obsahu
• Recommendations — kanál doporučení na hlavní obrazovce přes NotificationManager
• Leanback Preferences — obrazovky nastavení v TV stylu

Rozdíly Android TV od mobilního Androidu: aplikace povinně deklaruje kategorii LEANBACK_LAUNCHER v manifestu; minimální šířka rozvržení — 1920dp; dotyková interakce je nahrazena navigací D-pad; doporučuje se používání Leanback fragmentů; hardwarová akcelerace je povinná. Sestavení zahrnuje APK/AAB s podporou architektur ARM64 a x86. Pro moderní projekty od roku 2025 se doporučuje Jetpack Compose for TV s komponentami TvLazyColumn, TvButton, TvCard.

Focus Engine a správa fokusu

Focus Engine — klíčová komponenta každé TV platformy, odpovědná za to, který prvek rozhraní je aktivní. Na tvOS je Focus Engine zabudován do UIKit a funguje automaticky. Při stisknutí tlačítka D-pad systém analyzuje polohu všech focusable prvků, vypočítá nejbližšího kandidáta ve směru stisknutí a plynule na něj přesune fokus s animací (UIFocusAnimationCoordinator).

Pravidla Focus Engine: systém bere v úvahu vzdálenost mezi prvky podél osy pohybu, průnik projekcí prvků (prvek je považován za kandidáta, pokud jeho projekce protíná projekci aktuálního fokusu), prioritu prvků se stejnou vzdáleností (vybírá se nejbližší v přímé linii). Vývojář může ovlivnit fokus pomocí UIFocusGuide — neviditelného vodícího obdélníku, který přesměruje fokus na konkrétní prvek při stisknutí v daném směru.

Na Android TV je fokus implementován prostřednictvím standardního systému fokusu Android s atributy focusable a nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Animace se konfiguruje pomocí StateListAnimator. Google doporučuje nastavit focusable na všechny interaktivní prvky a používat nextFocus pro přesné řízení navigace. Animace fokusu je kritická pro UX — při přechodu fokusu by měla proběhnout plynulá animace škálování (1.0 → 1.05–1.2) s dobou trvání 150–250 ms.

Příklady kódu: Swift a Kotlin

Příklad jednoduché TV aplikace ve SwiftUI pro Apple TV se zobrazením seznamu filmů a podporou 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("Filmy").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 }
    }
}

Klíčové body: @FocusState — sledování aktuálního fokusu; .focusable() — zpřístupňuje prvek pro fokus; .scaleEffect() — animace zvětšení při fokusu, důležitá pro vizuální zpětnou vazbu na TV.

Obdobný příklad pro Android TV s Leanback Library v 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) {}
}

Klíčové body: BrowseSupportFragment — hlavní Leanback fragment s nadpisy; Presenter — abstrakce pro vytváření ViewHolder, podobná RecyclerView.Adapter; ImageCardView — standardní karta s obrázkem, názvem a podnázvem; isFocusable = true — povinný atribut pro TV prvky.