TV App: grunderna för utveckling för Apple TV och Android TV

Vad är TV App

TV App — en applikation utformad för att fungera på smarta TV-plattformar: Apple TV (tvOS) och Android TV (Google TV). Den viktigaste skillnaden från en mobil app — interaktionssättet. Användaren rör inte skärmen utan styr gränssnittet med fjärrkontrollen. Alla element måste vara tillgängliga via riktad navigering (D-pad): upp, ner, vänster, höger och välj-knappen.

Egenskaper för TV App-utveckling: skärmupplösning — från Full HD (1920x1080) till 4K (3840x2160) med densitet xhdpi (Android) eller @3x (Apple). Obligatorisk säkerhetszon på 5% från kanterna för kompensation av over-scan (en del av bilden kan beskäras av TV:n). Ingen pekskärm — alla interaktioner via fjärrkontroll eller gamepad. Fokus markerar alltid det aktiva elementet. Energiförbrukningen begränsas inte av batteriet, men applikationen måste korrekt hantera övergången till viloläge. Enligt Statista (2026) överstiger den globala smarta TV-marknaden 80% av nya TV-apparater, där Apple TV och Android TV täcker över 250 miljoner enheter.

Kategorier av TV-applikationer: videotjänster (Netflix, YouTube, Apple TV+), musik (Spotify, Apple Music), spel (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), utbildning, nyheter, väder, foto. Den mest populära kategorin — videostreaming, som upptar 70% av den totala användningstiden för smarta TV-apparater.

Apple TV (tvOS): arkitektur

tvOS — Apples operativsystem för Apple TV-enheten, baserat på iOS. Första utgåvan — 2015 tillsammans med Apple TV av 4:e generationen. tvOS delar med iOS kärnan XNU, Foundation-ramverken, UIKit (i anpassad version) och säkerhetsmekanismen App Sandbox. Utvecklingen sker i Swift med SwiftUI eller UIKit.

Huvudkomponenter i tvOS:

• Focus Engine — fokus hanteringssystem som automatiskt bestämmer det aktiva gränssnittselementet
• UIKit för tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator för fokus hantering
• SwiftUI — deklarativt ramverk med FocusState och focusable()-modifieraren
• TVMLKit — ramverk för JavaScript/TVML-gränssnitt (sällan använt i moderna projekt)
• StoreKit — köp i appen och prenumerationer
• AVFoundation — uppspelning av video- och ljudinnehåll med stöd för HDR och Dolby Atmos

Livscykeln för tvOS-applikation liknar iOS: notRunning, foregroundActive, foregroundInactive, background. Egenskap: applikationen bör inte begära bakgrundsbehörigheter utan behov — systemet kan tvångsavsluta bakgrundsprocessen. Navigeringstopologin byggs runt UISplitViewController och UITabBarController med flikarna "Hem", "Sök", "Bibliotek", "Inställningar".

Android TV: arkitektur

Android TV — version av Android optimerad för TV-apparater och set-top-boxar, först introducerad 2014. Sedan 2020 finns Google TV — ett lager ovanpå Android TV med nytt gränssnitt, men applikationsutveckling sker på Android TV SDK, kompatibelt med Google TV. Huvudspråk — Kotlin, UI-ramverk — Leanback Library (klassisk) och Jetpack Compose for TV (experimentell).

Nyckelkomponenter i Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — skapa tangentbord, fjärrkontroller och gamepads
• MediaSession — hantering av mediauppspelning
• Recommendations — rekommendationskanal på hemskärmen via NotificationManager
• Leanback Preferences — inställningsskärmar i TV-stil

Skillnader mellan Android TV och mobilt Android: applikationen måste deklarera kategorin LEANBACK_LAUNCHER i manifestet; minsta layoutbredd — 1920dp; touch-interaktion ersätts av D-pad-navigering; användning av Leanback-fragment rekommenderas; hårdvaruacceleration är obligatorisk. Bygget inkluderar APK/AAB med stöd för ARM64 och x86-arkitekturer. För moderna projekt från 2025 rekommenderas Jetpack Compose for TV med komponenterna TvLazyColumn, TvButton, TvCard.

Focus Engine och fokus hantering

Focus Engine — den viktigaste komponenten på varje TV-plattform, ansvarig för vilket gränssnittselement som är aktivt. På tvOS är Focus Engine inbyggt i UIKit och fungerar automatiskt. När D-pad-knappen trycks in analyserar systemet positionen för alla focusable-element, beräknar den närmaste kandidaten i tryckriktningen och flyttar smidigt fokus till det med animation (UIFocusAnimationCoordinator).

Regler för Focus Engine: systemet tar hänsyn till avståndet mellan element längs rörelseaxeln, skärningen av elementprojektioner (ett element anses vara en kandidat om dess projektion skär den aktuella fokusprojektionen), prioritering av element med samma avstånd (det närmaste i rak linje väljs). Utvecklaren kan påverka fokus med UIFocusGuide — en osynlig ledande rektangel som omdirigerar fokus till ett specifikt element vid tryck i en given riktning.

På Android TV implementeras fokus via standard Android-fokussystemet med attributen focusable och nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Animation konfigureras via StateListAnimator. Google rekommenderar att ställa in focusable på alla interaktiva element och använda nextFocus för exakt navigeringskontroll. Fokus animation är kritisk för UX — vid fokusövergång bör en mjuk skalningsanimation (1.0 → 1.05–1.2) ske med en varaktighet på 150–250 ms.

Kodexempel: Swift och Kotlin

Exempel på en enkel TV-applikation i SwiftUI för Apple TV som visar en filmlista med stöd för 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("Filmer").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 }
    }
}

Nyckelpunkter: @FocusState — spåra aktuellt fokus; .focusable() — gör elementet tillgängligt för fokus; .scaleEffect() — förstoringsanimation vid fokus, viktig för visuell återkoppling på TV.

Liknande exempel för Android TV med Leanback Library i 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) {}
}

Nyckelpunkter: BrowseSupportFragment — det huvudsakliga Leanback-fragmentet med rubriker; Presenter — abstraktion för att skapa ViewHolder, liknande RecyclerView.Adapter; ImageCardView — standardkort med bild, titel och underrubrik; isFocusable = true — obligatoriskt attribut för TV-element.