キャスト ウィジェットをカスタマイズするには、色の設定、ボタン、テキスト、サムネイルの外観のスタイル設定、表示するボタンの種類の選択を行います。
ウィジェットのテーマをカスタマイズする
キャスト フレームワーク ウィジェットは UIKit の Apple UIAppearance プロトコルをサポートして、ボタンの位置や枠線など、アプリでのウィジェットの外観を変更します。このプロトコルを使用して、既存のアプリのスタイルに合わせてキャスト フレームワーク ウィジェットのスタイルを設定します。
キャストボタンの例
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 要素のフォント、色、画像のスタイルを設定して、アプリの他の部分と調和したデザインにすることができます。
次のセクションでは、任意のキャスト ウィジェットまたはウィジェットのグループにカスタム スタイルを適用する方法について説明します。
ウィジェットの 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 要素に任意のスタイルを適用する場合に使用します。
ビューとスタイルの表
次の表に、スタイルを適用できる 7 つのウィジェット ビューと 3 つのグループ(▼ でマーク)を示します。
ビュー名 | 種類 | スタイルクラス |
---|---|---|
▼ castViews |
グループ | GCKUIStyleAttributesCastViews |
▼ deviceControl |
グループ | GCKUIStyleAttributesDeviceControl |
deviceChooser |
ウィジェット | GCKUIStyleAttributesDeviceChooser |
noDevicesAvailableController |
ウィジェット | GCKUIStyleAttributesNoDevicesAvailableController |
▼ connectionController |
グループ | GCKUIStyleAttributesConnectionController |
navigation |
ウィジェット | GCKUIStyleAttributesConnectionNavigation |
toolbar |
ウィジェット | GCKUIStyleAttributesConnectionToolbar |
▼ mediaControl |
グループ | GCKUIStyleAttributesMediaControl |
miniController |
ウィジェット | GCKUIStyleAttributesMiniController |
expandedController |
ウィジェット | GCKUIStyleAttributesExpandedController |
trackSelector |
ウィジェット | GCKUIStyleAttributesTrackSelector |
instructions |
ウィジェット | GCKUIStyleAttributesInstructions |
スタイル階層
GCKUIStyle
シングルトンは、すべてのスタイル設定の API エントリ ポイントです。プロパティ castViews
は、以下に示すようにスタイル階層のルートです。この図は、前の表で示したのと同じビューとグループを別の視点から見たものです。
スタイルは、個々のウィジェットまたはウィジェットのグループに適用できます。スタイル階層には、castViews、deviceControl、mediaControl という 3 つのウィジェット グループがあります。各グループの長方形がウィジェットを囲んでいます。 グループにスタイルを適用すると、そのグループ内のすべてのウィジェットにスタイルが適用されます。
たとえば、castViews
グループではすべてのウィジェットにスタイルを適用でき、deviceControl
グループでは 3 つのデバイス コントロール ウィジェットにのみスタイルを適用できます。instructions
ウィジェットはどのグループにも属していません。
castViews | ||||||||||
deviceControl | mediaControl | |||||||||
手順 |
デバイス 選択ツール |
noDevicesAvailable 画面 |
connection コントローラ |
mini コントローラ |
展開済み コントローラ |
トラック セレクタ |
||||
ナビゲーション / ツールバー |
||||||||||
脚注: この図で 2 行に示されているウィジェット名は、1 行につき 1 つの単語として記述します(スペースは使用しません)。たとえば、device Chooser
は deviceChooser
と記述します。画像をロールオーバーすると拡大できます