如要自訂 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:]
。如要在自訂列中新增自訂按鈕,應用程式必須呼叫
buttonType
設為GCKUIMediaButtonTypeCustom
的-[setButtonType:atIndex:]
,然後呼叫-[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 |
群組 | GCKUIStyleAttributesCastView |
▼ deviceControl |
群組 | GCKUIStyleAttributesDeviceControl |
deviceChooser |
Widget | GCKUIStyleAttributesDeviceChooser |
noDevicesAvailableController |
Widget | GCKUIStyleAttributesNoDevicesAvailableController |
▼ connectionController |
群組 | GCKUIStyleAttributesConnectionController |
navigation |
Widget | GCKUIStyleAttributesConnectionNavigation |
toolbar |
Widget | GCKUIStyleAttributesConnectionToolbar |
guestModePairingDialog |
Widget | GCKUIStyleAttributesGuestModePairingDialog |
▼ mediaControl |
群組 | GCKUIStyleAttributesMediaControl |
miniController |
Widget | GCKUIStyleAttributesMiniController |
expandedController |
Widget | GCKUIStyleAttributesExpandController |
trackSelector |
Widget | GCKUIStyleAttributesTrackSelector |
instructions |
Widget | GCKUIStyleAttributes 指令 |
樣式階層
GCKUIStyle
單例模式是所有樣式設定的 API 進入點。其屬性 castViews
是樣式階層的根,如下圖所示;這張圖表是查看上一個資料表中顯示的相同檢視畫面和群組的不同方式。
您可以將樣式套用至個別小工具或一組小工具。 樣式階層有三個小工具群組:castViews、deviceControl 和 mediaControl。每個群組的矩形都會包含小工具。將樣式套用至群組後,就會套用至該群組中的所有小工具。
例如,castViews
群組可讓您將樣式套用到所有小工具,而 deviceControl
群組可讓您將樣式套用至其三個裝置控制小工具。「instructions
」小工具不屬於任何群組。
castView | ||||||||||
裝置控制 | 媒體控管 | |||||||||
操作說明 ![]() |
裝置 選擇器 ![]() |
noDevicesAvailable 螢幕![]() |
連線 控制器 ![]() |
mini 控制器 ![]() |
已展開 控制器 ![]() |
軌跡 選取器 ![]() |
||||
訪客模式 配對連線對話方塊 ![]() |
導覽 / 工具列 ![]() ![]() |
|||||||||
註腳:圖中的小工具名稱,以兩行顯示,應以程式碼的形式編寫成一行文字,每行一個,不能有空格。例如,device Chooser
應寫入 deviceChooser
。將滑鼠遊標移到圖片上即可放大圖片