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) کے ساتھ۔ اوور اسکین (تصویر کا کچھ حصہ TV کے ذریعے کاٹا جا سکتا ہے) کی تلافی کے لیے کناروں سے 5% محفوظ علاقہ لازمی ہے۔ کوئی ٹچ اسکرین نہیں — تمام تعاملات ریموٹ یا گیم پیڈ کے ذریعے۔ فوکس ہمیشہ فعال عنصر کو نمایاں کرتا ہے۔ توانائی کی کھپت بیٹری سے محدود نہیں ہے، لیکن ایپلیکیشن کو نیند کے موڈ میں منتقلی کو صحیح طریقے سے ہینڈل کرنا چاہیے۔ Statista (2026) کے مطابق، عالمی اسمارٹ ٹی وی مارکیٹ نئے TV کے 80% سے تجاوز کر گئی ہے، جس میں Apple TV اور Android TV 250 ملین سے زیادہ ڈیوائسز پر مشتمل ہیں۔

TV ایپلیکیشنز کے زمرے: ویڈیو سروسز (Netflix, YouTube, Apple TV+), موسیقی (Spotify, Apple Music), گیمز (Apple Arcade, Google Play Games), فٹنس (Apple Fitness+, Peloton), تعلیم, خبریں, موسم, تصاویر۔ سب سے مشہور زمرہ ویڈیو سٹریمنگ ہے، جو اسمارٹ TV کے کل استعمال کے وقت کا 70% ہے۔

Apple TV (tvOS): آرکیٹیکچر

tvOS Apple TV سیٹ ٹاپ باکس کے لیے Apple کا آپریٹنگ سسٹم ہے، جو iOS پر مبنی ہے۔ پہلا ریلیز 2015 میں چوتھی نسل کے Apple TV کے ساتھ ہوا تھا۔ tvOS iOS کے ساتھ XNU کرنل، Foundation فریم ورکس، UIKit (موافقت پذیر ورژن میں) اور App Sandbox سیکیورٹی میکانزم کا اشتراک کرتا ہے۔ ڈیولپمنٹ SwiftUI یا UIKit کا استعمال کرتے ہوئے Swift میں کی جاتی ہے۔

tvOS کے اہم اجزاء:

• Focus Engine — فوکس مینجمنٹ سسٹم جو خود بخود فعال انٹرفیس عنصر کا تعین کرتا ہے
• tvOS کے لیے UIKit — 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 کا ایک ورژن ہے جو TV اور سیٹ ٹاپ باکسز کے لیے بہتر بنایا گیا ہے، پہلی بار 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_LAUNCHر زمرہ کا اعلان کرنا چاہیے؛ کم از کم لے آؤٹ چوڑائی 1920dp ہے؛ ٹچ تعامل D-pad نیویگیشن سے بدل دیا گیا ہے؛ Leanback فریگمنٹس کا استعمال تجویز کیا جاتا ہے؛ ہارڈویئر ایکسلریشن لازمی ہے۔ بلڈ میں ARM64 اور x86 آرکیٹیکچرز کے لیے سپورٹ کے ساتھ APK/AAB شامل ہے۔ 2025 سے جدید منصوبوں کے لیے، TvLazyColumn، TvButton، TvCard جیسے اجزاء کے ساتھ Jetpack Compose for TV تجویز کیا جاتا ہے۔

فوکس انجن اور فوکس مینجمنٹ

فوکس انجن — کسی بھی TV پلیٹ فارم کا ایک اہم جزو، جو اس بات کا تعین کرنے کے لیے ذمہ دار ہے کہ کون سا انٹرفیس عنصر فعال ہے۔ tvOS پر، فوکس انجن UIKit میں شامل ہے اور خود بخود کام کرتا ہے۔ جب D-pad بٹن دبایا جاتا ہے، سسٹم تمام فوکیس ایبل عناصر کی پوزیشن کا تجزیہ کرتا ہے، دباؤ کی سمت میں قریب ترین امیدوار کا حساب لگاتا ہے اور اینیمیشن (UIFocusAnimationCoordinator) کے ساتھ فوکس کو اس پر آسانی سے منتقل کرتا ہے۔

فوکس انجن کے قواعد: سسٹم حرکت کے محور کے ساتھ عناصر کے درمیان فاصلہ، عناصر کے پروجیکشنز کے تقاطع (ایک عنصر امیدوار سمجھا جاتا ہے اگر اس کا پروجیکشن موجودہ فوکس کے پروجیکشن کو کاٹتا ہے)، ایک ہی فاصلے پر عناصر کی ترجیح (سیدھی لائن میں قریب ترین کو منتخب کیا جاتا ہے) پر غور کرتا ہے۔ ڈیولپر UIFocusGuide کا استعمال کرکے فوکس کو متاثر کر سکتا ہے — ایک غیر مرئی رہنما مستطیل جو کسی مخصوص سمت میں دبانے پر فوکس کو کسی مخصوص عنصر کی طرف ری ڈائریکٹ کرتا ہے۔

Android TV پر، فوکس کو focusable اور nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) خصوصیات کے ساتھ معیاری Android فوکس سسٹم کے ذریعے لاگو کیا جاتا ہے۔ اینیمیشن StateListAnimator کے ذریعے ترتیب دی جاتی ہے۔ Google تمام انٹرایکٹو عناصر پر focusable سیٹ کرنے اور درست نیویگیشن کنٹرول کے لیے nextFocus استعمال کرنے کی سفارش کرتا ہے۔ فوکس اینیمیشن UX کے لیے اہم ہے — فوکس تبدیل ہونے پر، 150–250 ms کی مدت کے ساتھ ایک ہموار اسکیلنگ اینیمیشن (1.0 → 1.05–1.2) ہونی چاہیے۔

کوڈ کی مثالیں: Swift اور Kotlin

فوکس انجن سپورٹ کے ساتھ فلموں کی فہرست دکھانے والی Apple TV کے لیے SwiftUI میں ایک سادہ TV ایپلیکیشن کی مثال۔

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 پر بصری فیڈ بیک کے لیے اہم۔

Kotlin میں Leanback Library کے ساتھ Android TV کے لیے اسی طرح کی مثال:

// 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 — RecyclerView.Adapter کی طرح ViewHolder بنانے کے لیے ایک تجرید؛ ImageCardView — تصویر، عنوان اور ذیلی عنوان کے ساتھ معیاری کارڈ؛ isFocusable = true — TV عناصر کے لیے ایک لازمی خصوصیت۔