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("Movies").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-элементов.