Android Sender UI をカスタマイズする

キャスト ウィジェットをカスタマイズできます。 色の設定や、ボタン、テキスト、サムネイルの 表示させるボタンの種類も選択できます。

アプリのテーマをカスタマイズする

この例では、カスタムテーマスタイル 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 行により、API 固有のスタイルを定義できます。 導入用のオーバーレイ、ミニ コントローラ、拡張コントローラ お見せしましょう。以降のセクションで例を示します。

キャスト アイコンのカスタマイズ

カスタム mediaRouteTheme をアプリのテーマに追加するには:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

メディア ルーターのカスタムテーマを宣言してカスタムを宣言する 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>

setTint サポート ライブラリのバージョンが 26.0.0 より新しい場合に使用してください。高齢者向け 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 つだけ含める必要があります。それ以外の場合は 1 つのランタイムを指定します 例外がスローされます。スロットにボタンを表示したくない場合は、次のコマンドを使用します。 @id/cast_button_type_empty

カスタムボタンを追加する

MiniControllerFragment は、カスタム コントロール ボタンの追加をサポートしています。 「サムズアップ」などの] ボタンを離します。ステップは次のとおりです。

  1. 以下を使用して、カスタムボタンを格納するスロットを指定します。 @id/cast_button_type_custom MiniControllerFragmentcastControlButtons 属性で指定。

  2. 次のサブクラスを実装する: UIControllerUIController には、状態の作成時に SDK が呼び出すメソッドが含まれます。 キャスト セッションやメディア セッションの変更のUIController のサブクラス かかる時間: ImageView パラメータの 1 つとして指定し、必要に応じて状態を更新します。

  3. サブクラス MiniControllerFragment、 オーバーライドする onCreateView と通話 getButtonImageViewAt(int)ImageView 追加する必要があります次に呼び出します bindViewToUIController(View, UIController) カスタムビューにビューを UIController

  4. 詳しくは、 MediaIntentReceiver アクションの処理方法については、カスタム操作の追加をご覧ください。 クリックします

    スロット 2 のボタンを UIController MyCustomUIController という名前にします。

で確認できます。
// 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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Kotlin
で確認できます。
// 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)
        ...
    }
}
<ph type="x-smartling-placeholder">
</ph>
Java
// 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

デフォルトでは、アクティビティには字幕ボタンが表示され、 前のアイテムへのスキップボタン、次のアイテムへのスキップボタン、ミュート切り替えボタン ボタンを左から右に並べますデベロッパーは 表示するボタンをオーバーライドする castControlButtons 属性 決定しますサポートされているコントロール ボタンのリストは、 同じ ID リソースを ミニ コントローラ ボタンのボタンの種類をご覧ください。

この例では、2 番目のスロットに巻き戻しボタンを配置し、 転送ボタンをクリックし、最初と最後のスロットは空のままにしておきます。

// 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_emptyCastContext はライフサイクルと このアクティビティのプレゼンテーションです。

カスタムボタンを追加する

ExpandedControllerActivity は、SDK では提供されていないカスタム コントロール ボタンの追加をサポートしています。 「高く評価」などの] ボタンを離します。ステップは次のとおりです。

  1. 以下を使用して、カスタムボタンを格納するスロットを指定します。 @id/cast_button_type_custom ExpandedControllerActivitycastControlButtons 属性で指定。 その後、 getButtonImageViewAt(int) 取得して ImageView 追加する必要があります

  2. 次のサブクラスを実装する: UIControllerUIController には、状態の作成時に SDK によって呼び出されるメソッドが含まれます。 キャスト セッションやメディア セッションの変更のサブクラス UIController は、パラメータの 1 つとして ImageView を受け取る必要があります。 必要に応じて状態を更新します。

  3. ExpansionControllerActivity のサブクラスを作成して、 onCreate 呼び出し getButtonImageViewAt(int) ボタンのビュー オブジェクトを取得する必要があります。次に呼び出します bindViewToUIController(View, UIController) カスタム UIController にビューを関連付けます。

  4. 詳しくは、 MediaIntentReceiver カスタム操作の追加をご覧ください。 カスタムボタンからのアクションの処理方法を ご覧ください

スロット 2 のボタンを UIControllerMyCustomUIController を呼び出しました。

// 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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Kotlin
で確認できます。
// 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)
        ...
    }
}
<ph type="x-smartling-placeholder">
</ph>
Java
// 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);
        ...
    }
}