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 (μέρος της εικόνας μπορεί να κοπεί από την τηλεόραση). Δεν υπάρχει οθόνη αφής — όλες οι αλληλεπιδράσεις μέσω τηλεχειριστηρίου ή gamepad. Η εστίαση τονίζει πάντα το ενεργό στοιχείο. Η κατανάλωση ενέργειας δεν περιορίζεται από μπαταρία, αλλά η εφαρμογή πρέπει να διαχειρίζεται σωστά τη μετάβαση σε κατάσταση αναστολής. Σύμφωνα με τη Statista (2026), η παγκόσμια αγορά smart TV ξεπερνά το 80% των νέων τηλεοράσεων, με τα Apple TV και Android TV να καλύπτουν πάνω από 250 εκατομμύρια συσκευές.

Κατηγορίες εφαρμογών TV: υπηρεσίες βίντεο (Netflix, YouTube, Apple TV+), μουσική (Spotify, Apple Music), παιχνίδια (Apple Arcade, Google Play Games), γυμναστική (Apple Fitness+, Peloton), εκπαίδευση, ειδήσεις, καιρός, φωτογραφίες. Η πιο δημοφιλής κατηγορία — ροή βίντεο, που καταλαμβάνει το 70% του συνολικού χρόνου χρήσης smart TV.

Apple TV (tvOS): αρχιτεκτονική

tvOS — το λειτουργικό σύστημα της Apple για τη συσκευή Apple TV, βασισμένο στο iOS. Πρώτη κυκλοφορία — 2015 μαζί με το Apple TV 4ης γενιάς. Το 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 βελτιστοποιημένη για τηλεοράσεις και set-top box, που παρουσιάστηκε για πρώτη φορά το 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 — δημιουργία πληκτρολογίων, τηλεχειριστηρίων και gamepad
• MediaSession — διαχείριση αναπαραγωγής περιεχομένου πολυμέσων
• Recommendations — κανάλι προτάσεων στην αρχική οθόνη μέσω NotificationManager
• Leanback Preferences — οθόνες ρυθμίσεων σε στυλ TV

Διαφορές Android TV από το κινητό Android: η εφαρμογή δηλώνει υποχρεωτικά την κατηγορία LEANBACK_LAUNCHER στο manifest; ελάχιστο πλάτος διάταξης — 1920dp; η αλληλεπίδραση αφής αντικαθίσταται από πλοήγηση D-pad; συνιστάται η χρήση Leanback fragment; η επιτάχυνση υλικού είναι υποχρεωτική. Η δημιουργία περιλαμβάνει 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 ms.

Παραδείγματα κώδικα: 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 — το κύριο fragment Leanback με επικεφαλίδες; Presenter — αφαίρεση για δημιουργία ViewHolder, παρόμοια με RecyclerView.Adapter; ImageCardView — τυπική κάρτα με εικόνα, τίτλο και υπότιτλο; isFocusable = true — υποχρεωτικό χαρακτηριστικό για στοιχεία TV.