The iPhone and iPad are awesome devices with beautiful displays. Sometimes though, we might want to show parts of our app on a bigger, external screen.

Today we'll look at how we can do just that on iOS, let's dive in.

Before we begin let's break down what exactly we're talking about here:

UIKit exposes any external display we connect to our iPhone or iPad with an adapter as a UIScreen . The same is also true when we turn-on Airplay Mirroring to an Apple TV.

Now, let's write some code.

We'll eventually use Notifications to learn when a screen is connected/disconnected, but many users may launch our app with a screen already connected, so let's start by checking for that.

We'll create a couple instance properties to hold our the UIWindow and UIViewController we'll be displaying externally:

var externalDisplayWindow : UIWindow ? var externalDisplayVC : StatusBoardViewController ?

Next, we'll make a function we can call when our app first launches, and when a new display is connected:

func checkForExternalDisplay () { guard let screen = UIScreen . screens . last else { return }

We'll create a new UIWindow and assign it to the external UIScreen :

if externalDisplayWindow == nil { externalDisplayWindow = UIWindow ( frame : screen . bounds ) externalDisplayWindow ? . screen = screen }

Next, we'll need a view controller. We'll create one and set it as the rootViewController just like usual:

if externalDisplayVC == nil { externalDisplayVC = StatusBoardViewController () externalDisplayWindow ? . rootViewController = externalDisplayVC

Last but not least, we'll show the window by setting its isHidden property to false .

externalDisplayWindow ? . isHidden = false } }

If we connect a display now, and launch our app, we'll see our content displayed externally, neat!

Let's finish up by wiring up those notifications we mentioned earlier. First we'll start observing them:

NotificationCenter . default . addObserver ( forName : NSNotification . Name . UIScreenDidConnect , object : nil , queue : nil , using : displayConnected ) NotificationCenter . default . addObserver ( forName : NSNotification . Name . UIScreenDidDisconnect , object : nil , queue : nil , using : displayDisconnected )

Then we'll write those two functions to handle each notification:

func displayConnected ( notification : Notification ) { checkForExternalDisplay () } func displayDisconnected ( notification : Notification ) { externalDisplayWindow ? . isHidden = true externalDisplayVC = nil externalDisplayWindow = nil }

Now our app will start/stop showing on the external display automatically when the user connects it. Very cool.

There's plenty more to dive into when working with external displays and UIScreen . We'll go further in future Bites.

That's all for today. Have an idea or request for a Bite? Send it along to hello@littlebitesofcocoa.com!