共用方式為


Hello, tvOS 快速入門指南

本指南會逐步引導您建立第一個 Xamarin.tvOS 應用程式及其開發工具鏈。 它也會介紹 Xamarin 設計工具,其會將 UI 控件公開給程式代碼,並說明如何建置、執行及測試 Xamarin.tvOS 應用程式。

警告

iOS 設計工具在 Visual Studio 2019 16.8 版和 Visual Studio 2019 for Mac 8.8 版中已被取代,並在 Visual Studio 2019 16.9 版和 Visual Studio for Mac 8.9 版中移除。 建置 iOS 使用者介面的建議方式是直接在執行 Xcode 介面產生器的 Mac 上。 如需詳細資訊,請參閱 使用 Xcode 設計使用者介面。

蘋果已經發佈了第5代蘋果電視,蘋果電視4K,運行tvOS 11。

Apple TV 平台開放給開發人員,讓他們能夠建立豐富的沉浸式應用程式,並透過Apple TV的內建App Store加以發行。

如果您熟悉 Xamarin.iOS 開發,您應該會發現轉換到 tvOS 相當簡單。 不過,大部分的 API 和功能都相同,但許多常見的 API 無法使用(例如 WebKit)。 此外,使用 Siri 遠程會帶來一些設計挑戰,這些挑戰不在觸控螢幕型 iOS 裝置中。

本指南將介紹如何在 Xamarin 應用程式中使用 tvOS。 如需tvOS的詳細資訊,請參閱Apple的 開始使用Apple TV 4K 檔。

概觀

Xamarin.tvOS 可讓您使用在 Swift (或Objective-C) 和 Xcode開發時所使用的相同 OS X 連結庫和介面控件,在 C# 和 .NET 中開發完全原生的 Apple TV 應用程式。

此外,由於 Xamarin.tvOS 應用程式是以 C# 和 .NET 撰寫,因此常見的後端程式代碼可以與 Xamarin.iOS、Xamarin.Android 和 Xamarin.Mac 應用程式共用;同時在每個平臺上提供原生體驗。

本文將介紹使用 Xamarin.tvOS 和 Visual Studio 建立 Apple TV 應用程式所需的重要概念,方法是逐步引導您建置基本的 Hello, tvOS 應用程式,以計算按下按鈕的次數:

範例應用程式執行

我們將討論下列概念:

  • Visual Studio for Mac – Visual Studio for Mac 簡介,以及如何建立 Xamarin.tvOS 應用程式。
  • Xamarin.tvOS 應用程式的 剖析 – Xamarin.tvOS 應用程式所包含的內容。
  • 建立使用者介面 – 如何使用 Xamarin Designer for iOS 來建立使用者介面。
  • 部署和測試 – 如何在 tvOS 模擬器和實際 tvOS 硬體上執行及測試您的應用程式。

在 Visual Studio for Mac 中啟動新的 Xamarin.tvOS 應用程式

如上所述,我們將建立名為 Hello-tvOS 的 Apple TV 應用程式,將單一按鈕和標籤新增至主畫面。 按一下按鈕時,標籤將會顯示已按下的次數。

若要開始使用,讓我們執行下列動作:

  1. 啟動 Visual Studio for Mac:

    Visual Studio for Mac

  2. 按兩下畫面左上角的[ 新增方案》... ] 連結,以開啟 [ 新增專案 ] 對話框。

  3. 選取 tvOS> 應用程式>單一檢視應用程式,然後按下一: 按鈕:

    選取[單一檢視應用程式]

  4. 針對 [應用程式名稱] 輸入 Hello, tvOS ,輸入您的組織識別碼,然後按下一步] 按鈕:

    輸入 Hello, tvOS

  5. 輸入 Hello_tvOS [ 項目名稱 ],然後按兩下 [ 建立] 按鈕:

    輸入 HellotvOS

Visual Studio for Mac 將會建立新的 Xamarin.tvOS 應用程式,並顯示新增至應用程式解決方案的預設檔案:

默認檔案檢視

Visual Studio for Mac 使用方案和專案的方式與 Visual Studio 完全相同。 解決方案是可以保存一或多個專案的容器;專案可以包含應用程式、支持連結庫、測試應用程式等。在此情況下,Visual Studio for Mac 已為您建立解決方案和應用程式專案。

如果您想要,您可以建立一或多個包含一般共用程式代碼的程式代碼庫專案。 應用程式專案可以取用這些連結庫專案,也可以與其他 Xamarin.tvOS 應用程式專案共用(或 Xamarin.iOS、Xamarin.Android 和 Xamarin.Mac,以程式代碼類型為基礎),就像您建置標準 .NET 應用程式一樣。

Xamarin.tvOS 應用程式的剖析

如果您熟悉 iOS 程式設計,您會在這裡注意到很多相似之處。 事實上,tvOS 9 是 iOS 9 的子集,所以很多概念會跨越這裡。

讓我們看看專案中的檔案:

  • Main.cs – 這包含應用程式的主要進入點。 當應用程式啟動時,這包含執行的第一個類別與方法。
  • AppDelegate.cs – 此檔案包含負責接聽作業系統事件的主要應用程式類別。
  • Info.plist – 此檔案包含應用程式屬性,例如應用程式名稱、圖示等。
  • ViewController.cs – 這是代表主視窗並控制其生命周期的類別。
  • ViewController.designer.cs – 此檔案包含管道程式代碼,可協助您與主畫面的使用者介面整合。
  • Main.storyboard – 主視窗的 UI。 此檔案可由適用於 iOS 的 Xamarin Designer 建立和維護。

在下列各節中,我們將快速查看其中一些檔案。 我們稍後會更詳細地探索它們,但現在瞭解其基本概念是個好主意。

Main.cs

檔案 Main.cs 包含靜態 Main 方法,其會建立新的 Xamarin.tvOS 應用程式實例,並傳遞將處理 OS 事件的類別名稱,在我們的案例中為 AppDelegate 類別:

using UIKit;

namespace Hello_tvOS
{
    public class Application
    {
        // This is the main entry point of the application.
        static void Main (string[] args)
        {
            // if you want to use a different Application Delegate class from "AppDelegate"
            // you can specify it here.
            UIApplication.Main (args, null, "AppDelegate");
        }
    }
}

AppDelegate.cs

檔案 AppDelegate.cs 包含我們的 AppDelegate 類別,負責建立視窗並接聽OS事件:

using Foundation;
using UIKit;

namespace Hello_tvOS
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the
    // User Interface of the application, as well as listening (and optionally responding) to application events from iOS.
    [Register ("AppDelegate")]
    public class AppDelegate : UIApplicationDelegate
    {
        // class-level declarations

        public override UIWindow Window {
            get;
            set;
        }

        public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
        {
            // Override point for customization after application launch.
            // If not required for your application you can safely delete this method

            return true;
        }

        public override void OnResignActivation (UIApplication application)
        {
            // Invoked when the application is about to move from active to inactive state.
            // This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message)
            // or when the user quits the application and it begins the transition to the background state.
            // Games should use this method to pause the game.
        }

        public override void DidEnterBackground (UIApplication application)
        {
            // Use this method to release shared resources, save user data, invalidate timers and store the application state.
            // If your application supports background execution this method is called instead of WillTerminate when the user quits.
        }

        public override void WillEnterForeground (UIApplication application)
        {
            // Called as part of the transition from background to active state.
            // Here you can undo many of the changes made on entering the background.
        }

        public override void OnActivated (UIApplication application)
        {
            // Restart any tasks that were paused (or not yet started) while the application was inactive.
            // If the application was previously in the background, optionally refresh the user interface.
        }

        public override void WillTerminate (UIApplication application)
        {
            // Called when the application is about to terminate. Save data, if needed. See also DidEnterBackground.
        }
    }
}

除非您之前已建置 iOS 應用程式,否則此程式代碼可能不熟悉,但相當簡單。 讓我們來檢查重要的幾行。

首先,讓我們看看類別層級變數宣告:

public override UIWindow Window {
            get;
            set;
        }

屬性 Window 提供主視窗的存取權。 tvOS 使用所謂的 模型檢視控制器 (MVC) 模式。 一般而言,對於您在視窗內建立的每個視窗(以及其他許多專案),有一個控制器負責視窗的生命週期,例如顯示它、新增檢視表(控制項)等等。

接下來,我們有 FinishedLaunching 方法。 這個方法會在應用程式具現化之後執行,並負責實際建立應用程式視窗,並開始顯示其中檢視的程式。 因為我們的應用程式會使用 Storyboard 來定義其 UI,因此這裡不需要額外的程式代碼。

樣本中提供許多其他方法,例如 DidEnterBackgroundWillEnterForeground。 如果您的應用程式中未使用應用程式事件,則可以安全地移除這些事件。

ViewController.cs

類別 ViewController 是我們的主視窗控制器。 這表示它負責主視窗的生命週期。 我們稍後會詳細檢查這一點,現在讓我們快速看看它:

using System;
using Foundation;
using UIKit;

namespace Hello_tvOS
{
    public partial class ViewController : UIViewController
    {
        public ViewController (IntPtr handle) : base (handle)
        {
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();
            // Perform any additional setup after loading the view, typically from a nib.
        }

        public override void DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

ViewController.Designer.cs

Main Window 類別的設計工具檔案目前是空的,但是當我們使用 iOS 設計工具建立使用者介面時,Visual Studio for Mac 會自動填入它:

using Foundation;

namespace HellotvOS
{
    [Register ("ViewController")]
    partial class ViewController
    {
        void ReleaseDesignerOutlets ()
        {
        }
    }
}

我們通常並不關心設計工具檔案,因為它們只是由Visual Studio for Mac 自動管理,並且只提供必要的管線程式代碼,允許存取我們在應用程式中新增至任何視窗或檢視的控件。

既然我們已建立 Xamarin.tvOS 應用程式,而且我們對其元件有基本的瞭解,讓我們來看看如何建立 UI。

建立使用者介面

您不需要使用 Xamarin Designer for iOS 來建立 Xamarin.tvOS 應用程式的使用者介面,就可以直接從 C# 程式代碼建立 UI,但超出本文的範圍。 為了簡單起見,我們將在本教學課程的其餘部分使用 iOS 設計工具來建立 UI。

若要開始建立UI,讓我們按兩下 Main.storyboard 方案總管中的檔案,以在iOS設計工具中開啟它以進行編輯:

[方案總管] 中的 Main.storyboard 檔案

這應該會啟動設計工具,如下所示:

設計工具

如需 iOS 設計工具及其運作方式的詳細資訊,請參閱 適用於 iOS 的 Xamarin 設計工具簡介指南。

我們現在可以開始將控件新增至 Xamarin.tvOS 應用程式的設計介面。

執行下列操作:

  1. 找出 [工具箱],其應該位於設計介面右側:

    工具箱

    如果您無法在這裡找到它,請流覽至 [檢視 > 面板 > 工具箱 ] 以檢視它。

  2. 將標籤[工具箱] 拖曳至設計介面:

    從工具箱拖曳標籤

  3. 點選 [屬性] 板中的 [標題] 屬性,並將按鈕的標題變更為 Hello, tvOS ,並將 [字型大小] 設定為 128:

    將標題設定為 Hello、tvOS,並將 [字型大小] 設定為 128

  4. 調整標籤的大小,讓所有文字都可見,並將它置中於視窗頂端附近:

    調整標籤大小並置中

  5. 卷標現在必須受限於其位置,使其如預期般顯示。 不論螢幕大小為何。 若要這樣做,請按兩下卷標, 直到 T 形控點 出現為止:

    T 形控點

  6. 若要水準限制標籤,請選取中央方塊,並將其拖曳至垂直虛線:

    選取中央方塊

    標籤應該變成橙色。

  7. 選取標籤頂端的 T 控點,然後將它拖曳到視窗的上邊緣:

    將控點拖曳到視窗的上邊緣

  8. 接下來,按下寬度,然後按兩下高度 骨頭控點 ,如下所示:

    寬度和高度骨頭控點

    按兩下每個 骨頭控點 時,請分別選取 [寬度] 和 [高度] 來設定固定維度。

  9. 完成時,您的條件約束看起來應該類似 [屬性] 面板的 [版面配置] 索引標籤:

    範例條件約束

  10. [工具箱] 拖曳按鈕,並將它放在 [卷標] 底下。

  11. 點選 「屬性] 板中的 [標題] 屬性,並將按鈕的標題變更為 Click Me

    將按鈕標題變更為 [按兩下我]

  12. 重複上述步驟 5 到 8,以限制 tvOS 視窗中的按鈕。 不過,不要將 T 控點拖曳到視窗頂端(如步驟 #7),而是將它拖曳到卷標的底部:

    限制按鈕

  13. 將另一個捲標拖曳到按鈕下方,將其大小調整為與第一個標籤相同的寬度,並將其 [對齊] 設定[置中] :

    將另一個捲標拖曳到按鈕下方,將其大小調整為與第一個捲標相同的寬度,並將其 [對齊] 設定為 [置中]

  14. 如同第一個標籤和按鈕,請將此標籤設定為置中,並將其釘選到位置和大小:

    將標籤釘選到位置和大小

  15. 將變更儲存至使用者介面。

當您重設大小並移動控件時,您應該注意到設計工具會提供您根據 Apple TV 人介面指導方針的實用貼齊提示。 這些指導方針將協助您建立高品質的應用程式,以熟悉Apple TV使用者的外觀和風格。

如果您在 [ 文件大綱 ] 區段中查看,請注意如何顯示構成使用者介面的專案配置和階層:

檔大綱區段

您可以從這裡選取項目,視需要編輯或拖曳至重新排序 UI 元素。 例如,如果UI元素正由另一個元素所涵蓋,您可以將它拖曳到清單底部,使其成為視窗最上層的專案。

既然我們已建立使用者介面,我們需要公開UI專案,讓 Xamarin.tvOS 可以在 C# 程式代碼中存取並與其互動。

存取程式代碼後置中的控制件

有兩個主要方式可從程式碼存取您在 iOS 設計工具中新增的控制項:

  • 在控件上建立事件處理程式。
  • 為控制項提供名稱,以便稍後參考它。

新增其中一項時,中的 ViewController.designer.cs 部分類別將會更新以反映變更。 這可讓您接著存取檢視控制器中的控制器中的控制器。

建立事件處理程式

在此範例應用程式中,按兩下按鈕時我們想要 發生某些 狀況,因此必須將事件處理程式新增至按鈕上的特定事件。 若要進行這項設定,請執行下列動作:

  1. 在 Xamarin iOS 設計工具中,選取檢視控制器上的按鈕。

  2. 在 [屬性] 面板中,選取 [ 事件] 索引 標籤:

    [事件] 索引標籤

  3. 找出 TouchUpInside 事件,並為其提供名為 的 Clicked事件處理程式:

    TouchUpInside 事件

  4. 當您按 Enter 鍵時, ViewController.cs檔案將會開啟,並建議程式代碼中事件處理程式的位置。 使用鍵盤上的箭號鍵來設定位置:

    設定位置

  5. 這會建立部分方法,如下所示:

    partial 方法

我們現在已準備好開始新增一些程式碼,以允許按鈕運作。

為控件命名

按兩下按鈕時,標籤應該會根據點選次數更新。 若要這樣做,我們必須在程序代碼中存取標籤。 這是藉由提供名稱來完成。 執行下列操作:

  1. 開啟分鏡腳本,然後選取檢視控制器底部的標籤。

  2. 在 [屬性] 面板中,選取 [ 小工具] 索引標籤

    選取 [小工具] 索引標籤

  3. 在 [身分識別名稱] 底下>,新增 ClickedLabel

    設定 ClickedLabel

我們現在已準備好開始更新標籤!

如何存取控件

如果您在 方案總管 中選取 ViewController.designer.cs ,您將能夠查看標籤和Clicked事件處理程式如何ClickedLabel對應至 C# 中的輸出動作

輸出和動作

您可能也會注意到 ViewController.designer.cs 是部分類別,因此 Visual Studio for Mac 不需要修改 ViewController.cs ,這會覆寫我們對 類別所做的任何變更。

以這種方式公開UI元素,可讓您在檢視控制器中存取它們。

你通常永遠不需要打開 ViewController.designer.cs 自己,它只是為了教育目的在這裡呈現。

撰寫程式碼

透過輸出和動作建立使用者介面及其UI元素公開給程式代碼之後,我們終於準備好撰寫程式代碼來提供程式功能。

在我們的應用程式中,每次按兩下第一個按鈕時,我們都會更新標籤,以顯示已按下按鈕的次數。 若要達成此目的,我們需要在SolutionPad按兩下檔案以開啟ViewController.cs檔案以進行編輯:

The Solution Pad

首先,我們需要在 類別 ViewController 中建立類別層級變數,以追蹤已發生的點選次數。 編輯類別定義,使它看起來如下所示:

using System;
using Foundation;
using UIKit;

namespace Hello_tvOS
{
    public partial class ViewController : UIViewController
    {
        private int numberOfTimesClicked = 0;
        ...

接下來,在相同的類別中,ViewController我們需要覆寫 ViewDidLoad 方法,並新增一些程式代碼來設定標籤的初始訊息:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Set the initial value for the label
    ClickedLabel.Text = "Button has not been clicked yet.";
}

我們需要使用 ViewDidLoad,而不是另一個方法,例如 Initialize,因為ViewDidLoad會在OS從檔案載入並具現化使用者介面.storyboard之後呼叫。 如果我們嘗試在檔案完全載入和具現化之前 .storyboard 存取標籤件,我們會收到錯誤 NullReferenceException ,因為尚未建立標籤控制件。

接下來,我們需要新增程序代碼,以回應使用者按鍵。 將下列內容新增至我們建立的部分類別:

partial void Clicked (UIButton sender)
{
    ClickedLabel.Text = string.Format("The button has been clicked {0} time{1}.", ++numberOfTimesClicked, (numberOfTimesClicked

每當使用者按兩下我們的按鈕時,就會呼叫此程式代碼。

備妥所有項目之後,我們現在已準備好建置及測試 Xamarin.tvOS 應用程式。

測試應用程式

是時候建置並執行我們的應用程式,以確保它如預期般執行。 我們可以在一個步驟中建置並執行所有專案,也可以建置而不執行它。

每當建置應用程式時,我們都可以選擇我們想要的組建類型:

  • 錯 – 偵錯組建會編譯成具有額外元數據的 '' (application) 檔案,讓我們在執行應用程式時偵錯發生的情況。
  • 發行 – 發行組建也會建立 '' 檔案,但不包含偵錯資訊,因此會更小且執行得更快。

您可以從 Visual Studio for Mac 畫面左上角的 [組態選取器] 選取組建類型:

選取組建類型

建置應用程式

在我們的案例中,我們只想要偵錯組建,因此讓我們確定 已選取 [偵 錯]。 讓我們先按 ⌘B,或從 [建置] 功能表選擇 [全部置] 來建置應用程式。

如果沒有任何錯誤,您會在 Visual Studio for Mac 的狀態欄中看到 [ 建置成功 ] 訊息。 如果發生錯誤,請檢閱您的專案,並確定您已正確遵循這些步驟。 首先,確認您的程序代碼 (在 Xcode 和 Visual Studio for Mac 中)符合教學課程中的程式碼。

執行應用程式

若要執行應用程式,我們有三個選項:

  • 按下 ⌘+Enter
  • 從 [執行] 功能表中選擇 [偵錯]
  • 按一下 Visual Studio for Mac 工具列中的 [播放] 按鈕 (在 [方案總管] 上方)。

應用程式將會建置 (如果尚未建置),以偵錯模式啟動,tvOS 模擬器將會啟動,應用程式將會啟動並顯示它的主要介面視窗:

範例應用程式主畫面

從 [ 硬體 ] 功能表中,選取 [ 顯示 Apple TV 遠端 ],以便控制模擬器。

選取 [顯示 Apple TV 遠端]

如果您使用模擬器的遠端,如果您按下按鈕數次,標籤應該會隨著計數更新:

具有更新計數的標籤

恭喜! 我們在這裡涵蓋了許多基礎,但如果您從頭到尾遵循本教學課程,您現在應該對 Xamarin.tvOS 應用程式的元件以及用來建立它們的工具有紮實的瞭解。

下一步?

開發 Apple TV 應用程式提出了一些挑戰,因為使用者與介面之間的中斷連線(不在使用者手中的房間),以及 tvOS 在應用程式大小和記憶體上所放置的限制。

因此,強烈建議您在跳入 Xamarin.tvOS 應用程式的設計之前先閱讀下列檔:

  • tvOS 9 簡介 – 本文介紹 Xamarin.tvOS 開發人員在 tvOS 9 中提供的所有全新和已修改 API 和功能。
  • 使用導覽和焦點 – Xamarin.tvOS 應用程式的使用者不會直接與其介面互動,就像他們點選裝置畫面上的影像一樣,而是間接地從會議室使用 Siri 遠端。 本文涵蓋焦點的概念,以及如何在 Xamarin.tvOS 應用程式的使用者介面中處理導覽。
  • Siri 遠端和 藍牙 控制器 – 使用者與 Apple TV 互動的主要方式,以及您的 Xamarin.tvOS 應用程式,是透過隨附的 Siri Remote。 如果您的應用程式是遊戲,您可以選擇性地建置支援第三方、針對iOS製作 (MFI) 藍牙 應用程式中的遊戲控制器。 本文涵蓋在 Xamarin.tvOS 應用程式中支援新的 Siri 遠端和 藍牙 遊戲控制器。
  • 資源和數據 儲存體 – 與 iOS 裝置不同,新的 Apple TV 不提供 tvOS 應用程式的永續性本機記憶體。 因此,如果您的 Xamarin.tvOS 應用程式需要保存資訊(例如使用者喜好設定),則必須從 iCloud 儲存和擷取該數據。 本文涵蓋在 Xamarin.tvOS 應用程式中使用資源和永續性數據記憶體。
  • 使用圖示和影像 – 建立引人入勝的圖示和影像,是開發 Apple TV 應用程式沉浸式用戶體驗的關鍵部分。 本指南將涵蓋為 Xamarin.tvOS 應用程式建立及包含必要圖形資產所需的步驟。
  • 使用者介面 – 一般用戶體驗 (UX) 涵蓋範圍,包括使用者介面 (UI) 控制件,在使用 Xamarin.tvOS 時,請使用 Xcode 的介面產生器與 UX 設計原則。
  • 部署和測試 – 本節涵蓋用來測試應用程式的主題,以及如何散發應用程式。 此處的主題包括用於偵錯的工具、部署到測試人員,以及如何將應用程式發佈至 Apple TV App Store 等專案。

如果您遇到任何使用 Xamarin.tvOS 的問題,請參閱我們的 疑難解答 檔,以取得已知問題和解決方案的清單。

摘要

本文提供使用 Visual Studio for Mac 開發 tvOS 應用程式的快速入門,方法是建立簡單的 Hello, tvOS 應用程式。 它涵蓋tvOS裝置布建、介面建立、tvOS 編碼和tvOS模擬器測試的基本概念。