TV App: основе развоја за Apple TV и Android TV

Шта је TV App

TV App — апликација намењена за рад на платформама паметних телевизора: Apple TV (tvOS) и Android TV (Google TV). Кључна разлика од мобилне апликације — начин интеракције. Корисник не додирује екран, већ управља интерфејсом помоћу даљинског управљача. Сви елементи морају бити доступни кроз усмерену навигацију (D-pad): горе, доле, лево, десно и дугме за избор.

Карактеристике развоја TV App: резолуција екрана — од Full HD (1920x1080) до 4K (3840x2160) са густином xhdpi (Android) или @3x (Apple). Обавезна сигурносна зона 5% од ивица за компензацију over-scan (део слике може бити одсечен од стране телевизора). Нема екрана осетљивог на додир — све интеракције преко даљинског или гејмпада. Фокус увек истиче активан елемент. Потрошња енергије није ограничена батеријом, али апликација мора правилно да обрађује прелазак у режим спавања. Према подацима Statista (2026), глобално тржиште smart TV премашује 80% нових телевизора, при чему Apple TV и Android TV заузимају преко 250 милиона уређаја.

Категорије TV апликација: видео сервиси (Netflix, YouTube, Apple TV+), музика (Spotify, Apple Music), игре (Apple Arcade, Google Play Games), фитнес (Apple Fitness+, Peloton), образовање, вести, време, фотографије. Најпопуларнија категорија — стриминг видеа, која заузима 70% укупног времена коришћења smart TV.

Apple TV (tvOS): архитектура

tvOS — оперативни систем Apple за уређај Apple TV, заснован на iOS-у. Прво издање — 2015. године заједно са Apple TV 4. генерације. tvOS дели са iOS-ом језгро XNU, фрејмворке Foundation, UIKit (у прилагођеној верзији) и механизам безбедности App Sandbox. Развој се води у Swift-у коришћењем SwiftUI или UIKit-а.

Главне компоненте tvOS:

• Focus Engine — систем управљања фокусом који аутоматски одређује активни елемент интерфејса
• UIKit за tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator за управљање фокусом
• SwiftUI — декларативни фрејмворк са FocusState и модификатором focusable()
• TVMLKit — фрејмворк за JavaScript/TVML интерфејсе (ретко се користи у савременим пројектима)
• StoreKit — куповине у апликацији и претплате
• AVFoundation — репродукција видео и аудио садржаја са подршком за HDR и Dolby Atmos

Животни циклус tvOS апликације је сличан iOS-у: notRunning, foregroundActive, foregroundInactive, background. Карактеристика: апликација не треба да захтева позадинске дозволе без потребе — систем може принудно да заврши позадински процес. Топологија навигације се гради око UISplitViewController и UITabBarController са картицама „Почетна“, „Претрага“, „Библиотека“, „Подешавања“.

Android TV: архитектура

Android TV — верзија Android-а оптимизована за телевизоре и сет-топ-боксове, први пут представљена 2014. године. Од 2020. године постоји Google TV — надоградња преко Android TV-а са новим интерфејсом, али развој апликација се води на Android TV SDK-у, компатибилном са Google TV-ом. Главни језик — Kotlin, UI фрејмворци — Leanback Library (класични) и Jetpack Compose for TV (експериментални).

Кључне компоненте Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — креирање тастатура, даљинских и гејмпада
• MediaSession — управљање репродукцијом медијског садржаја
• Recommendations — канал препорука на главном екрану преко NotificationManager
• Leanback Preferences — екрани подешавања у TV стилу

Разлике Android TV од мобилног Android-а: апликација обавезно декларише категорију LEANBACK_LAUNCHER у манифесту; минимална ширина распореда — 1920dp; додирна интеракција замењена D-pad навигацијом; препоручује се коришћење Leanback фрагмената; хардверско убрзање је обавезно. Изградња укључује APK/AAB са подршком за архитектуре ARM64 и x86. За савремене пројекте од 2025. године препоручује се Jetpack Compose for TV са компонентама TvLazyColumn, TvButton, TvCard.

Focus Engine и управљање фокусом

Focus Engine — кључна компонента сваке TV платформе, одговорна за то који елемент интерфејса је активан. На tvOS-у, Focus Engine је уграђен у UIKit и ради аутоматски. При притиску дугмета D-pad, систем анализира положај свих focusable елемената, израчунава најближег кандидата у смеру притиска и глатко премешта фокус на њега са анимацијом (UIFocusAnimationCoordinator).

Правила Focus Engine: систем узима у обзир растојање између елемената дуж осе кретања, пресек пројекција елемената (елемент се сматра кандидатом ако његова пројекција пресеца пројекцију тренутног фокуса), приоритет елемената са истим растојањем (бира се најближи у правој линији). Програмер може да утиче на фокус помоћу UIFocusGuide — невидљивог усмеравајућег правоугаоника који преусмерава фокус на одређени елемент при притиску у задатом смеру.

На Android TV фокус се реализује кроз стандардни систем фокуса Android-а са атрибутима focusable и nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Анимација се подешава преко StateListAnimator. Google препоручује постављање focusable на све интерактивне елементе и коришћење nextFocus за прецизно управљање навигацијом. Анимација фокуса је критична за UX — при преласку фокуса треба да се деси глатка анимација скалирања (1.0 → 1.05–1.2) са трајањем од 150–250 ms.

Примери кода: Swift и Kotlin

Пример једноставне TV апликације у SwiftUI за Apple TV са приказом листе филмова и подршком за 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("Филмови").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 }
    }
}

Кључне тачке: @FocusState — праћење тренутног фокуса; .focusable() — чини елемент доступним за фокус; .scaleEffect() — анимација увећања при фокусу, важна за визуелну повратну информацију на TV.

Аналогин пример за Android TV са Leanback Library у 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) {}
}

Кључне тачке: BrowseSupportFragment — главни Leanback фрагмент са заглављима; Presenter — апстракција за креирање ViewHolder, слична RecyclerView.Adapter; ImageCardView — стандардна картица са сликом, насловом и поднасловом; isFocusable = true — обавезан атрибут за TV елементе.