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; touch-взаємодія замінена на D-pad навігацію; рекомендується використовувати Leanback-фрагменти; hardware-прискорення обов'язкове. Збірка включає 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 мс.

Приклади коду: 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-елементів.