TV App: basisprincipes van ontwikkeling voor Apple TV en Android TV

Wat is TV App

TV App — een applicatie ontworpen om te werken op smart-tv-platforms: Apple TV (tvOS) en Android TV (Google TV). Het belangrijkste verschil met een mobiele app — de manier van interactie. De gebruiker raakt het scherm niet aan, maar bedient de interface met de afstandsbediening. Alle elementen moeten toegankelijk zijn via directionele navigatie (D-pad): omhoog, omlaag, links, rechts en de selectieknop.

Kenmerken van TV App-ontwikkeling: schermresolutie — van Full HD (1920x1080) tot 4K (3840x2160) met dichtheid xhdpi (Android) of @3x (Apple). Een veilige zone van 5% vanaf de randen voor compensatie van over-scan (een deel van het beeld kan worden afgesneden door de tv) is verplicht. Geen touchscreen — alle interacties via afstandsbediening of gamepad. Focus markeert altijd het actieve element. Energieverbruik is niet beperkt door de batterij, maar de app moet de overgang naar slaapmodus correct afhandelen. Volgens Statista (2026) overschrijdt de wereldwijde smart TV-markt 80% van de nieuwe tv's, waarbij Apple TV en Android TV meer dan 250 miljoen apparaten beslaan.

Categorieën TV-apps: videodiensten (Netflix, YouTube, Apple TV+), muziek (Spotify, Apple Music), games (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), educatie, nieuws, weer, foto. De populairste categorie — videostreaming, die 70% van de totale smart TV-gebruikstijd inneemt.

Apple TV (tvOS): architectuur

tvOS — het besturingssysteem van Apple voor de Apple TV-set-topbox, gebaseerd op iOS. Eerste release — 2015 samen met Apple TV van de 4e generatie. tvOS deelt met iOS de XNU-kernel, Foundation-frameworks, UIKit (in aangepaste versie) en het beveiligingsmechanisme App Sandbox. Ontwikkeling gebeurt in Swift met SwiftUI of UIKit.

Belangrijkste componenten van tvOS:

• Focus Engine — focusbeheersysteem dat automatisch het actieve interface-element bepaalt
• UIKit voor tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator voor focusbeheer
• SwiftUI — declaratief framework met FocusState en de focusable()-modifier
• TVMLKit — framework voor JavaScript/TVML-interfaces (zelden gebruikt in moderne projecten)
• StoreKit — in-app aankopen en abonnementen
• AVFoundation — video- en audioweergave met ondersteuning voor HDR en Dolby Atmos

Levenscyclus van tvOS-app is vergelijkbaar met iOS: notRunning, foregroundActive, foregroundInactive, background. Kenmerk: de app mag geen achtergrondrechten aanvragen zonder noodzaak — het systeem kan het achtergrondproces geforceerd beëindigen. De navigatietopologie wordt opgebouwd rond UISplitViewController en UITabBarController met de tabbladen „Start“, „Zoeken“, „Bibliotheek“, „Instellingen“.

Android TV: architectuur

Android TV — een versie van Android geoptimaliseerd voor tv's en set-topboxen, voor het eerst geïntroduceerd in 2014. Sinds 2020 bestaat Google TV — een laag bovenop Android TV met een nieuwe interface, maar app-ontwikkeling gebeurt op Android TV SDK, compatibel met Google TV. Hoofdtaal — Kotlin, UI-frameworks — Leanback Library (klassiek) en Jetpack Compose for TV (experimenteel).

Belangrijkste componenten van Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — maken van toetsenborden, afstandsbedieningen en gamepads
• MediaSession — beheer van mediaweergave
• Recommendations — aanbevelingskanaal op het startscherm via NotificationManager
• Leanback Preferences — instellingenschermen in TV-stijl

Verschillen tussen Android TV en mobiel Android: de app moet verplicht de categorie LEANBACK_LAUNCHER in het manifest declareren; minimale lay-outbreedte — 1920dp; touch-interactie is vervangen door D-pad-navigatie; het gebruik van Leanback-fragmenten wordt aanbevolen; hardwareversnelling is verplicht. De build omvat APK/AAB met ondersteuning voor ARM64- en x86-architecturen. Voor moderne projecten vanaf 2025 wordt Jetpack Compose for TV aanbevolen met componenten TvLazyColumn, TvButton, TvCard.

Focus Engine en focusbeheer

Focus Engine — het belangrijkste onderdeel van elk TV-platform, verantwoordelijk voor welk interface-element actief is. Op tvOS is Focus Engine ingebouwd in UIKit en werkt automatisch. Bij het indrukken van de D-pad-knop analyseert het systeem de positie van alle focusable-elementen, berekent de dichtstbijzijnde kandidaat in de richting van de druk en verplaatst de focus er soepel naartoe met animatie (UIFocusAnimationCoordinator).

Regels van Focus Engine: het systeem houdt rekening met de afstand tussen elementen langs de bewegingsas, kruising van projecties van elementen (een element wordt als kandidaat beschouwd als zijn projectie de projectie van de huidige focus kruist), prioriteit van elementen met dezelfde afstand (de dichtstbijzijnde in een rechte lijn wordt gekozen). De ontwikkelaar kan de focus beïnvloeden met UIFocusGuide — een onzichtbare geleidende rechthoek die de focus naar een specifiek element verwijst bij indrukken in een bepaalde richting.

Op Android TV wordt focus geïmplementeerd via het standaard Android-focussysteem met de attributen focusable en nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Animatie wordt geconfigureerd via StateListAnimator. Google raadt aan om focusable op alle interactieve elementen in te stellen en nextFocus te gebruiken voor nauwkeurige navigatiecontrole. Focusanimatie is cruciaal voor UX — bij focusovergang moet een soepele schaalanimatie (1.0 → 1.05–1.2) plaatsvinden met een duur van 150–250 ms.

Codevoorbeelden: Swift en Kotlin

Voorbeeld van een eenvoudige TV-app in SwiftUI voor Apple TV met weergave van een filmlijst en ondersteuning voor 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("Films").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 }
    }
}

Belangrijkste punten: @FocusState — bijhouden van huidige focus; .focusable() — maakt het element toegankelijk voor focus; .scaleEffect() — vergrotingsanimatie bij focus, belangrijk voor visuele feedback op TV.

Vergelijkbaar voorbeeld voor Android TV met 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) {}
}

Belangrijkste punten: BrowseSupportFragment — het belangrijkste Leanback-fragment met koppen; Presenter — abstractie voor het maken van ViewHolder, vergelijkbaar met RecyclerView.Adapter; ImageCardView — standaardkaart met afbeelding, titel en ondertitel; isFocusable = true — verplicht attribuut voor TV-elementen.