TV App: conceptos básicos de desarrollo para Apple TV y Android TV

Qué es una TV App

TV App — una aplicación diseñada para funcionar en plataformas de televisores inteligentes: Apple TV (tvOS) y Android TV (Google TV). La diferencia clave con una aplicación móvil es el método de interacción. El usuario no toca la pantalla, sino que controla la interfaz con un mando a distancia. Todos los elementos deben ser accesibles mediante navegación direccional (D-pad): arriba, abajo, izquierda, derecha y botón de selección.

Características del desarrollo de TV App: la resolución de pantalla va desde Full HD (1920x1080) hasta 4K (3840x2160) con densidad xhdpi (Android) o @3x (Apple). Es obligatoria una zona segura del 5% desde los bordes para compensar el over-scan (parte de la imagen puede ser recortada por el televisor). No hay pantalla táctil — todas las interacciones son a través del mando o gamepad. El enfoque siempre resalta el elemento activo. El consumo de energía no está limitado por la batería, pero la aplicación debe manejar correctamente la transición al modo de suspensión. Según Statista (2026), el mercado global de smart TV supera el 80% de los televisores nuevos, y Apple TV y Android TV representan más de 250 millones de dispositivos.

Categorías de aplicaciones TV: servicios de video (Netflix, YouTube, Apple TV+), música (Spotify, Apple Music), juegos (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), educación, noticias, clima, fotos. La categoría más popular es la transmisión de video, que ocupa el 70% del tiempo total de uso de smart TV.

Apple TV (tvOS): arquitectura

tvOS es el sistema operativo de Apple para el Apple TV, basado en iOS. El primer lanzamiento fue en 2015 junto con el Apple TV de 4ª generación. tvOS comparte con iOS el núcleo XNU, los frameworks Foundation, UIKit (en una versión adaptada) y el mecanismo de seguridad App Sandbox. El desarrollo se realiza en Swift utilizando SwiftUI o UIKit.

Componentes principales de tvOS:

• Focus Engine — sistema de gestión de enfoque que determina automáticamente el elemento activo de la interfaz
• UIKit para tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator para la gestión del enfoque
• SwiftUI — framework declarativo con FocusState y el modificador focusable()
• TVMLKit — framework para interfaces JavaScript/TVML (rara vez usado en proyectos modernos)
• StoreKit — compras dentro de la aplicación y suscripciones
• AVFoundation — reproducción de contenido de video y audio con soporte HDR y Dolby Atmos

El ciclo de vida de una aplicación tvOS es similar al de iOS: notRunning, foregroundActive, foregroundInactive, background. Particularidad: la aplicación no debe solicitar permisos en segundo plano innecesariamente — el sistema puede finalizar forzosamente un proceso en segundo plano. La topología de navegación se construye en torno a UISplitViewController y UITabBarController con pestañas "Inicio", "Buscar", "Biblioteca", "Ajustes".

Android TV: arquitectura

Android TV es una versión de Android optimizada para televisores y decodificadores, presentada por primera vez en 2014. Desde 2020 existe Google TV — una capa sobre Android TV con una nueva interfaz, pero el desarrollo de aplicaciones se realiza con el SDK de Android TV, compatible con Google TV. El lenguaje principal es Kotlin, los frameworks de interfaz son Leanback Library (clásico) y Jetpack Compose for TV (experimental).

Componentes clave de Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — creación de teclados, mandos y gamepads
• MediaSession — gestión de reproducción de contenido multimedia
• Recommendations — canal de recomendaciones en la pantalla principal a través de NotificationManager
• Leanback Preferences — pantallas de configuración con estilo TV

Diferencias entre Android TV y Android móvil: la aplicación debe declarar la categoría LEANBACK_LAUNCHER en el manifiesto; el ancho mínimo del diseño es 1920dp; la interacción táctil se reemplaza por navegación con D-pad; se recomienda usar fragmentos Leanback; la aceleración por hardware es obligatoria. La compilación incluye APK/AAB con soporte para arquitecturas ARM64 y x86. Para proyectos modernos a partir de 2025, se recomienda Jetpack Compose for TV con componentes TvLazyColumn, TvButton, TvCard.

Focus Engine y gestión del enfoque

Focus Engine es un componente clave de cualquier plataforma TV, responsable de determinar qué elemento de la interfaz está activo. En tvOS, Focus Engine está integrado en UIKit y funciona automáticamente. Al presionar un botón del D-pad, el sistema analiza la ubicación de todos los elementos enfocables, calcula el candidato más cercano en la dirección de la pulsación y mueve suavemente el enfoque hacia él con animación (UIFocusAnimationCoordinator).

Reglas de Focus Engine: el sistema considera la distancia entre elementos a lo largo del eje de movimiento, la intersección de proyecciones de elementos (un elemento se considera candidato si su proyección intersecta la proyección del enfoque actual), prioridad para elementos a la misma distancia (se selecciona el más cercano en línea recta). El desarrollador puede influir en el enfoque usando UIFocusGuide — un rectángulo guía invisible que redirige el enfoque a un elemento específico al presionar en una dirección determinada.

En Android TV, el enfoque se implementa a través del sistema de enfoque estándar de Android con atributos focusable y nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). La animación se configura mediante StateListAnimator. Google recomienda establecer focusable en todos los elementos interactivos y usar nextFocus para un control preciso de la navegación. La animación del enfoque es crítica para la experiencia de usuario — al cambiar el enfoque, debe ocurrir una animación suave de escala (1.0 → 1.05–1.2) con una duración de 150–250 ms.

Ejemplos de código: Swift y Kotlin

Ejemplo de una aplicación TV simple en SwiftUI para Apple TV que muestra una lista de películas con soporte de 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("Películas").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 }
    }
}

Puntos clave: @FocusState — seguimiento del enfoque actual; .focusable() — hace que un elemento sea enfocable; .scaleEffect() — animación de aumento al enfocar, importante para la retroalimentación visual en TV.

Un ejemplo similar para Android TV con Leanback Library en 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) {}
}

Puntos clave: BrowseSupportFragment — el fragmento principal de Leanback con encabezados; Presenter — una abstracción para crear ViewHolder, similar a RecyclerView.Adapter; ImageCardView — tarjeta estándar con imagen, título y subtítulo; isFocusable = true — atributo obligatorio para elementos TV.