您可以自定义 Cast widget 通过设置颜色,设置按钮、文本和缩略图的样式, 外观以及选择要显示的按钮类型。
自定义应用主题
此示例创建了一个自定义主题样式 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
默认情况下,fragment 会显示一个播放/暂停切换按钮。开发者可以使用
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); ... } }
自定义展开的控制器
自定义主题背景
如果展开的控制器的 activity 使用深色主题工具栏,您可以 可以在工具栏上设置主题,以使用浅色文本和浅色图标颜色:
<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>
选择按钮
展开的控制器的 activity 有 5 个槽位用于显示控件按钮。中间 显示“播放/暂停”切换按钮,且不可配置。其他四个 槽由发送方应用按照从左到右的顺序进行配置。
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
默认情况下,Activity 会显示一个字幕按钮,用于跳转至
“上一项”按钮、“跳至下一项”按钮以及“静音”切换开关
按钮。开发者可以使用
属性 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
作为一个参数, 并根据需要更新其状态。为 ExpandControllerActivity 创建子类,然后替换
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); ... } }