TV App: Apple TV ve Android TV için geliştirme temelleri

TV App Nedir

TV App — akıllı TV platformlarında çalışmak üzere tasarlanmış bir uygulamadır: Apple TV (tvOS) ve Android TV (Google TV). Mobil uygulamadan temel farkı etkileşim yöntemidir. Kullanıcı ekrana dokunmaz, arayüzü uzaktan kumanda ile kontrol eder. Tüm öğeler yönlü navigasyon (D-pad: yukarı, aşağı, sol, sağ ve seçim düğmesi) ile erişilebilir olmalıdır.

TV App geliştirmenin özellikleri: ekran çözünürlüğü Full HD (1920x1080)'den 4K (3840x2160)'ya kadar, xhdpi yoğunluğu (Android) veya @3x (Apple) ile. Over-scan'ı (görüntünün bir kısmı TV tarafından kesilebilir) telafi etmek için kenarlardan %5 güvenli bölge zorunludur. Dokunmatik ekran yoktur — tüm etkileşimler uzaktan kumanda veya gamepad aracılığıyla yapılır. Odak her zaman aktif öğeyi vurgular. Güç tüketimi pil ile sınırlı değildir, ancak uygulamanın uyku moduna geçişi doğru şekilde ele alması gerekir. Statista'ya (2026) göre, küresel akıllı TV pazarı yeni TV'lerin %80'ini aşmakta olup, Apple TV ve Android TV 250 milyondan fazla cihazı temsil etmektedir.

TV uygulamalarının kategorileri: video hizmetleri (Netflix, YouTube, Apple TV+), müzik (Spotify, Apple Music), oyunlar (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), eğitim, haberler, hava durumu, fotoğraflar. En popüler kategori, akıllı TV kullanım süresinin %70'ini oluşturan video akışıdır.

Apple TV (tvOS): Mimari

tvOS, iOS tabanlı Apple TV set üstü kutusu için Apple'ın işletim sistemidir. İlk sürüm 2015'te 4. nesil Apple TV ile birlikte yayınlandı. tvOS, iOS ile XNU çekirdeğini, Foundation çerçevelerini, UIKit'i (uyarlanmış bir sürümde) ve App Sandbox güvenlik mekanizmasını paylaşır. Geliştirme, SwiftUI veya UIKit kullanılarak Swift ile yapılır.

tvOS'un temel bileşenleri:

• Focus Engine — aktif arayüz öğesini otomatik olarak belirleyen odak yönetim sistemi
• tvOS için UIKit — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator (odak yönetimi için)
• SwiftUI — FocusState ve focusable() değiştiricisi ile bildirimsel çerçeve
• TVMLKit — JavaScript/TVML arayüzleri için çerçeve (modern projelerde nadiren kullanılır)
• StoreKit — uygulama içi satın almalar ve abonelikler
• AVFoundation — HDR ve Dolby Atmos desteği ile video ve ses içeriği oynatma

tvOS uygulamasının yaşam döngüsü iOS'a benzer: notRunning, foregroundActive, foregroundInactive, background. Özellik: uygulama gereksiz yere arka plan izinleri istememelidir — sistem bir arka plan işlemini zorla sonlandırabilir. Gezinme topolojisi, "Ana Sayfa", "Ara", "Kitaplık", "Ayarlar" sekmeleri ile UISplitViewController ve UITabBarController etrafında oluşturulur.

Android TV: Mimari

Android TV, TV'ler ve set üstü kutular için optimize edilmiş, ilk olarak 2014'te tanıtılan bir Android sürümüdür. 2020'den beri Google TV mevcuttur — yeni bir arayüze sahip Android TV üzerinde bir katman, ancak uygulama geliştirme, Google TV ile uyumlu Android TV SDK'sında yapılır. Ana dil Kotlin'dir, UI çerçeveleri Leanback Library (klasik) ve Jetpack Compose for TV (deneysel)'dir.

Android TV'nin temel bileşenleri:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — klavyeler, uzaktan kumandalar ve gamepad'ler oluşturma
• MediaSession — medya içeriği oynatma yönetimi
• Recommendations — NotificationManager aracılığıyla ana ekranda öneri kanalı
• Leanback Preferences — TV tarzı ayar ekranları

Android TV ile mobil Android arasındaki farklar: uygulama manifestoda LEANBACK_LAUNCHER kategorisini bildirmelidir; minimum düzen genişliği 1920dp'dir; dokunmatik etkileşim D-pad navigasyonu ile değiştirilmiştir; Leanback fragmentlerinin kullanılması önerilir; donanım hızlandırma zorunludur. Yapı, ARM64 ve x86 mimarilerini destekleyen APK/AAB içerir. 2025'ten itibaren modern projeler için TvLazyColumn, TvButton, TvCard gibi bileşenlerle Jetpack Compose for TV önerilir.

Focus Engine ve Odak Yönetimi

Focus Engine — hangi arayüz öğesinin aktif olduğunu belirlemekten sorumlu, herhangi bir TV platformunun temel bir bileşenidir. tvOS'ta Focus Engine, UIKit'e entegre edilmiştir ve otomatik olarak çalışır. Bir D-pad düğmesine basıldığında, sistem tüm odaklanabilir öğelerin konumunu analiz eder, basış yönündeki en yakın adayı hesaplar ve odağı animasyonla (UIFocusAnimationCoordinator) sorunsuz bir şekilde ona taşır.

Focus Engine kuralları: sistem, hareket ekseni boyunca öğeler arasındaki mesafeyi, öğe projeksiyonlarının kesişimini (bir öğenin projeksiyonu mevcut odağın projeksiyonu ile kesişiyorsa aday olarak kabul edilir), aynı mesafedeki öğelerin önceliğini (düz çizgide en yakın olan seçilir) dikkate alır. Geliştirici, UIFocusGuide kullanarak odağı etkileyebilir — belirli bir yönde basıldığında odağı belirli bir öğeye yönlendiren görünmez bir kılavuz dikdörtgen.

Android TV'de odak, focusable ve nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) nitelikleriyle standart Android odak sistemi aracılığıyla uygulanır. Animasyon StateListAnimator aracılığıyla yapılandırılır. Google, tüm etkileşimli öğelerde focusable ayarlanmasını ve hassas navigasyon kontrolü için nextFocus kullanılmasını önerir. Odak animasyonu kullanıcı deneyimi için kritiktir — odak değiştiğinde, 150–250 ms süreyle sorunsuz bir ölçekleme animasyonu (1.0 → 1.05–1.2) gerçekleşmelidir.

Kod Örnekleri: Swift ve Kotlin

Focus Engine desteğiyle film listesi görüntüleyen Apple TV için SwiftUI'da basit bir TV uygulaması örneği.

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("Filmler").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 }
    }
}

Önemli noktalar: @FocusState — mevcut odağı izleme; .focusable() — bir öğeyi odaklanabilir yapar; .scaleEffect() — odaklandığında yakınlaştırma animasyonu, TV'de görsel geri bildirim için önemlidir.

Kotlin'de Leanback Library ile Android TV için benzer bir örnek:

// 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) {}
}

Önemli noktalar: BrowseSupportFragment — başlıklarla birlikte ana Leanback fragmenti; Presenter — RecyclerView.Adapter'a benzer şekilde ViewHolder oluşturmak için bir soyutlama; ImageCardView — resim, başlık ve alt başlık içeren standart kart; isFocusable = true — TV öğeleri için zorunlu bir nitelik.