自定义 iOS 发件人界面

您可以自定义投射 微件 通过设置颜色,设置按钮、文本和缩略图的样式, 外观以及选择要显示的按钮类型。

自定义微件主题

Cast 框架微件支持 Apple UIAppearance 协议 UIKit 可更改整个应用中 widget 的外观,例如位置或 按钮边框。使用此协议设置 Cast 框架微件的样式, 与现有应用样式保持一致

投放按钮示例

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Swift
GCKUICastButton.appearance().tintColor = UIColor.gray
Objective-C
[GCKUICastButton appearance].tintColor = [UIColor grayColor];

直接自定义 widget

直接使用 widget 父类的属性对其进行自定义。例如: 一种常见的做法是 GCKUICastButton 使用 tintColor: 属性。

投放按钮示例

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Swift
castButton.tintColor = UIColor.gray
Objective-C
castButton.tintColor = [UIColor grayColor];

选择控制器按钮

展开的控制器类 (GCKUIExpandedMediaControlsViewController 个) 以及迷你控制器类 (GCKUIMiniMediaControlsViewController) 包含一个按钮栏,并且客户端可以配置要向哪些按钮显示 。这是通过两个符合 GCKUIMediaButtonBarProtocol

迷你控制器栏具有 3 个可配置的按钮槽位:

SLOT  SLOT  SLOT
  1     2     3

展开的控制器栏在 中条和 4 个可配置广告位:

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

您的应用可以通过 -[defaultExpandedMediaControlsViewController] 属性 GCKCastContext 并可以使用 -[createMiniMediaControlsViewController]

每个槽位可以包含框架按钮、自定义按钮 或为空。框架控件按钮列表的定义如下:

按钮类型 说明
GCKUIMediaButtonTypeNone 不要在此槽位中放置按钮
GCKUIMediaButtonTypeCustom 自定义按钮
GCKUIMediaButtonTypePlayPauseToggle 在播放和暂停之间切换
GCKUIMediaButtonTypeSkipPrevious 跳至队列中的上一项
GCKUIMediaButtonTypeSkipNext 跳至队列中的下一项
GCKUIMediaButtonTypeRewind30Seconds 将播放快退 30 秒
GCKUIMediaButtonTypeForward30Seconds 快进 30 秒
GCKUIMediaButtonTypeMuteToggle 将远程网络接收器静音和取消静音
GCKUIMediaButtonTypeClosedCaptions 打开一个对话框以选择文本和音轨

有关每个按钮功能的详细说明,请访问 GCKUIMediaButtonBarProtocol.h

使用 GCKUIMediaButtonBarProtocol:

  • 若要向栏添加框架按钮,只需调用 -[setButtonType:atIndex:]

  • 要向栏中添加自定义按钮,您的应用必须调用 -[setButtonType:atIndex:]buttonType 设置为) GCKUIMediaButtonTypeCustom,然后调用 -[setCustomButton:atIndex:] 传递具有相同索引的 UIButton

将自定义样式应用到 iOS 应用

借助 Cast iOS SDK,您可以设置 iOS 发送器中默认微件的界面元素,从而 呈现与应用的其余部分一致的外观和风格。

以下部分介绍了如何将自定义样式应用于 “投射”微件或“Google Cast”微件组

将样式应用于 widget 的界面元素

此过程采用的是为网页设置正文文本颜色的示例 应用的迷你控制器图标变为红色。

  1. 请参见视图和样式表 用于查找所需的微件或微件组的视图名称 样式。群组名称会标有 ▼。

    示例:miniController widget 视图

  2. 找到您要更改的属性的名称 与 v3 中列出的相应样式类 表格。

    示例:bodyTextColorGCKUIStyleAttributesMiniController 类。

  3. 编写代码。

    示例:

。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Swift
// Get the shared instance of GCKUIStyle
let castStyle = GCKUIStyle.sharedInstance()
// Set the property of the desired cast widget.
castStyle.castViews.mediaControl.miniController.bodyTextColor = UIColor.red
// Refresh all currently visible views with the assigned styles.
castStyle.apply()
Objective-C
// Get the shared instance of GCKUIStyle.
GCKUIStyle *castStyle = [GCKUIStyle sharedInstance];
// Set the property of the desired cast widget.
castStyle.castViews.mediaControl.miniController.bodyTextColor = [UIColor redColor];
// Refresh all currently visible views with the assigned styles.
[castStyle applyStyle];

使用此模式可将样式应用到任何 widget 的任何界面元素。

视图和样式表

此表显示了七个微件视图和三个分组(用 ▼ 标记) 您可以应用样式

视图名称 类型 样式类
castViews 群组 GCKUIStyleAttributesCastViews
deviceControl 群组 GCKUIStyleAttributesDeviceControl
deviceChooser 微件 GCKUIStyleAttributesDeviceChooser
noDevicesAvailableController 微件 GCKUIStyleAttributesNoDevicesAvailableController
connectionController 群组 GCKUIStyleAttributesConnectionController
navigation 微件 GCKUIStyleAttributesConnectionNavigation
toolbar 微件 GCKUIStyleAttributesConnectionToolbar
mediaControl 群组 GCKUIStyleAttributesMediaControl
miniController 微件 GCKUIStyleAttributesMiniController
expandedController 微件 GCKUIStyleAttributesExpandedController
trackSelector 微件 GCKUIStyleAttributesTrackSelector
instructions 微件 GCKUIStyleAttributesInstructions

样式层次结构

GCKUIStyle 单例是所有样式设置的 API 入口点。它具有以下属性: castViews样式层次结构的根, 如下图所示;这张图从不同的角度来观察 上中显示的数据视图和群组。

您可以将样式应用于单个微件或一组微件。 样式层次结构有三个 widget 组:castViews、deviceControl、 和 mediaControl。每个组的矩形都包含其 widget。 将样式应用于某个组时,该样式会应用于该组中的所有微件。

例如,通过 castViews 组,您可以将样式应用于所有 widget, “deviceControl”组可让你仅将某个样式应用于它的三台设备 控件微件。instructions widget 不属于任何组。

castViews
deviceControl mediaControl
说明

设备
选择器
noDevicesAvailable 屏幕
连接
控制器
迷你
控制器
已展开
控制器
track
选择器
导航 / 工具栏

脚注:在此图中,以两行显示的微件名称应 单独写成一个单词,一行,没有空格。例如: device Chooser 应写为 deviceChooser。滚动图片即可放大 。