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: