TV App: kiến thức cơ bản về phát triển cho Apple TV và Android TV

TV App là gì

TV App — ứng dụng được thiết kế để chạy trên các nền tảng TV thông minh: Apple TV (tvOS) và Android TV (Google TV). Sự khác biệt chính so với ứng dụng di động là phương thức tương tác. Người dùng không chạm vào màn hình mà điều khiển giao diện bằng điều khiển từ xa. Tất cả các thành phần phải có thể truy cập được thông qua điều hướng định hướng (D-pad): lên, xuống, trái, phải và nút chọn.

Đặc điểm phát triển TV App: độ phân giải màn hình từ Full HD (1920x1080) đến 4K (3840x2160) với mật độ xhdpi (Android) hoặc @3x (Apple). Vùng an toàn 5% từ các cạnh là bắt buộc để bù cho over-scan (một phần hình ảnh có thể bị TV cắt). Không có màn hình cảm ứng — tất cả tương tác đều qua điều khiển từ xa hoặc gamepad. Tiêu điểm luôn làm nổi bật thành phần đang hoạt động. Mức tiêu thụ điện năng không bị giới hạn bởi pin, nhưng ứng dụng phải xử lý chính xác việc chuyển sang chế độ ngủ. Theo Statista (2026), thị trường TV thông minh toàn cầu vượt quá 80% TV mới, với Apple TV và Android TV chiếm hơn 250 triệu thiết bị.

Các danh mục ứng dụng TV: dịch vụ video (Netflix, YouTube, Apple TV+), âm nhạc (Spotify, Apple Music), trò chơi (Apple Arcade, Google Play Games), thể dục (Apple Fitness+, Peloton), giáo dục, tin tức, thời tiết, ảnh. Danh mục phổ biến nhất là phát trực tiếp video, chiếm 70% tổng thời gian sử dụng TV thông minh.

Apple TV (tvOS): kiến trúc

tvOS là hệ điều hành của Apple cho hộp giải mã Apple TV, dựa trên iOS. Bản phát hành đầu tiên là vào năm 2015 cùng với Apple TV thế hệ thứ 4. tvOS chia sẻ với iOS nhân XNU, các khung Foundation, UIKit (trong phiên bản thích ứng) và cơ chế bảo mật App Sandbox. Việc phát triển được thực hiện bằng Swift với SwiftUI hoặc UIKit.

Các thành phần chính của tvOS:

• Focus Engine — hệ thống quản lý tiêu điểm tự động xác định thành phần giao diện đang hoạt động
• UIKit cho tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator để quản lý tiêu điểm
• SwiftUI — khung khai báo với FocusState và bổ ngữ focusable()
• TVMLKit — khung cho giao diện JavaScript/TVML (hiếm khi được sử dụng trong các dự án hiện đại)
• StoreKit — mua hàng trong ứng dụng và đăng ký
• AVFoundation — phát lại nội dung video và âm thanh hỗ trợ HDR và Dolby Atmos

Vòng đời của ứng dụng tvOS tương tự như iOS: notRunning, foregroundActive, foregroundInactive, background. Đặc điểm: ứng dụng không nên yêu cầu quyền nền không cần thiết — hệ thống có thể buộc kết thúc tiến trình nền. Cấu trúc điều hướng được xây dựng xung quanh UISplitViewController và UITabBarController với các tab "Trang chủ", "Tìm kiếm", "Thư viện", "Cài đặt".

Android TV: kiến trúc

Android TV là phiên bản Android được tối ưu hóa cho TV và hộp giải mã, được giới thiệu lần đầu vào năm 2014. Từ năm 2020, Google TV tồn tại — một lớp phủ trên Android TV với giao diện mới, nhưng việc phát triển ứng dụng được thực hiện trên Android TV SDK, tương thích với Google TV. Ngôn ngữ chính là Kotlin, các khung UI là Leanback Library (cổ điển) và Jetpack Compose for TV (thử nghiệm).

Các thành phần chính của Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — tạo bàn phím, điều khiển từ xa và gamepad
• MediaSession — quản lý phát lại nội dung đa phương tiện
• Recommendations — kênh đề xuất trên màn hình chính qua NotificationManager
• Leanback Preferences — màn hình cài đặt kiểu TV

Sự khác biệt giữa Android TV và Android di động: ứng dụng phải khai báo danh mục LEANBACK_LAUNCHER trong tệp kê khai; chiều rộng bố cục tối thiểu là 1920dp; tương tác cảm ứng được thay thế bằng điều hướng D-pad; nên sử dụng fragment Leanback; tăng tốc phần cứng là bắt buộc. Bản build bao gồm APK/AAB hỗ trợ kiến trúc ARM64 và x86. Đối với các dự án hiện đại từ năm 2025, Jetpack Compose for TV với các thành phần TvLazyColumn, TvButton, TvCard được khuyến nghị.

Focus Engine và quản lý tiêu điểm

Focus Engine — thành phần chính của bất kỳ nền tảng TV nào, chịu trách nhiệm xác định thành phần giao diện nào đang hoạt động. Trên tvOS, Focus Engine được tích hợp trong UIKit và hoạt động tự động. Khi nhấn nút D-pad, hệ thống phân tích vị trí của tất cả các thành phần có thể lấy tiêu điểm, tính toán ứng viên gần nhất theo hướng nhấn và di chuyển tiêu điểm đến đó một cách mượt mà với hoạt ảnh (UIFocusAnimationCoordinator).

Quy tắc của Focus Engine: hệ thống xem xét khoảng cách giữa các thành phần dọc theo trục chuyển động, giao điểm của hình chiếu thành phần (một thành phần được coi là ứng viên nếu hình chiếu của nó cắt hình chiếu của tiêu điểm hiện tại), ưu tiên cho các thành phần có cùng khoảng cách (thành phần gần nhất theo đường thẳng được chọn). Nhà phát triển có thể ảnh hưởng đến tiêu điểm bằng UIFocusGuide — một hình chữ nhật hướng dẫn vô hình chuyển hướng tiêu điểm đến một thành phần cụ thể khi nhấn theo một hướng nhất định.

Trên Android TV, tiêu điểm được triển khai thông qua hệ thống tiêu điểm tiêu chuẩn của Android với các thuộc tính focusable và nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Hoạt ảnh được cấu hình thông qua StateListAnimator. Google khuyến nghị đặt focusable trên tất cả các thành phần tương tác và sử dụng nextFocus để kiểm soát điều hướng chính xác. Hoạt ảnh tiêu điểm rất quan trọng đối với trải nghiệm người dùng — khi tiêu điểm thay đổi, hoạt ảnh thu phóng mượt mà (1.0 → 1.05–1.2) sẽ diễn ra với thời lượng 150–250 ms.

Ví dụ mã: Swift và Kotlin

Ví dụ về ứng dụng TV đơn giản trong SwiftUI cho Apple TV hiển thị danh sách phim với hỗ trợ 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("Phim").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 }
    }
}

Các điểm chính: @FocusState — theo dõi tiêu điểm hiện tại; .focusable() — làm cho thành phần có thể lấy tiêu điểm; .scaleEffect() — hoạt ảnh phóng to khi lấy tiêu điểm, quan trọng để phản hồi trực quan trên TV.

Ví dụ tương tự cho Android TV với Leanback Library trong 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) {}
}

Các điểm chính: BrowseSupportFragment — fragment Leanback chính với tiêu đề; Presenter — một lớp trừu tượng để tạo ViewHolder, tương tự RecyclerView.Adapter; ImageCardView — thẻ tiêu chuẩn với hình ảnh, tiêu đề và phụ đề; isFocusable = true — thuộc tính bắt buộc cho thành phần TV.