Você pode personalizar os widgets do Google Cast definindo as cores, estilizando os botões, o texto e a aparência da miniatura, além de escolher os tipos de botões a serem mostrados.
Personalizar tema do widget
Os widgets do framework do Google Cast oferecem suporte ao protocolo UIAppearance da Apple no UIKit para mudar a aparência dos widgets em todo o app, como a posição ou a borda de um botão. Use esse protocolo para estilizar os widgets do framework do Google Cast de acordo com um estilo de app existente.
Exemplo do botão Transmitir
GCKUICastButton.appearance().tintColor = UIColor.gray
[GCKUICastButton appearance].tintColor = [UIColor grayColor];
Personalizar widget diretamente
Personalize um widget diretamente usando as propriedades da superclasse dele. Por exemplo,
é comum personalizar a cor
GCKUICastButton
usando a
propriedade
tintColor:
.
Exemplo do botão Transmitir
castButton.tintColor = UIColor.gray
castButton.tintColor = [UIColor grayColor];
Escolher botões do controle
A classe de controle expandida
(GCKUIExpandedMediaControlsViewController
)
e a classe de minicontrole
(GCKUIMiniMediaControlsViewController
)
contêm uma barra de botões, e os clientes podem configurar quais botões serão apresentados
nessas barras. Isso é possível por ambas as classes em conformidade com
GCKUIMediaButtonBarProtocol
.
A minibarra de controle tem três slots configuráveis para botões:
SLOT SLOT SLOT
1 2 3
A barra de controle expandida tem um botão de alternância permanente para reproduzir/pausar no meio da barra, além de quatro slots configuráveis:
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
Seu app pode receber uma referência ao controle expandido com a
propriedade -[defaultExpandedMediaControlsViewController]
de
GCKCastContext
e pode criar um minicontrole usando
-[createMiniMediaControlsViewController]
.
Cada slot pode conter um botão de framework, um botão personalizado ou estar vazio. A lista de botões de controle do framework é definida como:
Tipo de botão | Descrição |
---|---|
GCKUIMediaButtonTypeNone |
Não colocar um botão neste slot |
GCKUIMediaButtonTypeCustom |
Botão personalizado |
GCKUIMediaButtonTypePlayPauseToggle |
Alterna entre reproduzir e pausar |
GCKUIMediaButtonTypeSkipPrevious |
Pula para o item anterior na fila |
GCKUIMediaButtonTypeSkipNext |
Pula para o próximo item na fila |
GCKUIMediaButtonTypeRewind30Seconds |
Retroce a reprodução em 30 segundos. |
GCKUIMediaButtonTypeForward30Seconds |
Avançar a reprodução em 30 segundos |
GCKUIMediaButtonTypeMuteToggle |
Desativa e ativa o som do receptor da Web remoto |
GCKUIMediaButtonTypeClosedCaptions |
Abre uma caixa de diálogo para selecionar faixas de texto e áudio |
As descrições detalhadas do que cada botão faz podem ser encontradas em
GCKUIMediaButtonBarProtocol.h
.
Adicione um botão da seguinte maneira usando métodos na
GCKUIMediaButtonBarProtocol
:
Para adicionar um botão de framework a uma barra, basta uma chamada para
-[setButtonType:atIndex:]
.Para adicionar um botão personalizado a uma barra, seu app precisa chamar
-[setButtonType:atIndex:]
combuttonType
definido comoGCKUIMediaButtonTypeCustom
e, em seguida, chamar-[setCustomButton:atIndex:]
transmitindoUIButton
com o mesmo índice.
Aplicar estilos personalizados ao seu app iOS
O SDK do Cast para iOS permite definir o estilo da fonte, da cor e das imagens de elementos da interface dos widgets padrão no remetente do iOS, proporcionando às visualizações uma aparência que combina com o restante do app.
A seção a seguir mostra como aplicar estilos personalizados a qualquer um dos widgets ou grupo de widgets do Google Cast.
Como aplicar um estilo a um elemento da IU de um widget
Este procedimento usa o exemplo de definir a cor do corpo do texto do minicontrole do seu app como vermelha.
Procure na tabela de visualizações e estilos para encontrar o nome da visualização do widget ou grupo de widgets que você quer estilizar. Os nomes dos grupos são marcados com ▼.
Exemplo: visualização de widget
miniController
Encontre os nomes dos atributos que você quer mudar na lista de propriedades na classe de estilo correspondente listada nesta tabela.
Exemplo:
bodyTextColor
é uma propriedade da classeGCKUIStyleAttributesMiniController
.Escreva o código.
Exemplos
// 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];
Use esse padrão para aplicar um estilo a qualquer elemento da interface de um widget.
Tabela de visualizações e estilos
Esta tabela mostra as sete visualizações de widget e os três grupos (marcados com ▼) aos quais você pode aplicar estilos.
Nome da visualização | Tipo | Classe de estilo |
---|---|---|
▼ castViews |
Grupo | GCKUIStyleAttributesCastViews |
▼ deviceControl |
Grupo | GCKUIStyleAttributesDeviceControl |
deviceChooser |
Widget | GCKUIStyleAttributesDeviceChooser |
noDevicesAvailableController |
Widget | GCKUIStyleAttributesNoDevicesAvailableController |
▼ connectionController |
Grupo | GCKUIStyleAttributesConnectionController |
navigation |
Widget | GCKUIStyleAttributesConnectionNavigation |
toolbar |
Widget | GCKUIStyleAttributesConnectionToolbar |
▼ mediaControl |
Grupo | GCKUIStyleAttributesMediaControl |
miniController |
Widget | GCKUIStyleAttributesMiniController |
expandedController |
Widget | GCKUIStyleAttributesExpandedController |
trackSelector |
Widget | GCKUIStyleAttributesTrackSelector |
instructions |
Widget | GCKUIStyleAttributesInstructions |
Hierarquia de estilo
O Singleton GCKUIStyle
é o ponto de entrada da API para todas as configurações de estilo. Ele tem a propriedade
castViews
, que é a raiz da hierarquia de estilos,
conforme ilustrado abaixo. Esse diagrama é uma maneira diferente de analisar as mesmas
visualizações e grupos mostrados na tabela anterior.
É possível aplicar um estilo a um widget individual ou a um grupo de widgets. A hierarquia de estilos tem três grupos de widgets: castViews, deviceControl e mediaControl. O retângulo de cada grupo delimita os widgets. Quando você aplica um estilo a um grupo, ele é aplicado a todos os widgets desse grupo.
Por exemplo, o grupo castViews
permite aplicar um estilo a todos os widgets, e
o grupo deviceControl
permite aplicar um estilo apenas aos três widgets de controle
do dispositivo. O widget instructions
não pertence a nenhum grupo.
castViews | ||||||||||
deviceControl | mediaControl | |||||||||
instruções |
dispositivo Seletor |
Tela noDevicesAvailable |
conexão Controlador |
mini Controle |
expandido Controle |
faixa Seletor |
||||
navegação / barra de ferramentas |
||||||||||
Nota de rodapé:os nomes de widget no diagrama mostrados em duas linhas precisam ser escritos em código como uma palavra, em uma linha, sem espaços. Por exemplo,
device Chooser
precisa ser escrito como deviceChooser
. Passe o mouse para ampliar as imagens.