Para personalizar los widgets de Cast, configura los colores, diseña el estilo de los botones, el texto y la miniatura, y elige los tipos de botones que quieres mostrar.
Personaliza el tema del widget
Los widgets del marco de trabajo de Cast admiten el protocolo UIAppearance de Apple en UIKit para cambiar la apariencia de los widgets en tu app, como la posición o el borde de un botón. Usa este protocolo para diseñar los widgets del framework de Cast a fin de que coincidan con el estilo de una app existente.
Ejemplo del botón para transmitir
GCKUICastButton.appearance().tintColor = UIColor.gray
[GCKUICastButton appearance].tintColor = [UIColor grayColor];
Personalizar widget directamente
Personaliza un widget directamente con las propiedades de su superclase. Por ejemplo, es común personalizar el color GCKUICastButton
con la propiedad tintColor:
.
Ejemplo del botón para transmitir
castButton.tintColor = UIColor.gray
castButton.tintColor = [UIColor grayColor];
Elegir botones del control
Tanto la clase de controlador expandida (GCKUIExpandedMediaControlsViewController
) como la clase de minicontrolador (GCKUIMiniMediaControlsViewController
) contienen una barra de botones, y los clientes pueden configurar qué botones se presentan en esas barras. Esto se logra mediante ambas clases de acuerdo con GCKUIMediaButtonBarProtocol
.
La minibarra de controles tiene 3 ranuras configurables para los botones:
SLOT SLOT SLOT
1 2 3
La barra de controles expandida tiene un botón de activación de pausa/reproducción permanente en el medio de la barra más 4 ranuras configurables:
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
Tu app puede obtener una referencia al controlador expandido con la propiedad -[defaultExpandedMediaControlsViewController]
de GCKCastContext
y puede crear un minicontrolador mediante -[createMiniMediaControlsViewController]
.
Cada ranura puede contener un botón de marco de trabajo, un botón personalizado o estar vacío. La lista de botones de control del marco de trabajo se define de la siguiente manera:
Tipo de botón | Descripción |
---|---|
GCKUIMediaButtonTypeNone |
No coloques un botón en este espacio. |
GCKUIMediaButtonTypeCustom |
Botón personalizado |
GCKUIMediaButtonTypePlayPauseToggle |
Alterna entre reproducción y pausa |
GCKUIMediaButtonTypeSkipPrevious |
Salta al elemento anterior en la cola. |
GCKUIMediaButtonTypeSkipNext |
Salta al siguiente elemento de la cola. |
GCKUIMediaButtonTypeRewind30Seconds |
Retrocede la reproducción 30 segundos |
GCKUIMediaButtonTypeForward30Seconds |
Avanzar la reproducción 30 segundos |
GCKUIMediaButtonTypeMuteToggle |
Silenciar y dejar de silenciar el receptor web remoto |
GCKUIMediaButtonTypeClosedCaptions |
Abre un cuadro de diálogo para seleccionar las pistas de texto y audio. |
Puedes encontrar descripciones detalladas de lo que hace cada botón en GCKUIMediaButtonBarProtocol.h
Agrega un botón de la siguiente manera con los métodos de GCKUIMediaButtonBarProtocol
:
Para agregar un botón de marco de trabajo a una barra, solo se necesita una llamada a
-[setButtonType:atIndex:]
.Para agregar un botón personalizado a una barra, la app debe llamar a
-[setButtonType:atIndex:]
conbuttonType
establecido enGCKUIMediaButtonTypeCustom
y, luego, llamar a-[setCustomButton:atIndex:]
y pasar laUIButton
con el mismo índice.
Aplica estilos personalizados a tu app para iOS
El SDK de Cast para iOS te permite aplicar ajustes de estilo a la fuente, el color y las imágenes de los elementos de la IU de los widgets predeterminados en el remitente de iOS, lo que brinda a las vistas una apariencia que coincide con el resto de la app.
En la siguiente sección, se muestra cómo aplicar estilos personalizados a cualquiera de los widgets de Cast o de un grupo de widgets.
Cómo aplicar un estilo a un elemento de la IU de un widget
En este procedimiento, se usa el ejemplo de cómo establecer el color del texto del cuerpo del minicontrolador de tu app en rojo.
Consulta la tabla de vistas y estilos para encontrar el nombre de la vista del widget o grupo de widgets al que quieres aplicarle un estilo. Los nombres de los grupos están marcados con ▼.
Ejemplo: vista del widget
miniController
Encuentra los nombres de los atributos que deseas cambiar en la lista de propiedades de la clase de estilo correspondiente que se enumera en esta tabla.
Ejemplo:
bodyTextColor
es una propiedad de la claseGCKUIStyleAttributesMiniController
.Escribe el código.
Ejemplo:
// 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()
// 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];
Usa este patrón para aplicar cualquier estilo a cualquier elemento de la IU de cualquier widget.
Tabla de vistas y estilos
En esta tabla, se muestran las siete vistas de widgets y tres grupos (marcados con ▼) a los que puedes aplicar estilos.
Nombre de la vista | Tipo | Clase de estilo |
---|---|---|
▼ castViews |
Grupo | GCKUIStyleAttributesCastViews |
▼ deviceControl |
Grupo | GCKUIStyleAttributesDeviceControl |
deviceChooser |
Widget | GCKUIStyleAttributesDeviceChooser; |
noDevicesAvailableController |
Widget | GCKUIStyleAttributesNoDevicesAvailableController |
▼ connectionController |
Grupo | GCKUIStyleAttributesConnectionController |
navigation |
Widget | GCKUIStyleAttributesConnectionNavigation |
toolbar |
Widget | GCKUIStyleAttributesConnectionToolbar |
guestModePairingDialog |
Widget | GCKUIStyleAttributesGuestModePairingDialog |
▼ mediaControl |
Grupo | GCKUIStyleAttributesMediaControl; |
miniController |
Widget | GCKUIStyleAttributesMiniController |
expandedController |
Widget | GCKUIStyleAttributesExpandedController. |
trackSelector |
Widget | GCKUIStyleAttributesTrackSelector |
instructions |
Widget | GCKUIStyleAttributesInstructions |
Jerarquía de estilos
El singleton GCKUIStyle
es el punto de entrada de la API para todas las configuraciones de estilo. Tiene la propiedad castViews
, que es la raíz de la jerarquía de estilo, como se ilustra a continuación. Este diagrama es una forma diferente de ver las mismas vistas y grupos que se muestran en la tabla anterior.
Puedes aplicar un estilo a un widget individual o a un grupo de widgets. La jerarquía de estilo tiene tres grupos de widgets: castViews, deviceControl y mediaControl. El rectángulo de cada grupo encierra sus widgets. Cuando aplicas un estilo a un grupo, se aplica a todos los widgets de ese grupo.
Por ejemplo, el grupo castViews
te permite aplicar un estilo a todos los widgets, y el grupo deviceControl
te permite aplicar un estilo solo a los tres widgets de control de dispositivos. El widget instructions
no pertenece a ningún grupo.
castViews. | ||||||||||
Controldedispositivos | Control de medios | |||||||||
instrucciones ![]() |
dispositivo Selector ![]() |
Pantalla noDevicesAvailable ![]() |
connection Controlador ![]() |
mini Control ![]() |
expandido Controlador ![]() |
seguimiento Selector ![]() |
||||
invitadoMode PairingDialog ![]() |
navegación/barra de herramientas ![]() ![]() |
|||||||||
Nota al pie: En este diagrama, los nombres de widgets que se muestran en dos líneas deben escribirse en código como una palabra, en una línea y sin espacios. Por ejemplo, device Chooser
debe escribirse deviceChooser
. Coloca el cursor sobre las imágenes para agrandarlas.