自訂 iOS Sender UI

您可以設定顏色、設定按鈕、文字和縮圖外觀的樣式,以及選擇要顯示的按鈕類型,藉此自訂 Cast 小工具

自訂小工具主題

Cast 架構小工具支援 UIKit 中的 Apple UIAppearance 通訊協定,可變更應用程式中的小工具外觀,例如按鈕的位置或邊框。請使用這個通訊協定,設定 Cast 架構小工具的樣式,以符合現有的應用程式樣式。

投放按鈕範例

Swift
GCKUICastButton.appearance().tintColor = UIColor.gray
Objective-C
[GCKUICastButton appearance].tintColor = [UIColor grayColor];

直接自訂小工具

直接使用父類別的屬性自訂小工具。舉例來說,使用 tintColor: 屬性自訂 GCKUICastButton 顏色是很常見的做法。

投放按鈕範例

Swift
castButton.tintColor = UIColor.gray
Objective-C
castButton.tintColor = [UIColor grayColor];

選擇控制器按鈕

展開的控制器類別 (GCKUIExpandedMediaControlsViewController) 和迷你控制器類別 (GCKUIMiniMediaControlsViewController) 都含有按鈕列,用戶端則可設定這些列顯示哪些按鈕。只要使用符合 GCKUIMediaButtonBarProtocol 的類別就能達到。

迷你控制器列有 3 個可設定的按鈕插槽:

SLOT  SLOT  SLOT
  1     2     3

展開的控制器列中央會顯示永久的播放/暫停切換鈕,以及 4 個可設定的運算單元:

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

應用程式可透過 GCKCastContext-[defaultExpandedMediaControlsViewController] 屬性取得展開控制器的參照,並使用 -[createMiniMediaControlsViewController] 建立迷你控制器。

每個位置可以包含架構按鈕、自訂按鈕,也可以留空。架構控制項按鈕清單的定義為:

按鈕類型 說明
GCKUIMediaButtonTypeNone 請勿在這個版位放置按鈕
GCKUIMediaButtonTypeCustom 自訂按鈕
GCKUIMediaButtonTypePlayPauseToggle 切換播放與暫停
GCKUIMediaButtonTypeSkipPrevious 跳到佇列中的上一個項目
GCKUIMediaButtonTypeSkipNext 跳到佇列中的下一個項目
GCKUIMediaButtonTypeRewind30Seconds 以 30 秒為單位倒轉播放
GCKUIMediaButtonTypeForward30Seconds 以 30 秒快轉播放
GCKUIMediaButtonTypeMuteToggle 將遠端網路接收器設為靜音或取消靜音
GCKUIMediaButtonTypeClosedCaptions 開啟對話方塊,選取文字和音軌

GCKUIMediaButtonBarProtocol.h 中找到每個按鈕功能的詳細說明

使用 GCKUIMediaButtonBarProtocol 上的方法新增按鈕,如下所示:

  • 如要在長條中新增架構按鈕,只需呼叫 -[setButtonType:atIndex:] 即可。

  • 如要在長條中新增自訂按鈕,應用程式必須呼叫 -[setButtonType:atIndex:],並將 buttonType 設為 GCKUIMediaButtonTypeCustom,然後呼叫 -[setCustomButton:atIndex:],並傳遞具有相同索引的 UIButton

將自訂樣式套用至 iOS 應用程式

透過 Cast iOS SDK,您可以在 iOS 傳送端中,為預設小工具的 UI 元素設定字型、顏色和圖片的樣式,營造出與應用程式其餘部分相符的外觀和風格。

以下章節將說明如何將自訂樣式套用至任何 Cast 小工具或一組小工具。

將樣式套用至小工具的 UI 元素

這個程序會利用範例,將應用程式迷你控制器的內文顏色設為紅色。

  1. 檢視畫面和樣式表格中,找出要設定樣式的小工具或一組小工具的檢視畫面名稱。群組名稱會標上 ▼,

    範例:miniController 小工具檢視畫面

  2. 在下表列出的對應樣式類別清單中,找到要變更的屬性名稱。

    例如:bodyTextColorGCKUIStyleAttributesMiniController 類別的屬性。

  3. 編寫程式碼。

    示例:

Swift
// Get the shared instance of GCKUIStyle
let castStyle = GCKUIStyle.sharedInstance()
// Set the property of the desired cast widget.
castStyle.castViews.mediaControl.miniController.bodyTextColor = UIColor.red
// Refresh all currently visible views with the assigned styles.
castStyle.apply()
Objective-C
// Get the shared instance of GCKUIStyle.
GCKUIStyle *castStyle = [GCKUIStyle sharedInstance];
// Set the property of the desired cast widget.
castStyle.castViews.mediaControl.miniController.bodyTextColor = [UIColor redColor];
// Refresh all currently visible views with the assigned styles.
[castStyle applyStyle];

請使用這個模式,將任何樣式套用至任何小工具的任何 UI 元素。

檢視畫面和樣式表格

這個表格顯示了七個小工具檢視畫面,以及可套用樣式的三個群組 (以 ▼ 標示)。

檢視表名稱 類型 樣式類別
castViews Group GCKUIStyleAttributesCastViews
deviceControl Group GCKUIStyleAttributesDeviceControl
deviceChooser 小工具 GCKUIStyleAttributesDeviceChooser
noDevicesAvailableController 小工具 GCKUIStyleAttributesNoDevicesAvailableController
connectionController Group GCKUIStyleAttributesConnectionController
navigation 小工具 GCKUIStyleAttributesConnectionNavigation
toolbar 小工具 GCKUIStyleAttributesConnectionToolbar
mediaControl Group GCKUIStyleAttributesMediaControl
miniController 小工具 GCKUIStyleAttributesMiniController
expandedController 小工具 GCKUIStyleAttributesExpandedController
trackSelector 小工具 GCKUIStyleAttributesTrackSelector
instructions 小工具 GCKUIStyleAttributesInstructions

樣式階層

GCKUIStyle 單例模式是所有樣式設定的 API 進入點。它具有 castViews 屬性,此屬性是樣式階層的根層級,如下圖所示;此圖表是查看表格中相同檢視畫面和群組的不同方式。

您可以將樣式套用至個別小工具或一組小工具。樣式階層包含三個小工具群組:castViews、deviceControl 和 mediaControl。每個群組的矩形都會圍繞小工具。將樣式套用至群組後,該樣式就會套用到該群組中的所有小工具。

舉例來說,castViews 群組可讓您將樣式套用至所有小工具,而 deviceControl 群組可讓您將樣式套用至其三種裝置控制小工具。「instructions」小工具不屬於任何群組。

castViews
deviceControl mediaControl
操作說明

裝置
選擇器
no DevicesAvailable 畫面
連線
控制器
迷你
控制器
已展開
控制器
追蹤
選取器
導覽 / 工具列

註腳:此圖表中顯示的小工具名稱應以兩行顯示,在程式碼中應以一個字詞為一行,而且不含空格。舉例來說,device Chooser 應寫入 deviceChooser。將滑鼠遊標懸停在圖片上即可放大圖片。