Personnaliser l'UI de l'expéditeur iOS

Vous pouvez personnaliser les widgets Cast en définissant les couleurs, en stylisant les boutons, le texte et l'apparence des vignettes, et en choisissant les types de boutons à afficher.

Personnaliser le thème du widget

Les widgets du framework Cast sont compatibles avec le protocole Apple UIApparence dans UIKit afin de modifier l'apparence des widgets de votre application, comme la position ou la bordure d'un bouton. Utilisez ce protocole pour styliser les widgets du framework Cast de sorte qu'ils correspondent au style d'une application existante.

Exemple d'icône Cast

GCKUICastButton.appearance().tintColor = UIColor.gray

[GCKUICastButton appearance].tintColor = [UIColor grayColor];

Personnaliser le widget directement

Personnalisez un widget directement à l'aide des propriétés de sa super-classe. Par exemple, il est courant de personnaliser la couleur GCKUICastButton à l'aide de la propriété tintColor:.

Exemple d'icône Cast

castButton.tintColor = UIColor.gray

castButton.tintColor = [UIColor grayColor];

Choisir les boutons de la manette

La classe de manette développée (GCKUIExpandedMediaControlsViewController) et la classe de mini-télécommande (GCKUIMiniMediaControlsViewController) contiennent une barre de boutons. Les clients peuvent configurer les boutons à afficher sur ces barres. Pour ce faire, les deux classes conformes à GCKUIMediaButtonBarProtocol le font.

La barre de mini-contrôleur comporte trois emplacements configurables pour les boutons:

SLOT  SLOT  SLOT
  1     2     3

La barre de manette développée dispose d'un bouton d'activation/de désactivation permanent de lecture/pause au milieu de la barre, ainsi que de quatre emplacements configurables:

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

Votre application peut obtenir une référence à la manette développée avec la propriété -[defaultExpandedMediaControlsViewController] de GCKCastContext et créer une mini-télécommande à l'aide de -[createMiniMediaControlsViewController].

Chaque emplacement peut contenir un bouton du framework ou un bouton personnalisé, ou être vide. La liste des boutons de commande du framework est définie comme suit:

Vous trouverez des descriptions détaillées de la fonction de chaque bouton dans GCKUIMediaButtonBarProtocol.h.

Ajoutez un bouton comme suit à l'aide de méthodes sur GCKUIMediaButtonBarProtocol:

• Pour ajouter un bouton de framework à une barre, il vous suffit d'appeler -[setButtonType:atIndex:].

• Pour ajouter un bouton personnalisé à une barre, votre application doit appeler -[setButtonType:atIndex:] avec buttonType défini sur GCKUIMediaButtonTypeCustom, puis appeler -[setCustomButton:atIndex:] en transmettant le UIButton avec le même index.

Appliquer des styles personnalisés à votre application iOS

Le SDK Cast pour iOS vous permet de styliser la police, la couleur et les images des éléments d'interface utilisateur des widgets par défaut dans votre émetteur iOS, afin d'harmoniser l'apparence des vues avec le reste de votre application.

La section suivante explique comment appliquer des styles personnalisés à l'un des widgets ou au groupe de widgets Cast.

Appliquer un style à un élément d'interface utilisateur d'un widget

Cette procédure utilise l'exemple de définition de la couleur du corps du texte de la mini-télécommande de votre application sur rouge.

1. Dans le tableau des vues et des styles, recherchez le nom de la vue du widget ou du groupe de widgets que vous souhaitez styliser. Les noms des groupes sont indiqués par ▼.

   Exemple: vue Widget miniController

2. Recherchez les noms des attributs que vous souhaitez modifier dans la liste des propriétés de la classe de style correspondante indiquée dans ce tableau.

   Exemple: bodyTextColor est une propriété de la classe GCKUIStyleAttributesMiniController.

3. Écrivez le code.

   Exemple :

// 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];

Utilisez ce schéma pour appliquer n'importe quel style à n'importe quel élément d'interface utilisateur de n'importe quel widget.

Tableau des vues et des styles

Ce tableau présente les sept vues de widget et les trois groupes (signalés par ▼) auxquels vous pouvez appliquer des styles.

Hiérarchie des styles

Le Singleton GCKUIStyle est le point d'entrée de l'API pour tous les paramètres de style. Il possède la propriété castViews, qui est la racine de la hiérarchie de styles, comme illustré ci-dessous. Ce schéma présente une autre façon d'examiner les mêmes vues et groupes que ceux présentés dans le tableau précédent.

Vous pouvez appliquer un style à un widget individuel ou à un groupe de widgets. La hiérarchie des styles comporte trois groupes de widgets : "castViews", "deviceControl" et "mediaControl". Le rectangle de chaque groupe contient ses widgets. Lorsque vous appliquez un style à un groupe, il est appliqué à tous les widgets qu'il contient.

Par exemple, le groupe castViews vous permet d'appliquer un style à tous les widgets, tandis que le groupe deviceControl vous permet d'appliquer un style uniquement à ses trois widgets de contrôle d'appareil. Le widget instructions n'appartient à aucun groupe.

castViews
			deviceControl				mediaControl
	instructions		appareil Sélecteur	Écran noDevicesAvailable	connexion Contrôleur		mini Contrôleur	développé Contrôleur	piste Sélecteur
				navigation / barre d'outils

Note de bas de page:Les noms de widgets de ce diagramme qui sont affichés sur deux lignes doivent être écrits dans le code sous la forme d'un mot, sur une ligne, sans espaces. Par exemple, device Chooser doit être écrit deviceChooser. Pointez sur les images pour les agrandir.