こんにちは。仙台オフィスでスマホアプリの開発などを担当している、はんだです。
さて、私が開発に携わっている「MIRAIL」アプリや「videomarket」アプリはキャスト再生に対応しております。今回、iOSアプリ（sender）内のキャスト画面をGoogle Cast SDKにて用意されているUIで実装したらどのような画面になり、どの程度までカスタマイズできるか調べる機会がありましたので、共有したいと思います。
なお、本記事ではキャスト再生の実装方法などについては割愛しますのでご了承ください。
はじめに
以下、確認した際の環境ですが、Google Cast SDKのバージョンは4.7.0で、Xcodeは13.2.1です。
Google Cast SDKで用意されている画面はいくつかありますが、ここではexpandedController（キャスト再生中にアプリに表示される画面）を例に説明したいと思います。
expandedControllerは、デフォルトではこのようになっています。
これを、公式ドキュメントを参考にカスタマイズしていきます。
Customize iOS Sender UI | Cast | Google Developers
コントロールボタンのカスタマイズ
はじめに、画面下部にあるコントローラーボタンをカスタマイズします。
ボタンのイメージを変更するだけなら、GCKUIStyleで設定できます。
let castStyle = GCKUIStyle.sharedInstance() // 再生・停止・早送りボタンのイメージを変更 castStyle.castViews.mediaControl.playImage = UIImage(named: "playImage")! castStyle.castViews.mediaControl.pauseImage = UIImage(named: "pauseImage")! castStyle.castViews.mediaControl.forward30SecondsImage = UIImage(named: "forward30SecondsImage")! castStyle.apply()
コントローラーボタンを削除したり、オリジナルのボタンを追加する場合はdefaultExpandedMediaControlsViewControllerを取得し、設定する必要があります。
let expandedController = GCKCastContext.sharedInstance().defaultExpandedMediaControlsViewController // 左右のボタンを消す expandedController.setButtonType(.none, at: 0) expandedController.setButtonType(.none, at: 3) // オリジナルのボタンを設定する（ここではデフォルトの戻るボタンの位置にオリジナルのボタンを設定） let myButton = UIButton() let myButtonImage = UIImage(named: "myButton") myButton.setImage(myButtonImage, for: .normal) myButton.addTarget(self, action: #selector(didTapMyButton), for: .touchUpInside) expandedController.setButtonType(.custom, at: 1) expandedController.setCustomButton(myButton, at: 1)
なお、コントローラーボタンのインデックスは左から０です。
<GCKUIMediaButtonBarProtocol> Protocol | Cast | Google Developers
背景色やフォントなどの設定
背景色やフォント、各ウィジェットの色などは、GCKUIStyleを使って設定できます。
let castStyle = GCKUIStyle.sharedInstance() // expandedControllerのスライドバーの色 castStyle.castViews.mediaControl.expandedController.sliderProgressColor = .purple // expandedControllerのアイコンの色 castStyle.castViews.mediaControl.expandedController.iconTintColor = .white // expandedControllerの「〜にキャストしています」部分などのフォント castStyle.castViews.mediaControl.expandedController.bodyTextFont = .systemFont(ofSize: 12) castStyle.apply()
expandedController以外の画面も同様の方法で設定できます。例えば以下のような具合です。
// connectionControllerの音量アイコンの色 castStyle.castViews.deviceControl.connectionController.iconTintColor = .white // connectionController「キャストを停止」部分の色 castStyle.castViews.deviceControl.connectionController.toolbar.backgroundColor = .lightGray // キャスト画面全体で共通の色設定 castStyle.castViews.backgroundColor = .black castStyle.castViews.headingTextColor = .lightGray
connectionController, expandedControllerなどの指定がどの画面に対応しているかは公式ドキュメントを参照ください。
https://developers.google.com/cast/docs/ios_sender/customize_ui#style_hierarchy
以上のようにカスタマイズすると、このような画面になります。（色などは雑に設定していますので、あくまでこんな感じでカスタマイズできるという参考までに。）
苦労した箇所
以上のようなかたちでカスタマイズできるのですが、何箇所かは思い通りにGCKUIStyleが適応されず苦労しましたので紹介します。
connectionControllerのスライドバー
connectionControllerには音量を調整するためのスライドバーがあります。
このスライドバーの色を変えたかったのですが、先ほど述べたexpandedControllerのスライドバーと同じようにGCKUIStyleのsliderProgressColorを設定すれば良いかと思いきや、うまく設定されませんでした。
色々試した結果、UIAppearanceを使ったところ設定できました。
UISlider.appearance().minimumTrackTintColor = .purple
ただし、UIAppearanceですので、プロジェクト全体に設定が反映されるため注意が必要です。
connectionControllerのナビゲーションバー
connectionControllerはナビゲーションバーが表示されますが、この部分の色もGCKUIStyleではうまく設定できませんでした。
具体的には、ナビゲーションバーの背景色は設定できるのですが、タイトル（上の画像の「ファミリールーム」）のテキストカラーがGCKUIStyleでは変えられませんでした。
色々試したものの、こちらは結局うまくいかず。。。iOS15からナビゲーションバーの仕様が変わったので、その辺りが影響しているのかもしれません。
対応としては、この状態だとダークモードか否かでタイトルの色が変わるので、それに合わせて背景色もsystemカラーに設定するのが良いかなという印象です。
castStyle.castViews.deviceControl.connectionController.navigation.backgroundColor = .systemGray
あとがき
以上、Google Cast SDKで用意されている画面のカスタマイズについて説明しました。 SDKで用意されている画面とは違う構成にしたい場合や、ウィジェットの並びを全く違うようにしたい場合などは対応できませんが、背景色やボタン部分などは柔軟にカスタマイズできるので、用途に合わせて使いたいですね。
ここまでお読みいただきありがとうございました。
