CarPlay CPListImageRowItem causes Inverted Scrolling and Side Button malfunction

Question

EnguerrandA OP

Created 3h

Replies 0

Boosts 0

Participants 1

In my CarPlaySceneDelegate.swift, I have two tabs:

The first tab uses a CPListImageRowItem with a CPListImageRowItemRowElement. The scroll direction is inverted, and the side button does not function correctly.
The second tab uses multiple CPListItem objects. There are no issues: scrolling works in the correct direction, and the side button behaves as expected.

Steps To Reproduce

Launch the app.
Connect to CarPlay.
In the first tab, scroll up and down, then use the side button to navigate.
In the second tab, scroll up and down, then use the side button to navigate.
As observed, the scrolling behavior is different between the two tabs.

Code Example:

import CarPlay
import UIKit

class CarPlaySceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {

    var interfaceController: CPInterfaceController?

    func templateApplicationScene(
        _ templateApplicationScene: CPTemplateApplicationScene,
        didConnect interfaceController: CPInterfaceController
    ) {
        self.interfaceController = interfaceController
        downloadImageAndSetupTemplates()
    }

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

    private func downloadImageAndSetupTemplates() {
        let urlString = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcYUjd1FYkF04-8Vb7PKI1mGoF2quLPHKjvnR7V4ReZR8UjW-0NJ_kC7q13eISZGoTCLHaDPVbOthhH9QNq-YA0uuSUjfAoB3PPs1aXQ&s=10"

        guard let url = URL(string: urlString) else {
            setupTemplates(with: UIImage(systemName: "photo")!)
            return
        }

        URLSession.shared.dataTask(with: url) { [weak self] data, _, _ in
            let image: UIImage
            if let data = data, let downloaded = UIImage(data: data) {
                image = downloaded
            } else {
                image = UIImage(systemName: "photo")!
            }

            DispatchQueue.main.async {
                self?.setupTemplates(with: image)
            }
        }.resume()
    }

    private func setupTemplates(with image: UIImage) {
        // Tab 1 : un seul CPListImageRowItem avec 12 CPListImageRowItemRowElement
        let elements: [CPListImageRowItemRowElement] = (1...12).map { index in
            CPListImageRowItemRowElement(image: image, title: "test \(index)", subtitle: nil)
        }
        let rowItem = CPListImageRowItem(text: "Images", elements: elements, allowsMultipleLines: true)
        rowItem.listImageRowHandler = { item, elementIndex, completion in
            print("tapped element \(elementIndex)")
            completion()
        }
        let tab1Section = CPListSection(items: [rowItem])
        let tab1Template = CPListTemplate(title: "CPListImageRowItemRowElement", sections: [tab1Section])

        // Tab 2 : 12 CPListItem simples
        let tab2Items: [CPListItem] = (1...12).map { index in
            let item = CPListItem(text: "Item \(index)", detailText: "Detail \(index)")
            item.handler = { _, completion in
                print("handler Tab 2")
                completion()
            }
            return item
        }
        let tab2Section = CPListSection(items: tab2Items)
        let tab2Template = CPListTemplate(title: "CPListItem", sections: [tab2Section])

        // CPTabBarTemplate avec les deux tabs
        let tabBar = CPTabBarTemplate(templates: [tab1Template, tab2Template])
        interfaceController?.setRootTemplate(tabBar, animated: true)
    }
}

Here is a quick video:

Boost