CarPlay tab bar issues

Adding CPTabBarTemplate to my Root Template seems to break CPListTemplate, it ends up highlighting the second indexed value. I'm unable to figure out what's causing this issue. Removing the tab bar does fix the issue but I need to use tabs. Any help would be greatly appreciated!

func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didConnect interfaceController: CPInterfaceController) {
    self.interfaceController = interfaceController
    
    let listTemplate = CPListTemplate(title: "List", sections: [])
    listTemplate.tabImage = UIImage(systemName: "person.crop.rectangle.stack.fill")
    
    let settingsTemplate = CPListTemplate(title: "Settings", sections: [])
    settingsTemplate.tabImage = UIImage(systemName: "gear")
    
    let tabBarTemplate = CPTabBarTemplate(templates: [listTemplate, settingsTemplate])
    
    interfaceController.setRootTemplate(tabBarTemplate, animated: true, completion: nil)
}

Accepted Reply

Hi, this is a known issue we're tracking. After updating the contents of a list template, the focused item is not always correctly restored to the item that was focused before the update. It should just be a visual glitch though; there isn't any functional impact. Thanks for the report!

  • Thank you for the clarification! 😃

Add a Comment

Replies

Is this just the default list item that is highlighted when the template first appears? If so, can you rotate the knob to move focus as normal?

Are you updating any items in this list template after it appears on screen?

  • Yes, it's highlighted when the template first appears. I'm fetching data then setting the template and not calling any updates after it appears. It also happens with just mock data. This is running on Xcode simulator, I have partial use of a vehicle that supports CarPlay to test later.

  • I noticed the issues stops when I stop downloading the UIImage! It may have something to do with my function, looking into this further!

Add a Comment

After more tinkering with, I’m left with the same issue when using with SwiftData. Adding/Removing items triggers a change in the highlighted item which is very strange behaviour and unable to resolve. Also the tab never really looks selected. The first indexed value should be highlighted but it switches randomly when updating template sections.

Below is close to what I'm using in my CarPlay SceneDelegate. I'm still seeing the same results as before and I've minimized most of the code to reduce any chance of more issues arising. When the knob is focused on the tab selection I'm still getting a flicker upon calling func updateSections(_ sections: [CPListSection]). When an item is selected in the list and my app refreshes the list of items, then selected highlighted cell jumps from index 1 to random indexes in the list. My app handles a notification and refreshes the list template section and without updating sections the list never updates when adding or removing items.

class MyCarPlaySceneDelegate: NSObject, CPTemplateApplicationSceneDelegate, CPInterfaceControllerDelegate {
    private var interfaceController: CPInterfaceController?
    private var template: CPListTemplate?
    private var items: [Item] = [] /// Maintain the list of items
    
    var tabTemplates = [CPTemplate]()

    func listTemplate() -> CPListTemplate {
        loadItems() /// Load items here to avoid code duplication
        var list: [CPListItem] = []
        for item in items {
            list.append(item)
        }
        let template = CPListTemplate(title: "Library", sections: [CPListSection(items: list)])
        template.updateSections([CPListSection(items: list)]) /// Without this here the second value in the list is highlighted
        self.template = template
        return template
    }

    func loadItems() {
        /// Loading data here
    }

    /// handle changes here to reload list
    @objc func handleNotification(_ notification: Notification) {
        var list: [CPListItem] = []
        if let template = self.template {
            loadItems() /// Reload items when a notification is received
            template.updateSections([CPListSection(items: list)])
        }
    }

    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didConnect interfaceController: CPInterfaceController) {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleNotification(_:)),
            name: Notification.Name.HELLOWORLD,
            object: nil
        )
        self.interfaceController = interfaceController
        self.interfaceController?.delegate = self
        let template = listTemplate()
        tabTemplates.append(template)
        interfaceController.setRootTemplate(CPTabBarTemplate(templates: tabTemplates), animated: true, completion: nil)
    }

    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didDisconnectInterfaceController interfaceController: CPInterfaceController) {
        self.interfaceController = nil
        NotificationCenter.default.removeObserver(self)
    }
}

Hi, this is a known issue we're tracking. After updating the contents of a list template, the focused item is not always correctly restored to the item that was focused before the update. It should just be a visual glitch though; there isn't any functional impact. Thanks for the report!

  • Thank you for the clarification! 😃

Add a Comment