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 สำหรับกล่องรับสัญญาณ Apple TV ซึ่งใช้พื้นฐานจาก iOS การเปิดตัวครั้งแรกในปี 2015 พร้อมกับ Apple TV รุ่นที่ 4 tvOS แบ่งปันเคอร์เนล XNU, เฟรมเวิร์ก Foundation, UIKit (ในเวอร์ชันที่ปรับเปลี่ยน) และกลไกความปลอดภัย App Sandbox กับ iOS การพัฒนาทำได้ด้วย 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 เฟรมเวิร์ก 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 fragment; การเร่งด้วยฮาร์ดแวร์เป็นสิ่งจำเป็น การ build รวม APK/AAB ที่รองรับสถาปัตยกรรม ARM64 และ x86 สำหรับโปรเจกต์สมัยใหม่ตั้งแต่ปี 2025 แนะนำให้ใช้ Jetpack Compose for TV ที่มีคอมโพเนนต์ TvLazyColumn, TvButton, TvCard

Focus Engine และการจัดการโฟกัส

Focus Engine — คอมโพเนนต์สำคัญของแพลตฟอร์ม TV ใดๆ ที่รับผิดชอบในการกำหนดว่าองค์ประกอบอินเทอร์เฟซใดกำลังทำงานอยู่ บน tvOS Focus Engine ถูกฝังอยู่ใน UIKit และทำงานโดยอัตโนมัติ เมื่อกดปุ่ม D-pad ระบบจะวิเคราะห์ตำแหน่งขององค์ประกอบที่สามารถโฟกัสได้ทั้งหมด คำนวณตัวเลือกที่ใกล้ที่สุดในทิศทางที่กด และย้ายโฟกัสไปยังองค์ประกอบนั้นอย่างราบรื่นพร้อมแอนิเมชัน (UIFocusAnimationCoordinator)

กฎของ Focus Engine: ระบบพิจารณาระยะห่างระหว่างองค์ประกอบตามแกนเคลื่อนที่ จุดตัดของการฉายภาพขององค์ประกอบ (องค์ประกอบถือเป็นตัวเลือกหากการฉายภาพตัดกับการฉายภาพของโฟกัสปัจจุบัน) ลำดับความสำคัญขององค์ประกอบที่มีระยะทางเท่ากัน (เลือกองค์ประกอบที่ใกล้ที่สุดในเส้นตรง) นักพัฒนาสามารถมีอิทธิพลต่อโฟกัสโดยใช้ UIFocusGuide — สี่เหลี่ยมนำทางที่มองไม่เห็นซึ่งเปลี่ยนเส้นทางโฟกัสไปยังองค์ประกอบเฉพาะเมื่อกดในทิศทางที่กำหนด

บน Android TV โฟกัสถูกนำไปใช้ผ่านระบบโฟกัสมาตรฐานของ Android ด้วยแอตทริบิวต์ focusable และ nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight) แอนิเมชันถูกกำหนดค่าผ่าน StateListAnimator Google แนะนำให้ตั้งค่า focusable บนองค์ประกอบแบบโต้ตอบทั้งหมด และใช้ nextFocus เพื่อการควบคุมการนำทางที่แม่นยำ แอนิเมชันโฟกัส มีความสำคัญต่อประสบการณ์ผู้ใช้ — เมื่อโฟกัสเปลี่ยนแปลง ควรมีแอนิเมชันการปรับขนาดที่ราบรื่น (1.0 → 1.05–1.2) ด้วยระยะเวลา 150–250 มิลลิวินาที

ตัวอย่างโค้ด: 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() — แอนิเมชันขยายเมื่อโฟกัส สำคัญสำหรับการตอบกลับทางภาพบนทีวี

ตัวอย่างที่คล้ายกันสำหรับ 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 — แอตทริบิวต์บังคับสำหรับองค์ประกอบทีวี