Using an Additional Screen in iOS

It's possible to add a second screen to an iOS device, either using an AirPlay with an Apple TV, or by using an AV adapter cable. The iOS simulator also lets us preview the output of the second screen, so testing is easy. This tutorial takes you through the process of adding a label to a second display.

  1. Start by creating a new single view iOS app in Xcode, using the Swift language, it does not matter what iOS device you create for.
  2. Apple's implementation of iOS has objects to represent Screens, Windows and Views. A UIWindow has a UIScreen property and it also has a UIView property, so we need to be responsible for creating both the Window and the View.

    Within the ViewController class declare two optional properties, a UIWindow and a UIView as follows:
    var secondWindow : UIWindow?
    var secondScreenView : UIView?
    The window and view are both optional because the user could remove the screen at anytime, or may not connect one at all.
  3. For the purposes of this tutorial, we are going to use a label to display text on the external screen, so add the following code to create a label for that purpose:
    var externalLabel = UILabel()
  4. Next we need to write code to handle the setup an attached screen. Add the following method (exposed to Objective-C) inside the ViewController to do just that:
    @objc func setupScreen(){
        if UIScreen.screens.count > 1{
            //find the second screen
            let secondScreen = UIScreen.screens[1]
            //set up a window for the screen using the screens pixel dimensions
            secondWindow = UIWindow(frame: secondScreen.bounds)
                                                                                                                                                                //windows require a root view controller
            let viewcontroller = UIViewController()
            secondWindow?.rootViewController = viewcontroller
            //tell the window which screen to use
            secondWindow?.screen = secondScreen
            //set the dimensions for the view for the external screen so it fills the screen
            secondScreenView = UIView(frame: secondWindow!.frame)
            //add the view to the second screens window
            //unhide the window
            secondWindow?.isHidden = false
            //customised the view
            secondScreenView!.backgroundColor = UIColor.white
            //configure the label
            externalLabel.textAlignment =
            externalLabel.font = UIFont(name: "Helvetica", size: 50.0)
            externalLabel.frame = secondScreenView!.bounds
            externalLabel.text = "Hello"
            //add the label to the view
  5. As the user can connect and disconnect the screen at will, we need to register to be notified if that happens. Add the following code to do that
    func registerForScreenNotifications(){
        let notificationCentre = NotificationCenter.default   
        notificationCentre.addObserver(self, selector: #selector(ViewController.setupScreen), name: UIScreen.didConnectNotification, object: nil)
        //In Xcode 9 and earlier, the name of the notification is NSNotification.Name.UIScreenDidConnect
  6. Finally, in the viewDidLoad method, add code to call the two methods you've just created:
  7. Next run the application. Once the simulator is open, choose Hardware > External Displays and select one of the available dimensions (a smaller one would be better if your Mac has a small screen). You should see the word hello displayed in the centre of the simulated external display

An example project can be found on GitHub

Further Tasks