色の設定、ボタン、テキスト、サムネイルの外観のスタイル設定、表示するボタンの種類の選択など、キャスト ウィジェットをカスタマイズできます。
アプリのテーマをカスタマイズする
この例では、カスタム色、導入オーバーレイ スタイル、ミニ コントローラ スタイル、展開されたコントローラ スタイルを定義できるカスタムテーマ スタイル Theme.CastVideosTheme
を作成します。
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Set AppCompat's color theming attrs -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="android:textColorPrimary">@color/primary_text</item>
<item name="android:textColorSecondary">@color/secondary_text</item>
<item name="castIntroOverlayStyle">@style/CustomCastIntroOverlay</item>
<item name="castMiniControllerStyle">@style/CustomCastMiniController</item>
<item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>
</style>
上記の最後の 3 行では、このテーマの一部として、導入オーバーレイ、ミニ コントローラ、展開されたコントローラに固有のスタイルを定義できます。以降のセクションで例を示します。
キャストボタンをカスタマイズする
アプリの Theme にカスタム mediaRouteTheme
を追加するには:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
<item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>
カスタム Media Router テーマを宣言し、カスタム mediaRouteButtonStyle
を宣言します。
<style name="CustomMediaRouterTheme" parent="Theme.MediaRouter">
<item name="mediaRouteButtonStyle">@style/CustomMediaRouteButtonStyle</item>
</style>
<style name="CustomMediaRouteButtonStyle" parent="Widget.MediaRouter.Light.MediaRouteButton">
<item name="mediaRouteButtonTint">#EEFF41</item>
</style>
サポート ライブラリのバージョンが 26.0.0 より新しい場合は、setTint
を使用する必要があります。古いサポート ライブラリ バージョンの場合は、代わりに buttonTint
を使用してください。
導入オーバーレイ テーマをカスタマイズする
IntroductoryOverlay
クラスは、アプリがカスタムテーマでオーバーライドできるさまざまなスタイル属性をサポートしています。この例は、オーバーレイ ウィジェットのボタンとタイトルの両方のテキストの外観をオーバーライドする方法を示しています。
<style name="CustomCastIntroOverlay" parent="CastIntroOverlay">
<item name="castButtonTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Button</item>
<item name="castTitleTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Title</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Button" parent="android:style/TextAppearance">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Title"parent="android:style/TextAppearance.Large">
<item name="android:textColor">#FFFFFF</item>
</style>
ミニ コントローラをカスタマイズする
テーマのカスタマイズ
MiniControllerFragment
クラスは、アプリがカスタムテーマでオーバーライドできるさまざまなスタイル属性をサポートしています。この例では、サムネイル画像の表示を有効にし、サブヘッドと字幕の両方のテキストの外観をオーバーライドし、色を設定してボタンをカスタマイズする方法を示します。
<style name="CustomCastMiniController" parent="CastMiniController">
<item name="castShowImageThumbnail">true</item>
<item name="castTitleTextAppearance">@style/TextAppearance.AppCompat.Subhead</item>
<item name="castSubtitleTextAppearance">@style/TextAppearance.AppCompat.Caption</item>
<item name="castBackground">#FFFFFF</item>
<item name="castProgressBarColor">#FFFFFF</item>
<item name="castPlayButtonDrawable">@drawable/cast_ic_mini_controller_play</item>
<item name="castPauseButtonDrawable">@drawable/cast_ic_mini_controller_pause</item>
<item name="castStopButtonDrawable">@drawable/cast_ic_mini_controller_stop</item>
<item name="castLargePlayButtonDrawable">@drawable/cast_ic_mini_controller_play_large</item>
<item name="castLargePauseButtonDrawable">@drawable/cast_ic_mini_controller_pause_large</item>
<item name="castLargeStopButtonDrawable">@drawable/cast_ic_mini_controller_stop_large</item>
<item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_mini_controller_skip_prev</item>
<item name="castSkipNextButtonDrawable">@drawable/cast_ic_mini_controller_skip_next</item>
<item name="castRewind30ButtonDrawable">@drawable/cast_ic_mini_controller_rewind30</item>
<item name="castForward30ButtonDrawable">@drawable/cast_ic_mini_controller_forward30</item>
<item name="castMuteToggleButtonDrawable">@drawable/cast_ic_mini_controller_mute</item>
<item name="castClosedCaptionsButtonDrawable">@drawable/cast_ic_mini_controller_closed_caption</item
</style>
ボタンの選択
MiniControllerFragment
には、アルバムアートが表示される 3 つのスロットと 2 つのボタンがあります。アルバムアートが入力されていない場合は、3 つのコントロール ボタンが表示されます。
SLOT SLOT SLOT
1 2 3
デフォルトでは、フラグメントに再生/一時停止の切り替えボタンが表示されます。デベロッパーは、castControlButtons
属性を使用して、表示するボタンをオーバーライドできます。サポートされているコントロール ボタンは、ID リソースとして定義されます。
ボタンのタイプ | 説明 |
---|---|
@id/cast_button_type_empty |
このスロットにボタンを配置しない |
@id/cast_button_type_custom |
カスタムボタン |
@id/cast_button_type_play_pause_toggle |
再生と一時停止を切り替えます |
@id/cast_button_type_skip_previous |
キューの前のアイテムにスキップします。 |
@id/cast_button_type_skip_next |
キューの次のアイテムにスキップします。 |
@id/cast_button_type_rewind_30_seconds |
再生を 30 秒巻き戻します |
@id/cast_button_type_forward_30_seconds |
再生を 30 秒早送りします |
@id/cast_button_type_mute_toggle |
レシーバーのミュートとミュート解除 |
@id/cast_button_type_closed_caption |
テキスト トラックと音声トラックを選択するダイアログを開く |
アルバムアート、再生/一時停止切り替えボタン、スキップ先頭ボタンを左から右の順に使用する例を次に示します。
<array name="cast_mini_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_play_pause_toggle</item>
<item>@id/cast_button_type_forward_30_seconds</item>
</array>
...
<fragment
android:id="@+id/cast_mini_controller"
...
app:castControlButtons="@array/cast_mini_controller_control_buttons"
class="com.google.android.gms.cast.framework.media.widget.MiniControllerFragment">
警告: この配列には 3 つの項目を正確に含める必要があります。含めないと、ランタイム例外がスローされます。スロットにボタンを表示しない場合は、@id/cast_button_type_empty
を使用します。
カスタムボタンを追加する
MiniControllerFragment
は、SDK に用意されていないカスタム コントロール ボタン(「高評価」ボタンなど)の追加をサポートしています。ステップは次のとおりです。
MiniControllerFragment
のcastControlButtons
属性で@id/cast_button_type_custom
を使用して、カスタム ボタンを含むスロットを指定します。UIController
のサブクラスを実装します。UIController
には、キャスト セッションまたはメディア セッションの状態が変化したときに SDK によって呼び出されるメソッドが含まれています。UIController
のサブクラスは、ImageView
をパラメータの 1 つとして受け取り、必要に応じてその状態を更新する必要があります。MiniControllerFragment
のサブクラスを作成し、onCreateView
をオーバーライドしてgetButtonImageViewAt(int)
を呼び出し、そのカスタム ボタンのImageView
を取得します。次に、bindViewToUIController(View, UIController)
を呼び出して、ビューをカスタムUIController
に関連付けます。カスタムボタンからのアクションを処理する方法については、カスタム アクションを追加するの
MediaIntentReceiver
をご覧ください。スロット 2 のボタンを
MyCustomUIController
というUIController
に関連付ける例を次に示します。
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_custom</item>
<item>@id/cast_button_type_empty</item>
</array>
// MyCustomUIController.kt class MyCustomUIController(private val mView: View) : UIController() { override fun onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.visibility = View.INVISIBLE ... } } // MyMiniControllerFragment.kt class MyMiniControllerFragment : MiniControllerFragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { super.onCreateView(inflater, container, savedInstanceState) val customButtonView = getButtonImageViewAt(2) val myCustomUiController = MyCustomUIController(customButtonView) uiMediaController.bindViewToUIController(customButtonView, myCustomUiController) ... } }
// MyCustomUIController.java class MyCustomUIController extends UIController { private final View mView; public MyCustomUIController(View view) { mView = view; } @Override public onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.setVisibility(View.INVISIBLE); ... } } // MyMiniControllerFragment.java class MyMiniControllerFragment extends MiniControllerFragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { super.onCreateView(inflater, container, savedInstanceState); ImageView customButtonView = getButtonImageViewAt(2); MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView); getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController); ... } }
拡張コントローラをカスタマイズする
テーマのカスタマイズ
展開されたコントローラのアクティビティがダークモードのツールバーを使用している場合は、明るいテキストと明るいアイコンの色を使用するようにツールバーのテーマを設定できます。
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="castExpandedControllerToolbarStyle">
@style/ThemeOverlay.AppCompat.Dark.ActionBar
</item>
</style>
展開したコントローラ上のボタンの描画に使用する独自の画像を指定できます。
<style name="CustomCastExpandedController" parent="CastExpandedController">
<item name="castButtonColor">@null</item>
<item name="castPlayButtonDrawable">@drawable/cast_ic_expanded_controller_play</item>
<item name="castPauseButtonDrawable">@drawable/cast_ic_expanded_controller_pause</item>
<item name="castStopButtonDrawable">@drawable/cast_ic_expanded_controller_stop</item>
<item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_expanded_controller_skip_previous</item>
<item name="castSkipNextButtonDrawable">@drawable/cast_ic_expanded_controller_skip_next</item>
<item name="castRewind30ButtonDrawable">@drawable/cast_ic_expanded_controller_rewind30</item>
<item name="castForward30ButtonDrawable">@drawable/cast_ic_expanded_controller_forward30</item>
</style>
ボタンの選択
拡張コントローラのアクティビティには、コントロール ボタンを表示する 5 つのスロットがあります。中央のスロットには常に再生/一時停止切り替えボタンが表示され、構成できません。他の 4 つのスロットは、送信側のアプリによって左から右に設定できます。
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
デフォルトでは、アクティビティには、左から右に、字幕ボタン、前の項目にスキップボタン、次の項目にスキップボタン、ミュート切り替えボタンの 4 つのスロットが表示されます。デベロッパーは属性 castControlButtons
を使用して、どのスロットにどのボタンを表示するかをオーバーライドできます。サポートされているコントロール ボタンのリストは、ミニ コントローラ ボタンのボタンタイプと同じ ID リソースとして定義されます。
次の例では、2 番目のスロットに巻き戻しボタン、3 番目のスロットに早送りボタンを配置し、最初のスロットと最後のスロットを空にしています。
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_forward_30_seconds</item>
<item>@id/cast_button_type_empty</item>
</array>
...
// styles.xml
<style name="Theme.MyTheme">
<item name="castExpandedControllerStyle">
@style/CustomCastExpandedController
</item>
</style>
...
<style name="CustomCastExpandedController" parent="CastExpandedController">
<item name="castControlButtons">
@array/cast_expanded_controller_control_buttons
</item>
</style>
配列には 4 つのアイテムを正確に含める必要があります。そうしないと、ランタイム例外がスローされます。スロットにボタンを表示しない場合は、@id/cast_button_type_empty
を使用します。CastContext
は、このアクティビティのライフサイクルと表示を管理できます。
カスタムボタンを追加する
ExpandedControllerActivity
は、SDK で提供されていないカスタム コントロール ボタン(「高評価」ボタンなど)の追加をサポートしています。ステップは次のとおりです。
ExpandedControllerActivity
のcastControlButtons
属性で@id/cast_button_type_custom
を使用して、カスタム ボタンを含むスロットを指定します。その後、getButtonImageViewAt(int)
を使用して、そのカスタムボタンのImageView
を取得できます。UIController
のサブクラスを実装します。UIController
には、キャスト セッションまたはメディア セッションの状態が変化したときに SDK によって呼び出されるメソッドが含まれています。UIController
のサブクラスは、ImageView
をパラメータの 1 つとして受け取り、必要に応じてその状態を更新する必要があります。ExpandedControllerActivity のサブクラスを作成し、
onCreate
をオーバーライドしてgetButtonImageViewAt(int)
を呼び出し、ボタンのビュー オブジェクトを取得します。次に、bindViewToUIController(View, UIController)
を呼び出して、ビューをカスタムUIController
に関連付けます。カスタム ボタンからのアクションを処理する方法については、カスタム アクションを追加するの
MediaIntentReceiver
をご覧ください。
スロット 2 のボタンを MyCustomUIController
という UIController
に関連付ける例を次に示します。
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_custom</item>
<item>@id/cast_button_type_empty</item>
</array>
// MyCustomUIController.kt class MyCustomUIController(private val mView: View) : UIController() { override fun onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.visibility = View.INVISIBLE ... } } // MyExpandedControllerActivity.kt internal class MyExpandedControllerActivity : ExpandedControllerActivity() { public override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val customButtonView = getButtonImageViewAt(2) val myCustomUiController = MyCustomUIController(customButtonView) uiMediaController.bindViewToUIController(customButtonView, myCustomUiController) ... } }
// MyCustomUIController.java class MyCustomUIController extends UIController { private final View mView; public MyCustomUIController(View view) { mView = view; } @Override public onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.setVisibility(View.INVISIBLE); ... } } // MyExpandedControllerActivity.java class MyExpandedControllerActivity extends ExpandedControllerActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ImageView customButtonView = getButtonImageViewAt(2); MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView); getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController); ... } }