تطبيق التلفاز: أساسيات التطوير لـ Apple TV و Android TV

ما هو تطبيق التلفاز

تطبيق التلفاز — تطبيق مصمم للعمل على منصات التلفزيونات الذكية: Apple TV (tvOS) و Android TV (Google TV). الفرق الرئيسي عن التطبيق المحمول هو طريقة التفاعل. المستخدم لا يلمس الشاشة، بل يتحكم في الواجهة باستخدام جهاز التحكم عن بُعد. يجب أن تكون جميع العناصر قابلة للوصول عبر التنقل الاتجاهي (D-pad): لأعلى، لأسفل، لليسار، لليمين وزر التحديد.

ميزات تطوير تطبيق التلفاز: دقة الشاشة تتراوح من Full HD (1920x1080) إلى 4K (3840x2160) بكثافة xhdpi (Android) أو @3x (Apple). منطقة آمنة بنسبة 5% من الحواف إلزامية لتعويض over-scan (قد يتم قص جزء من الصورة بواسطة التلفزيون). لا توجد شاشة لمس — جميع التفاعلات عبر جهاز التحكم أو لوحة الألعاب. التركيز دائمًا يسلط الضوء على العنصر النشط. استهلاك الطاقة غير محدود بالبطارية، لكن يجب على التطبيق التعامل بشكل صحيح مع الانتقال إلى وضع السكون. وفقًا لـ Statisa (2026)، تتجاوز حصة السوق العالمية للتلفزيونات الذكية 80% من التلفزيونات الجديدة، و Apple TV و Android TV يمثلان أكثر من 250 مليون جهاز.

فئات تطبيقات التلفاز: خدمات الفيديو (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، وأطر واجهة المستخدم هي 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؛ تسريع العتاد إلزامي. يتضمن البناء APK/AAB مع دعم بنى ARM64 و x86. للمشاريع الحديثة من 2025، يُوصى باستخدام Jetpack Compose for TV مع مكونات TvLazyColumn, TvButton, TvCard.

محرك التركيز وإدارة التركيز

محرك التركيز — مكون رئيسي لأي منصة تلفاز، مسؤول عن تحديد عنصر الواجهة النشط. على tvOS، محرك التركيز مدمج في UIKit ويعمل تلقائيًا. عند الضغط على زر D-pad، يحلل النظام موقع جميع العناصر القابلة للتركيز، ويحسب أقرب مرشح في اتجاه الضغط، وينقل التركيز إليه بسلاسة مع حركة (UIFocusAnimationCoordinator).

قواعد محرك التركيز: يأخذ النظام في الاعتبار المسافة بين العناصر على طول محور الحركة، وتقاطع إسقاطات العناصر (يعتبر العنصر مرشحًا إذا كان إسقاطه يتقاطع مع إسقاط التركيز الحالي)، وأولوية العناصر على نفس المسافة (يُختار الأقرب في خط مستقيم). يمكن للمطور التأثير على التركيز باستخدام UIFocusGuide — مستطيل توجيه غير مرئي يعيد توجيه التركيز إلى عنصر معين عند الضغط في اتجاه محدد.

على Android TV، يتم تنفيذ التركيز من خلال نظام التركيز القياسي لـ Android مع سمات focusable و nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). يتم تكوين الحركة عبر StateListAnimator. توصي Google بتعيين focusable على جميع العناصر التفاعلية واستخدام nextFocus للتحكم الدقيق في التنقل. حركة التركيز حاسمة لتجربة المستخدم — عند تغيير التركيز، يجب أن تحدث حركة سلسة للقياس (1.0 ← 1.05–1.2) بمدة 150–250 مللي ثانية.

أمثلة التعليمات البرمجية: Swift و Kotlin

مثال لتطبيق تلفاز بسيط في SwiftUI لـ Apple 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() — حركة التكبير عند التركيز، مهمة للتغذية الراجعة البصرية على التلفاز.

مثال مماثل لـ 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 — سمة إلزامية لعناصر التلفاز.