自訂 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>

上方的最後三行可讓您定義 簡介重疊、迷你控制器和展開式控制器 進一步探討範例請見後續章節。

自訂「投放」按鈕

如何在應用程式的主題中加入自訂 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 有三個位置可顯示專輯封面 和兩個按鈕；如果未填入專輯封面，則為三個控制按鈕。

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">

警告：這個陣列必須包含三個項目，否則會以執行階段 系統會擲回例外狀況如果您不想在版位中顯示按鈕，請使用 @id/cast_button_type_empty。

新增自訂按鈕

MiniControllerFragment 支援新增自訂控制項按鈕， 並非由 SDK 提供，例如「讚」按鈕。步驟如下：

  1. 使用以下程式碼指定要包含自訂按鈕的版位 @id/cast_button_type_custom敬上 在 MiniControllerFragment 的 castControlButtons 屬性中。

  2. 實作 UIController。 UIController 包含 SDK 在狀態時呼叫的方法 投放工作階段或媒體工作階段的變更你的 UIController 子類別 應該 ImageView 做為其中一個參數，然後視需要更新其狀態。

  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>
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)
        ...
    }
}
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>

選擇按鈕

展開控制器的「活動」有五個版位顯示控制按鈕。中間 版位一律會顯示播放/暫停切換按鈕，而且無法設定。其他四個 傳送端應用程式可從左到右設定版位。

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

根據預設，活動會顯示隱藏式輔助字幕按鈕，而是直接跳到 「上一個項目」按鈕、「跳至下一個項目」按鈕，以及「靜音」切換鈕 按鈕，從左到右，這些版位開發人員可以使用 屬性 castControlButtons 即可覆寫要顯示的按鈕 以及要顯示哪個版位支援的控制按鈕清單定義為 ID 資源 迷你控制器按鈕的按鈕類型。

以下範例把倒轉按鈕放在第二個版位， 並將第一個和最後一個版位留空：

// 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>

陣列必須包含四個項目，否則執行階段例外狀況將會 可能會擲回如果您不想在版位中顯示按鈕，請使用 @id/cast_button_type_empty。「CastContext」可以管理生命週期 此活動的呈現方式。

新增自訂按鈕

ExpandedControllerActivity 支援新增 SDK 未提供的自訂控制項按鈕。 例如「讚」按鈕。步驟如下：

  1. 使用以下程式碼指定要包含自訂按鈕的版位 @id/cast_button_type_custom敬上 在 ExpandedControllerActivity 的 castControlButtons 屬性中。 接著您就能 getButtonImageViewAt(int)敬上 來取得 ImageView 自訂按鈕

  2. 實作 UIController。 UIController 包含 SDK 在狀態時呼叫的方法 投放工作階段或媒體工作階段的變更您的子類別 UIController 應使用 ImageView 做為參數， 並視需求更新狀態

  3. 建立並覆寫子類別 onCreate敬上 並撥號 getButtonImageViewAt(int) 取得按鈕的檢視物件然後呼叫 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>
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)
        ...
    }
}
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);
        ...
    }
}
上一頁
整合 Cast
下一頁
將 UI 測試自動化