您可以設定顏色、設定按鈕、文字和縮圖外觀的樣式,以及選擇要顯示的按鈕類型,藉此自訂 Cast 小工具。
自訂小工具主題
Cast 架構小工具支援 UIKit 中的 Apple UIAppearance 通訊協定,可變更應用程式中的小工具外觀,例如按鈕的位置或邊框。請使用這個通訊協定,設定 Cast 架構小工具的樣式,以符合現有的應用程式樣式。
投放按鈕範例
GCKUICastButton.appearance().tintColor = UIColor.gray
[GCKUICastButton appearance].tintColor = [UIColor grayColor];
直接自訂小工具
直接使用父類別的屬性自訂小工具。舉例來說,使用 tintColor:
屬性自訂 GCKUICastButton
顏色是很常見的做法。
投放按鈕範例
castButton.tintColor = UIColor.gray
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 元素
這個程序會利用範例,將應用程式迷你控制器的內文顏色設為紅色。
在檢視畫面和樣式表格中,找出要設定樣式的小工具或一組小工具的檢視畫面名稱。群組名稱會標上 ▼,
範例:
miniController
小工具檢視畫面在下表列出的對應樣式類別清單中,找到要變更的屬性名稱。
例如:
bodyTextColor
是GCKUIStyleAttributesMiniController
類別的屬性。編寫程式碼。
示例:
// 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()
// 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
。將滑鼠遊標懸停在圖片上即可放大圖片。