Article

Displaying Content on a Connected Screen

Fill connected displays with additional content from your app.

Overview

The user can connect additional screens to an iOS device at any time using AirPlay or a physical cable. Each additional screen represents new space on which to display your app’s content, and is managed by a UIScreen object. For example, a game might show its content on a connected display and show game controls on the iPhone screen, as illustrated in Figure 1.

Figure 1

Connecting an external display to an iOS device

An iPhone displays game controls while the game graphics are displayed on a connected television.

To take advantage of the additional space offered by a connected screen, create a UIWindow object and set its screen property to the corresponding screen object. When a new screen is connected, UIKit delivers a didConnectNotification notification to your app. When a screen is disconnected, UIKit delivers a didDisconnectNotification notification. Use connection and disconnection notifications to show or hide additional windows. If your app is suspended when a notification arrives, UIKit delivers it when your app begins running again.

Listing 1 uses the screen connection notification to configure a new window for the app. The code sizes the window to fill the screen dimensions and assigns the appropriate screen object to it. The configureAuxilliaryInterface method is a custom method that assigns a view controller to the window's rootViewController property. After showing the window. the code saves a reference to it.

Listing 1

Handling a screen connection notification

NotificationCenter.default.addObserver(forName: .UIScreenDidConnect, 
                    object: nil, queue: nil) { (notification) in
   // Get the new screen information.
   let newScreen = notification.object as! UIScreen
   let screenDimensions = newScreen.bounds
            
   // Configure a window for the screen.
   let newWindow = UIWindow(frame: screenDimensions)
   newWindow.screen = newScreen
   // Install a custom root view controller in the window.
   self.configureAuxilliaryInterface(with: newWindow)
            
   // You must show the window explicitly.
   newWindow.isHidden = false
   // Save a reference to the window in a local array.
   self.additionalWindows.append(newWindow)}

Listing 2 removes the window associated with a screen that has been disconnected from the device.

Listing 2

Handling a screen disconnection notification

NotificationCenter.default.addObserver(forName: 
            .UIScreenDidDisconnect, 
            object: nil, 
            queue: nil) { (notification) in
   let screen = notification.object as! UIScreen

   // Remove the window associated with the screen.
   for window in self.additionalWindows {
      if window.screen == screen {
         // Remove the window and its contents.
         let index = self.additionalWindows.index(of: window)
         self.additionalWindows.remove(at: index!)
      }
   }
}

It is possible for an external screen’s resolution or aspect ratio to change while your app is connected to it. To update your content in response to those changes, observe the modeDidChangeNotification notification.

See Also

Screens

class UIScreen

An object that defines the properties associated with a hardware-based display.

class UIScreenMode

A possible set of attributes that can be applied to a screen object.