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)، بازار جهانی تلویزیون هوشمند بیش از 80٪ تلویزیون‌های جدید را شامل می‌شود، به طوری که Apple TV و Android TV بیش از 250 میلیون دستگاه را پوشش می‌دهند.

دسته‌بندی برنامه‌های TV: سرویس‌های ویدیویی (Netflix, YouTube, Apple TV+)، موسیقی (Spotify, Apple Music)، بازی‌ها (Apple Arcade, Google Play Games)، تناسب اندام (Apple Fitness+, Peloton)، آموزش، اخبار، آب و هوا، عکس. محبوب‌ترین دسته — پخش ویدیو، که 70٪ از کل زمان استفاده از تلویزیون هوشمند را تشکیل می‌دهد.

Apple TV (tvOS): معماری

tvOS — سیستم عامل Apple برای دستگاه Apple TV، مبتنی بر iOS. اولین انتشار — سال 2015 به همراه Apple TV نسل چهارم. 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 میلی‌ثانیه باید رخ دهد.

نمونه کدها: 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.