TV App: mga batayan ng pag-develop para sa Apple TV at Android TV

Ano ang TV App

TV App — isang application na idinisenyo upang tumakbo sa mga platform ng smart TV: Apple TV (tvOS) at Android TV (Google TV). Ang pangunahing pagkakaiba mula sa mobile app — ang paraan ng pakikipag-ugnayan. Ang gumagamit ay hindi humahawak sa screen, ngunit kinokontrol ang interface gamit ang remote. Ang lahat ng elemento ay dapat na ma-access sa pamamagitan ng direksyonal na nabigasyon (D-pad): pataas, pababa, kaliwa, kanan at pindutan ng pagpili.

Mga katangian ng pag-develop ng TV App: resolusyon ng screen — mula Full HD (1920x1080) hanggang 4K (3840x2160) na may densidad xhdpi (Android) o @3x (Apple). Mandatory ang ligtas na sona na 5% mula sa mga gilid para sa kompensasyon ng over-scan (bahagi ng imahe ay maaaring maputol ng TV). Walang touch screen — lahat ng pakikipag-ugnayan sa pamamagitan ng remote o gamepad. Palaging naka-highlight ang aktibong elemento ng focus. Ang konsumo ng kuryente ay hindi limitado ng baterya, ngunit ang application ay dapat na wastong pangasiwaan ang paglipat sa sleep mode. Ayon sa Statista (2026), ang pandaigdigang merkado ng smart TV ay lumalampas sa 80% ng mga bagong TV, kung saan ang Apple TV at Android TV ay sumasakop ng higit sa 250 milyong device.

Mga kategorya ng TV application: serbisyo ng video (Netflix, YouTube, Apple TV+), musika (Spotify, Apple Music), laro (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), edukasyon, balita, panahon, larawan. Ang pinakasikat na kategorya — streaming ng video, na sumasakop sa 70% ng kabuuang oras ng paggamit ng smart TV.

Apple TV (tvOS): arkitektura

tvOS — operating system ng Apple para sa Apple TV device, batay sa iOS. Unang paglabas — 2015 kasama ang Apple TV ika-4 na henerasyon. Ibinabahagi ng tvOS sa iOS ang kernel XNU, mga framework ng Foundation, UIKit (sa inangkop na bersyon) at mekanismo ng seguridad App Sandbox. Ang pag-develop ay ginagawa sa Swift gamit ang SwiftUI o UIKit.

Mga pangunahing component ng tvOS:

• Focus Engine — sistema ng pamamahala ng focus na awtomatikong tinutukoy ang aktibong elemento ng interface
• UIKit para sa tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator para sa pamamahala ng focus
• SwiftUI — deklaratibong framework na may FocusState at focusable() modifier
• TVMLKit — framework para sa JavaScript/TVML interfaces (bihira gamitin sa modernong proyekto)
• StoreKit — mga pagbili sa loob ng application at subscription
• AVFoundation — pag-playback ng video at audio content na may suporta para sa HDR at Dolby Atmos

Ikot ng buhay ng tvOS application ay katulad ng iOS: notRunning, foregroundActive, foregroundInactive, background. Katangian: hindi dapat humiling ang application ng mga background permission nang walang pangangailangan — maaaring puwersahang tapusin ng system ang background process. Ang topolohiya ng nabigasyon ay binuo sa paligid ng UISplitViewController at UITabBarController na may mga tab na "Home", "Search", "Library", "Settings".

Android TV: arkitektura

Android TV — bersyon ng Android na na-optimize para sa mga TV at set-top box, unang ipinakilala noong 2014. Mula noong 2020 mayroong Google TV — isang layer sa ibabaw ng Android TV na may bagong interface, ngunit ang pag-develop ng application ay ginagawa sa Android TV SDK, na katugma sa Google TV. Pangunahing wika — Kotlin, UI frameworks — Leanback Library (klasiko) at Jetpack Compose for TV (eksperimental).

Mga pangunahing component ng Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — paggawa ng mga keyboard, remote at gamepad
• MediaSession — pamamahala ng pag-playback ng media content
• Recommendations — channel ng rekomendasyon sa home screen sa pamamagitan ng NotificationManager
• Leanback Preferences — screen ng mga setting sa TV-style

Mga pagkakaiba ng Android TV mula sa mobile Android: mandatoryong ideklara ng application ang kategoryang LEANBACK_LAUNCHER sa manifest; minimum na lapad ng layout — 1920dp; touch interaction ay pinalitan ng D-pad navigation; inirerekomenda ang paggamit ng Leanback fragments; mandatory ang hardware acceleration. Kasama sa build ang APK/AAB na may suporta para sa ARM64 at x86 architectures. Para sa modernong proyekto mula 2025, inirerekomenda ang Jetpack Compose for TV na may mga component na TvLazyColumn, TvButton, TvCard.

Focus Engine at pamamahala ng focus

Focus Engine — pangunahing component ng bawat TV platform, responsable kung aling elemento ng interface ang aktibo. Sa tvOS, ang Focus Engine ay naka-embed sa UIKit at awtomatikong gumagana. Kapag pinindot ang D-pad button, sinusuri ng system ang posisyon ng lahat ng focusable na elemento, kinakalkula ang pinakamalapit na kandidato sa direksyon ng pagpindot at inililipat ang focus dito nang maayos na may animation (UIFocusAnimationCoordinator).

Mga patakaran ng Focus Engine: isinasaalang-alang ng system ang distansya sa pagitan ng mga elemento sa axis ng paggalaw, interseksyon ng projection ng mga elemento (ang isang elemento ay itinuturing na kandidato kung ang projection nito ay bumalandra sa projection ng kasalukuyang focus), priyoridad ng mga elemento na may parehong distansya (pinili ang pinakamalapit sa tuwid na linya). Maaaring impluwensyahan ng developer ang focus gamit ang UIFocusGuide — isang hindi nakikitang gabay na parihaba na nagre-redirect ng focus sa isang partikular na elemento kapag pinindot sa isang tiyak na direksyon.

Sa Android TV ang focus ay ipinatupad sa pamamagitan ng standard na Android focus system na may mga atributong focusable at nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Ang animation ay naka-configure sa pamamagitan ng StateListAnimator. Inirerekomenda ng Google na itakda ang focusable sa lahat ng interactive na elemento at gamitin ang nextFocus para sa tumpak na kontrol ng nabigasyon. Animation ng focus ay kritikal para sa UX — sa paglipat ng focus, dapat maganap ang isang maayos na scale animation (1.0 → 1.05–1.2) na may tagal na 150–250 ms.

Mga halimbawa ng code: Swift at Kotlin

Halimbawa ng isang simpleng TV application sa SwiftUI para sa Apple TV na nagpapakita ng listahan ng mga pelikula at suporta para sa 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("Mga Pelikula").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 }
    }
}

Mga pangunahing punto: @FocusState — pagsubaybay sa kasalukuyang focus; .focusable() — ginagawang accessible ang elemento para sa focus; .scaleEffect() — animation ng pagpapalaki sa focus, mahalaga para sa visual na feedback sa TV.

Katulad na halimbawa para sa Android TV na may Leanback Library sa 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) {}
}

Mga pangunahing punto: BrowseSupportFragment — pangunahing fragment ng Leanback na may mga heading; Presenter — abstraction para sa paggawa ng ViewHolder, katulad ng RecyclerView.Adapter; ImageCardView — standard na card na may larawan, pamagat at subtitle; isFocusable = true — mandatoryong atributo para sa mga TV elemento.