TV App: Grundlagen der Entwicklung für Apple TV und Android TV

Was ist eine TV App

TV App — eine Anwendung, die für den Betrieb auf Smart-TV-Plattformen entwickelt wurde: Apple TV (tvOS) und Android TV (Google TV). Der Hauptunterschied zu einer mobilen App ist die Interaktionsmethode. Der Benutzer berührt nicht den Bildschirm, sondern steuert die Oberfläche mit einer Fernbedienung. Alle Elemente müssen durch direktionale Navigation (D-pad) zugänglich sein: nach oben, unten, links, rechts und die Auswahltaste.

Besonderheiten der TV App-Entwicklung: Die Bildschirmauflösung reicht von Full HD (1920x1080) bis 4K (3840x2160) mit xhdpi-Dichte (Android) oder @3x (Apple). Eine Sicherheitszone von 5% von den Rändern ist obligatorisch, um Over-Scan zu kompensieren (ein Teil des Bildes kann vom Fernseher abgeschnitten werden). Es gibt keinen Touchscreen — alle Interaktionen erfolgen über die Fernbedienung oder das Gamepad. Der Fokus hebt immer das aktive Element hervor. Der Stromverbrauch ist nicht durch den Akku begrenzt, aber die App muss den Übergang in den Schlafmodus korrekt behandeln. Laut Statista (2026) übersteigt der globale Smart-TV-Markt 80% der neuen Fernseher, wobei Apple TV und Android TV über 250 Millionen Geräte ausmachen.

Kategorien von TV-Anwendungen: Videodienste (Netflix, YouTube, Apple TV+), Musik (Spotify, Apple Music), Spiele (Apple Arcade, Google Play Games), Fitness (Apple Fitness+, Peloton), Bildung, Nachrichten, Wetter, Fotos. Die beliebteste Kategorie ist Video-Streaming, das 70% der gesamten Nutzungszeit von Smart-TVs ausmacht.

Apple TV (tvOS): Architektur

tvOS ist das Betriebssystem von Apple für die Apple TV-Set-Top-Box, basierend auf iOS. Die erste Veröffentlichung war 2015 zusammen mit der 4. Generation des Apple TV. tvOS teilt mit iOS den XNU-Kernel, die Foundation-Frameworks, UIKit (in einer angepassten Version) und den Sicherheitsmechanismus App Sandbox. Die Entwicklung erfolgt in Swift mit SwiftUI oder UIKit.

Wichtige Komponenten von tvOS:

• Focus Engine — Fokusmanagementsystem, das automatisch das aktive Oberflächenelement bestimmt
• UIKit für tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator für das Fokusmanagement
• SwiftUI — deklaratives Framework mit FocusState und dem focusable()-Modifikator
• TVMLKit — Framework für JavaScript/TVML-Oberflächen (selten in modernen Projekten verwendet)
• StoreKit — In-App-Käufe und Abonnements
• AVFoundation — Video- und Audiowiedergabe mit HDR- und Dolby-Atmos-Unterstützung

Der Lebenszyklus einer tvOS-App ähnelt iOS: notRunning, foregroundActive, foregroundInactive, background. Besonderheit: Die App sollte keine Hintergrundberechtigungen ohne Notwendigkeit anfordern — das System kann einen Hintergrundprozess zwangsweise beenden. Die Navigationstopologie wird um UISplitViewController und UITabBarController mit den Tabs "Start", "Suche", "Bibliothek", "Einstellungen" aufgebaut.

Android TV: Architektur

Android TV ist eine für Fernseher und Set-Top-Boxen optimierte Version von Android, die erstmals 2014 vorgestellt wurde. Seit 2020 existiert Google TV — eine Überlagerung von Android TV mit einer neuen Oberfläche, aber die App-Entwicklung erfolgt mit dem Android TV SDK, das mit Google TV kompatibel ist. Die Hauptsprache ist Kotlin, die UI-Frameworks sind Leanback Library (klassisch) und Jetpack Compose for TV (experimentell).

Schlüsselkomponenten von Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — Erstellung von Tastaturen, Fernbedienungen und Gamepads
• MediaSession — Verwaltung der Medienwiedergabe
• Recommendations — Empfehlungskanal auf dem Startbildschirm über NotificationManager
• Leanback Preferences — Einstellungsbildschirme im TV-Stil

Unterschiede zwischen Android TV und mobilem Android: Die App muss die Kategorie LEANBACK_LAUNCHER im Manifest deklarieren; die minimale Layoutbreite beträgt 1920dp; Touch-Interaktion wird durch D-pad-Navigation ersetzt; die Verwendung von Leanback-Fragmenten wird empfohlen; Hardwarebeschleunigung ist obligatorisch. Der Build enthält APK/AAB mit Unterstützung für ARM64- und x86-Architekturen. Für moderne Projekte ab 2025 wird Jetpack Compose for TV mit Komponenten wie TvLazyColumn, TvButton, TvCard empfohlen.

Focus Engine und Fokusmanagement

Focus Engine — eine Schlüsselkomponente jeder TV-Plattform, die dafür verantwortlich ist, welches Oberflächenelement aktiv ist. Auf tvOS ist die Focus Engine in UIKit integriert und arbeitet automatisch. Wenn eine D-pad-Taste gedrückt wird, analysiert das System die Position aller fokussierbaren Elemente, berechnet den nächsten Kandidaten in Druckrichtung und bewegt den Fokus sanft mit Animation (UIFocusAnimationCoordinator) darauf.

Regeln der Focus Engine: Das System berücksichtigt den Abstand zwischen Elementen entlang der Bewegungsachse, die Überschneidung der Elementprojektionen (ein Element gilt als Kandidat, wenn seine Projektion die Projektion des aktuellen Fokus schneidet), die Priorität von Elementen mit gleichem Abstand (das nächste in gerader Linie wird ausgewählt). Der Entwickler kann den Fokus mit UIFocusGuide beeinflussen — einem unsichtbaren Führungsrechteck, das den Fokus bei Druck in eine bestimmte Richtung auf ein bestimmtes Element umleitet.

Auf Android TV wird der Fokus durch das standardmäßige Android-Fokussystem mit den Attributen focusable und nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) implementiert. Die Animation wird über StateListAnimator konfiguriert. Google empfiehlt, focusable auf allen interaktiven Elementen zu setzen und nextFocus für präzise Navigationssteuerung zu verwenden. Fokusanimation ist entscheidend für die Benutzererfahrung — beim Fokuswechsel sollte eine sanfte Skalierungsanimation (1.0 → 1.05–1.2) mit einer Dauer von 150–250 ms erfolgen.

Codebeispiele: Swift und Kotlin

Ein Beispiel einer einfachen TV-App in SwiftUI für Apple TV, die eine Liste von Filmen mit Focus Engine-Unterstützung anzeigt.

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 }
    }
}

Wichtige Punkte: @FocusState — Verfolgung des aktuellen Fokus; .focusable() — macht ein Element fokussierbar; .scaleEffect() — eine Zoom-Animation bei Fokus, wichtig für visuelles Feedback auf dem Fernseher.

Ein ähnliches Beispiel für Android TV mit der 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) {}
}

Wichtige Punkte: BrowseSupportFragment — das Haupt-Leanback-Fragment mit Überschriften; Presenter — eine Abstraktion zum Erstellen von ViewHolder, ähnlich wie RecyclerView.Adapter; ImageCardView — eine Standardkarte mit Bild, Titel und Untertitel; isFocusable = true — ein obligatorisches Attribut für TV-Elemente.