Adding a CarPlay UI

Question

I am working on my current iPhone audio app to be supported in CarPlay. I already got approved by Apple and received the development entitlement, and watched the video "Enabling Your App for CarPlay"(https://developer.apple.com/videos/play/wwdc2017/719/). In the video there is a piece of Swift code demonstrating how to add CarPlay UI:

func updateCarWindow()  
{  
    guard let screen = UIScreen.screens.first(where: 
    { $0.traitCollection.userInterfaceIdiom == .carPlay })  
    else  
    {  
        // CarPlay is not connected  
        self.carWindow = nil;  
        return  
    }  

    // CarPlay is connected  
    let carWindow = UIWindow(frame: screen.bounds)  
    carWindow.screen = screen  
    carWindow.makeKeyAndVisible()  
    carWindow.rootViewController = CarViewController(nibName: nil, bundle: nil)  
    self.carWindow = carWindow
}

I re-wrote it to an Objective-C version like following:

- (void) updateCarWindow  
{  
    NSArray *screenArray = [UIScreen screens];  

    for (UIScreen *screen in screenArray)  
    {        
        if (screen.traitCollection.userInterfaceIdiom == UIUserInterfaceIdiomCarPlay)  // CarPlay is connected.
        {  
            // Get the screen's bounds so that you can create a window of the correct size.  
            CGRect screenBounds = screen.bounds;  

            UIWindow *tempCarWindow = [[UIWindow alloc] initWithFrame:screenBounds];  
            self.carWindow.screen = screen;  
            [self.carWindow makeKeyAndVisible];  

            // Set the initial UI for the window.  
            UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];  
            UIViewController *rootViewController = [storyboard instantiateViewControllerWithIdentifier:@"VC"];  

            self.carWindow.rootViewController = rootViewController;  
            self.carWindow = tempCarWindow;  

            // Show the window.  
            self.carWindow.hidden = NO; 

            return; 
        }  
    } 

    // CarPlay is not connected.
    self.carWindow = nil; 
}  

However I found that the property "screens" of UIScreen always return 1 element (the main screen), no matter when testing on a real device or simulator. So when my app is running on the simulator or a real car with CarPlay system, the app is just blank and said "Unable to connect to "My App name"" (see the image below). My ViewController has a simple UILabel though.

My question is: what should I do to make my app to be connected by CarPlay? That is, how should I obtain the screen that has UIUserInterfaceIdiomCarPlay idiom, not just always the main screen? Thanks a lot in advance.

Answer 1

CarPlay audio apps are controlled by the MPPlayableContentManager. You are required to implement the MPPlayableContentDelegate and MPPlayableContentDatasource protocol in order to connect with CarPlay. The UI is controlled by CarPlay - all you need to do is feed it data for tabs+tables (datasource) and respond to playable items (delegate).

Answer 2

Custom UI is only available for CarPlay navigation apps. For audio apps, the MediaPlayer framework contains all the necessary API to work with CarPlay.