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 елементи.