您可以藉由設定顏色、設定按鈕、文字和縮圖外觀的樣式,以及選擇要顯示的按鈕類型,來自訂 Cast 小工具。
自訂應用程式主題
本例會建立自訂主題樣式 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>
如果支援資料庫版本高於 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
有三個位置可顯示專輯封面和兩個按鈕;如果未填入專輯封面,則三個控制按鈕。
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 不提供的自訂控制項按鈕,例如「拇指朝上」按鈕。步驟如下:
在
MiniControllerFragment
的castControlButtons
屬性中使用@id/cast_button_type_custom
,以指定要包含自訂按鈕的版位。實作
UIController
的子類別。UIController
包含在投放工作階段或媒體工作階段狀態變更時,SDK 呼叫的方法。UIController
的子類別應使用ImageView
做為參數之一,並視需要更新其狀態。子類別
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>
選擇按鈕
展開控制器的「活動」有五個版位顯示控制按鈕。中間版位一律顯示播放/暫停切換按鈕,而且無法設定。其他四個運算單元是由傳送端應用程式設定 (從左到右)。
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 未提供的自訂控制項按鈕,例如「喜歡」按鈕。步驟如下:
在
ExpandedControllerActivity
的castControlButtons
屬性中使用@id/cast_button_type_custom
,以指定要包含自訂按鈕的版位。接著,您可以使用getButtonImageViewAt(int)
取得該自訂按鈕的ImageView
。實作
UIController
的子類別。UIController
包含 SDK 在投放工作階段狀態或媒體工作階段狀態變更時,會呼叫的方法。您的UIController
子類別應使用ImageView
做為參數之一,並視需要更新其狀態。子類別展開 edControllerActivity,然後覆寫
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); ... } }