你可以自訂投放小工具 設定顏色、設定按鈕、文字和縮圖樣式 以及選擇要顯示的按鈕類型。
自訂應用程式主題
本例會建立自訂主題樣式 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 提供,例如「讚」按鈕。步驟如下:
使用以下程式碼指定要包含自訂按鈕的版位
@id/cast_button_type_custom
敬上 在MiniControllerFragment
的castControlButtons
屬性中。實作
UIController
。UIController
包含 SDK 在狀態時呼叫的方法 投放工作階段或媒體工作階段的變更幅度你的UIController
子類別 應該ImageView
做為其中一個參數,然後視需要更新其狀態。子類別
MiniControllerFragment
然後覆寫onCreateView
並撥號getButtonImageViewAt(int)
來取得ImageView
自訂按鈕然後呼叫bindViewToUIController(View, UIController)
敬上 連結檢視畫面與自訂圖表UIController
。詳情請見
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>
// 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 未提供的自訂控制項按鈕。
例如「讚」按鈕。步驟如下:
使用以下程式碼指定要包含自訂按鈕的版位
@id/cast_button_type_custom
敬上 在ExpandedControllerActivity
的castControlButtons
屬性中。 接著您就能getButtonImageViewAt(int)
敬上 來取得ImageView
自訂按鈕實作
UIController
。UIController
包含 SDK 在狀態時呼叫的方法 投放工作階段或媒體工作階段的變更幅度您的子類別UIController
應使用ImageView
做為參數, 並視需求更新狀態建立並覆寫子類別
onCreate
敬上 並撥號getButtonImageViewAt(int)
取得按鈕的檢視物件然後呼叫bindViewToUIController(View, UIController)
敬上 將檢視畫面與自訂UIController
建立關聯。詳情請見
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>
// 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); ... } }