Customize iOS Sender UI

Customize Your Widgets

You can customize Cast widgets by setting the colors, styling the buttons, text and thumbnail appearance, and by choosing the types of buttons to display.

Widget Appearance

The Cast framework widgets supports the Apple UIAppearance Protocol in UIKit to change the appearance of the widgets across your app, such as the position or border of a button. Use this protocol to style the Cast framework widgets to match an existing apps styling.

Choose Controller Buttons

Both the expanded controller class (GCKUIExpandedMediaControlsViewController) and the mini controller class (GCKUIMiniMediaControlsViewController) contain a button bar, and clients can configure which buttons are presented on those bars. This is achieved by both classes conforming to GCKUIMediaButtonBarProtocol.

The mini controller bar has 3 configurable slots for buttons:

SLOT  SLOT  SLOT
  1     2     3

The expanded controller bar has a permanent play/pause toggle button in the middle of the bar plus 4 configurable slots:

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

Your app can get a reference to the expanded controller with the GCKCastContext::defaultExpandedMediaControlsViewController property and can get a reference to the mini controller if using GCKCastContext::createMiniMediaControlsViewController(void).

Each slot can contain either a framework button, a custom button, or be empty. The list of framework control buttons are defined as:

Button Type Description
GCKUIMediaButtonTypeNone Do not place a button in this slot
GCKUIMediaButtonTypeCustom Custom button
GCKUIMediaButtonTypePlayPauseToggle Toggles between playback and pause
GCKUIMediaButtonTypeSkipPrevious Skips to the previous item in the queue
GCKUIMediaButtonTypeSkipNext Skips to the next item in the queue
GCKUIMediaButtonTypeRewind30Seconds Rewinds the playback by 30 seconds
GCKUIMediaButtonTypeForward30Seconds Skips forward the playback by 30 seconds
GCKUIMediaButtonTypeMuteToggle Mutes and unmutes the remote receiver
GCKUIMediaButtonTypeClosedCaptions Opens a dialog to select text and audio tracks

Detailed descriptions of what each button does can be found in GCKUIMediaButtonBarProtocol.h

Add a button as follows:

  • To add a framework button to a bar requires only a call to -[setButtonType:atIndex:].

  • To add a custom button to a bar, your app must call -[setButtonType:atIndex:] with buttonType set to GCKUIMediaButtonTypeCustom, and then call -[setCustomButton:atIndex:] passing the UIButton with the same index.

Project: /cast/_project.yaml Book: /cast/_book.yaml

Apply Custom Styles to Your iOS App

The Cast framework enables you to style the font, color, and images of UI elements of the default widgets in your Cast application, giving the views a look and feel that matches the rest of your app. This styling mechanism is available only with Cast iOS SDK v3 or later.

The following section shows you how to apply custom styles to any of the Cast widgets or group of widgets.

Applying a style to a UI element of a widget

This procedure uses the example of setting the body text color of your app's mini controller to red.

  1. Look in the table of views and styles to find the view name of the widget or group of widgets that you want to style. Group names are marked with ▼.

    Example: miniController widget view

  2. Find the names of the attributes you want to change from the list of properties in the corresponding style class listed in this table.

    Example: bodyTextColor is a property of the GCKUIStyleAttributesMiniController class.

  3. Write the code.

    Example:

    GCKUIStyle *castStyle = [GCKUIStyle.sharedInstance];
    castStyle.castViews.mediaControl.miniController.bodyTextColor = [UIColor red];
    // Assign colors, fonts and images to other properties, as needed
    [castStyle applyStyle];
    
    1. Descriptions of each line of code:

      1. Get the shared instance of GCKUIStyle.
      2. Create a color using the Apple class UIColor, then assign the color to the bodyTextColor property of the miniController. You determine the prefix to this property by its dot-separated path from castStyle.castViews down the style hierarchy to the widget or groupproperty.
      3. Similarly, assign other colors, fonts (using UIFont), and images (using UIImage) to properties of widgets and groups.
      4. Use the applyStyle method to refresh all currently visible views with their assigned styles.

Use this pattern for applying any style to any UI element of any widget.

Table of Views and Styles

This table shows the seven widget views and three groups (marked with ▼) that you can apply styles to.

View name Type Style class
castViews Group GCKUIStyleAttributesCastViews
deviceControl Group GCKUIStyleAttributesDeviceControl
deviceChooser Widget GCKUIStyleAttributesDeviceChooser
connectionController Widget GCKUIStyleAttributesConnectionController
guestModePairingDialog Widget GCKUIStyleAttributesGuestModePairingDialog
mediaControl Group GCKUIStyleAttributesMediaControl
miniController Widget GCKUIStyleAttributesMiniController
expandedController Widget GCKUIStyleAttributesExpandedController
trackSelector Widget GCKUIStyleAttributesTrackSelector
instructions Widget GCKUIStyleAttributesInstructions

Style Hierarchy

The GCKUIStyle singleton is the API entry point for all of the style settings. It has the property castViews, which is the root of the style hierarchy, as illustrated below; this diagram is a different way of looking at the same views and groups shown in the previous table.

You can apply a style to an individual widget or to a group of widgets. The style hierarchy has three widget groups: castViews, deviceControl, and mediaControl. Each group's rectangle encloses its widgets. Applying a style to a group applies it to all widgets in that group.

For example, the castViews group lets you apply a style to all widgets and the deviceControl group lets you apply a style to just its three device control widgets. The instructions widget does not belong to any group.

castViews
deviceControl mediaControl
instructions

device
Chooser
connection
Controller
guestMode
PairingDialog
mini
Controller
expanded
Controller
track
Selector

Footnote: Widget names in this diagram that are shown on two lines should be written in code as one word, on one line, no spaces. For example, device Chooser should be written deviceChooser. Roll over images to enlarge them.