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 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 का एक संस्करण है जो टीवी और सेट-टॉप बॉक्स के लिए अनुकूलित है, पहली बार 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 — टीवी-शैली सेटिंग्स स्क्रीन

Android TV और मोबाइल Android के बीच अंतर: एप्लिकेशन को मेनिफ़ेस्ट में LEANBACK_LAUNCHER श्रेणी घोषित करनी चाहिए; न्यूनतम लेआउट चौड़ाई 1920dp है; टच इंटरैक्शन को D-pad नेविगेशन से बदल दिया गया है; Leanback फ़्रैगमेंट का उपयोग अनुशंसित है; हार्डवेयर त्वरण अनिवार्य है। बिल्ड में ARM64 और x86 आर्किटेक्चर के समर्थन के साथ APK/AAB शामिल है। 2025 से आधुनिक परियोजनाओं के लिए, TvLazyColumn, TvButton, TvCard जैसे घटकों के साथ Jetpack Compose for TV की अनुशंसा की जाती है।

फोकस इंजन और फोकस प्रबंधन

फोकस इंजन — किसी भी टीवी प्लेटफ़ॉर्म का एक मुख्य घटक, जो यह निर्धारित करने के लिए जिम्मेदार है कि कौन सा इंटरफ़ेस तत्व सक्रिय है। tvOS पर, फोकस इंजन UIKit में निर्मित है और स्वचालित रूप से काम करता है। जब D-pad बटन दबाया जाता है, तो सिस्टम सभी फोकसेबल तत्वों की स्थिति का विश्लेषण करता है, दबाव की दिशा में निकटतम उम्मीदवार की गणना करता है, और एनिमेशन (UIFocusAnimationCoordinator) के साथ फोकस को आसानी से उस पर ले जाता है।

फोकस इंजन के नियम: सिस्टम गति की धुरी के साथ तत्वों के बीच की दूरी, तत्व प्रक्षेपणों के प्रतिच्छेदन (एक तत्व उम्मीदवार माना जाता है यदि इसका प्रक्षेपण वर्तमान फोकस के प्रक्षेपण को काटता है), समान दूरी वाले तत्वों की प्राथमिकता (सीधी रेखा में निकटतम चुना जाता है) को ध्यान में रखता है। डेवलपर UIFocusGuide का उपयोग करके फोकस को प्रभावित कर सकता है — एक अदृश्य मार्गदर्शक आयत जो किसी निश्चित दिशा में दबाने पर फोकस को एक विशिष्ट तत्व पर पुनर्निर्देशित करता है।

Android TV पर, फोकस को focusable और nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) विशेषताओं के साथ मानक Android फोकस प्रणाली के माध्यम से कार्यान्वित किया जाता है। एनिमेशन StateListAnimator के माध्यम से कॉन्फ़िगर किया जाता है। Google सभी इंटरैक्टिव तत्वों पर focusable सेट करने और सटीक नेविगेशन नियंत्रण के लिए nextFocus का उपयोग करने की अनुशंसा करता है। फोकस एनिमेशन UX के लिए महत्वपूर्ण है — फोकस बदलने पर, 150–250 मिलीसेकंड की अवधि के साथ एक सहज स्केलिंग एनिमेशन (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() — फोकस करने पर ज़ूम एनिमेशन, टीवी पर दृश्य प्रतिक्रिया के लिए महत्वपूर्ण।

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 — टीवी तत्वों के लिए अनिवार्य विशेषता।