Basis of CarPlay framework — Second Step — How to use templates !
Since iOS 14, Apple announced how to make advanced CarPlay audio apps with templates. Here you will learn how to use several templates but also a way to communicate between iOS App and CarPlay App.
First all, if you want to start a new project with CarPlay framework, you can read my previous article about it : How to compile your first CarPlay App. We will use the same base of code.
Content overview
- Use CPTabBarTemplate
- Use CPListTemplate
- Use CPAlertTemplate
- Use CPInterfaceControllerDelegate
- Communication between iOS app and CarPlay app
App
We will build a simple iOS App presenting a list of radios and a CarPlay App presenting a tab bar with a list of radios and your favorite radios.
The user can choose to add a radio in favorite from everywhere and the apps will automatically communicate to update the UI.
1. Data
We will use a local json file to populate our data radios.json with only 4 items.
We will use an object Radio to play with our data.
And finally use a manager to download and maintain the radios and favorite radios list : DataManager.
2. Media
We will use some assets for the data and also for the app (with some pictograms).
You can download the Assets.xcassets for the rest of this tutorial.
3. iOS App
The iOS App is a simple list and the user will have the possibility to mark some radios as favorite.
To simplify, the data are store locally, so every time the app start the content is cleared.
Build a View Controller : RadioListViewController.swift with a custom cell : RadioListCell.swift and RadioListCell.xib and update the Main.storyboard with this View Controller.
We will not explain everything for the iOS part. However we will spoke about Notification to communicate the CarPlay App.
Firstly, we will add an Observer in our viewDidLoad function to update the list and refresh favorite status.
And create a class to declare the notification.
And then, when the user will add a radio to his favorite list (RadioListCell.swift), we will maintain a favorite radios list inside the DataManager.
Now the user can add or remove favorite with the heart button.
4. CarPlay App
Finally, we start the interesting part of this article : How to use templates for CarPlay App !
We will build everything inside the class CarPlaySceneDelegate.swift because the goal here is to use templates and not have the best architecture for CarPlay App.
Firstly, we will initialize some properties :
- The interfaceController to manage the content and push/present/dismiss templates
- The current radios list
- Two templates to create tabs
Next, we will build our tab bar using the two list templates, also add the Notification observer to update the list and download radios from data :
We can add images for the CPListTemplate with the property tabImage. We use it to add a radio and favorite pictogram.
We will set our Root Template for the interface controller with the tabBar.
self.interfaceController?.setRootTemplate(tabBar, animated: true, completion: {_, _ in })You can set the delegate for tab bar tabBar.delegate = self if you need to have some specific action when the user switch the tab.
When we create the radioListTemplate and favoriteRadiosListTemplate we need to add some sections (CPListSection) and items (CPListItem).
CPListItem is an object with a title and a detail text. There are some properties to configure it like accessoryType, image and handler to make an action when the user touch it.
We will add a CPAlertTemplate inside the handler to add or remove a radio in our favorite list.
Like the action inside the RadioListCell.xib, we will update the favorite radios list and post a Notification to update the iOS App.
Also, this time, we will present the Alert with our interface controller and dismiss it when the user touch the Ok button.
Last thing, we can extend CPInterfaceControllerDelegate to listen the behaviour of the app and update the favorite list on templateWillAppear.
Run !
You can now compile your project eg. on iPhone 12 and open the CarPlay simulator !
The user can add or remove favorite from iOS App or CarPlay App and all will be synchronized !
To go deeper…
Here you have learn how to play with CarPlay Templates and a first way to communicate between iOS and CarPlay App using CarPlay.framework.
The code is available here tag 1.1.0 :
Next step use Audio ?!
Have fun !
