このページは Cloud Translation API によって翻訳されました。

iOS Sender UI のカスタマイズ

キャストウィジェットをカスタマイズするには、色の設定、ボタン、テキスト、サムネイルの外観のスタイル設定、表示するボタンの種類の選択を行います。

ウィジェットのテーマをカスタマイズする

キャストフレームワークウィジェットは UIKit の Apple UIAppearance プロトコルをサポートして、ボタンの位置や枠線など、アプリでのウィジェットの外観を変更します。このプロトコルを使用して、既存のアプリのスタイルに合わせてキャストフレームワークウィジェットのスタイルを設定します。

キャストボタンの例

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:] を呼び出すだけでフレームワークボタンをバーに追加できます。
バーにカスタムボタンを追加するには、アプリで buttonType を GCKUIMediaButtonTypeCustom に設定して -[setButtonType:atIndex:] を呼び出してから、-[setCustomButton:atIndex:] を呼び出して、同じインデックスで UIButton を渡す必要があります。

iOS アプリにカスタムスタイルを適用する

Cast iOS SDK を使用すると、iOS センダーのデフォルトウィジェットの UI 要素のフォント、色、画像のスタイルを設定して、アプリの他の部分と調和したデザインにすることができます。

次のセクションでは、任意のキャストウィジェットまたはウィジェットのグループにカスタムスタイルを適用する方法について説明します。

ウィジェットの UI 要素にスタイルを適用する

この手順では、アプリのミニコントローラの本文テキストの色を赤に設定する例を使用します。

ビューとスタイルの表で、スタイルを設定するウィジェットまたはウィジェットグループのビュー名を見つけます。グループ名には ▼ が付きます。

例: miniController ウィジェットビュー
この表にある対応するスタイルクラスのプロパティのリストから、変更する属性の名前を見つけます。

例: bodyTextColor は GCKUIStyleAttributesMiniController クラスのプロパティです。
コードを記述します。

例:

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 要素に任意のスタイルを適用する場合に使用します。

ビューとスタイルの表

次の表に、スタイルを適用できる 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 コントローラ	展開済みコントローラ	トラックセレクタ
			ナビゲーション / ツールバー