Since iOS 7, cars have included second screens for iPhones. Using a technology called CarPlay, the driver’s iPhone controls the screen and integrates with the car’s systems. Exciting, but for a long time, the only apps that could take advantage of Carplay were either from Apple or the car manufacturer.
That changed in 2017. If you have an Apple Watch, you’re familiar with the way an iPhone app you download from the App Store might also appear as a watch app. The same applies to CarPlay. At last year’s conference, messaging and Voice-over-Internet-Protocol (VOIP) apps were allowed onto the car display. Since then, CarPlay has gained audio apps, and this year they announced support for third-party navigation apps. In this post we’ll discuss what your app can do in the car.
First, take a deep breath. You do not need to buy a car to try CarPlay! There is a CarPlay window in the Xcode Simulator. When you do want to test on device, there are CarPlay systems you can buy as add-ons for any vehicle. So if you never got that 6-disc CD changer you coveted in high school, maybe it’s time to live the dream.
Second, before you ship, you will need to get a special license from Apple above and beyond the standard developer program. It’s called MFi, and it’s not just for hardware accessories. Despite your fears, there is no license fee, so don’t let that stop you.
How it works
Your CarPlay code lives in your iOS app, and you have access to the whole SDK. For an audio app, you’ll use the same APIs as you use to show the current track on the iPhone lock screen, handle the play/pause control, and describe the items in your playlist. If you’re upgrading a regular audio app to also work in the car, you’ve probably done this already.
But unlike on the iPhone screen, your code will not get raw touch input, and it won’t do its own drawing (mostly). This is because the display hardware and its input methods depend on the car. We think of iOS as having just a few screen sizes and one input method, but all bets are off for CarPlay.
So instead of dealing with UIViews, your code builds templates, which are data models that semantically represent views. iOS and CarPlay will handle arranging views on the screen, like putting the primary controls on the side near the steering wheel, coloring views based on the time of day, deciding what kind of keyboard to show, and so on.
Maps are a special case of template UI. There is always an active template on the screen, but the map template type has a transparent region, and you can in fact perform custom drawing in a layer behind it. You can draw your map tiles exactly as you’d like to in a regular UIWindow, and you can add buttons both above and in front of the map. The transparent region is described by the same safe area insets you know from UIViewController.
A new CarPlay framework expresses trip guidance concepts. Navigation works in two stages: First, you plan a trip to a destination. Your driver will pick between available routes, and then your code starts navigation to the route. During navigation, you describe each step for CarPlay to draw in a guidance card over your map. This year’s CarPlay talk has plenty of details about things like playing audio for new steps and keeping up the navigation session in the background.
CarPlay maintains a stack of templates like a UINavigationController. In a navigation app, a map will be your root template. To visit a menu screen, you can create a new template and push it on top of the map. Your driver will see a familiar Back button and the new screen.
The List template presents options as rows in sections. Cells can have images and text, and the template adds page scrolling controls when they’re needed. This will remind any iOS developer of UITableView. But since templates are just data, and the underlying views are controlled by CarPlay, you don’t have to manage cell re-use.
The Grid template shows buttons in rows and columns. It’s a good way to present a menu of large options for your driver to poke at arm’s length. There are other templates like text search and full-screen alerts.
Besides full-screen templates, you can present alerts that have actions, just like UIAlertViews. But uniquely to CarPlay, they can also have time limits, so your driver won’t have to take their hands off the steering wheel to dismiss them.
Before you get started, don’t miss Apple’s CarPlay Human Interface Guidelines. Watch that space for even more detail when navigation apps are out of beta.