集合视图中的图像

Question

我在 Swift 3.2 中编码，TableView Controller 内部有一个 TableView（垂直滚动），table 的每一行都有一个 CollectionView（水平滚动）。

我不确定这是否是 acceptable 编码实践，但我让我的 ViewController class 继承了 UITableViewController 和 UICollectionViewDelegate 和 UICollectionViewDataSource.

现在，我有一个硬编码的图像名称数组，并且希望三个图像在每个集合视图中水平滚动，每行都有不同的图像。但是，截至目前，每一行都显示相同的三个图像（“11.png”、“12.png”、“13.png”），我想知道如何解决这个问题。

下面是我的ViewControllerclass.

//for the tableView
let event = generateRandomData()

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return event.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    return cell
}

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    guard let tableViewCell = cell as? TableViewCell else { return }
    tableViewCell.setCollectionViewDataSourceDelegate(self, forRow: indexPath.row)
}


//for the collectionView
var images: [String] = [
    "11.png", "12.png", "13.png",
    "21.png", "22.png", "23.png",
    "31.png", "32.png", "33.png",
    "41.png", "42.png", "43.png",
    "51.png", "52.png", "53.png",
    "61.png", "62.png", "63.png",
    "71.png", "72.png", "73.png",
    "81.png", "82.png", "83.png",
    "91.png", "92.png", "93.png",
    "101.png", "102.png", "103.png",
]

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 3
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    collectionView.isPagingEnabled = true;      //makes the horizontal scrolling have no bounce and relatively have a better snap

    let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewCell", for: indexPath as IndexPath) as! CollectionViewCell
    let myCellImage = UIImage(named: images[indexPath.row])
    myCell.eventImage.image = myCellImage

    return myCell
}

我是一名业余编码员，非常感谢任何帮助！

Answer 1

我相信这个问题已经在某个地方找到了答案，但由于我找不到答案，所以我就在这里给出一个。

你的错误在这里：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    /...

    let myCellImage = UIImage(named: images[indexPath.row]) //<< indexPath.row will return 0,1 and 2 for each of your collection view

    /...
}

您的 table 视图中的每个集合视图不会相互通信以形成更大的集合视图。由于所有的都为 numberOfItemsInSection 提供了 3 的整数，并且它们的 numberOfSections 默认为 1（您没有设置任何），因此它们中的每一个都将在索引路径 (0,0)、(0,1) 和 (0, 2) 当试图填充他们的数据时。

但是，您的硬编码数组是一个包含 30 个项目的数组。因此，在请求 cellForItemAt 时，每个集合视图对于图像 [indexPath.row] 只会获得 0,1 和 2。此外，您应该使用 indexPath.item 用于集合视图，indexPath.row 用于 table 视图，如果使用不当，它可能会或可能不会工作。

解决方案
您可以设置集合视图的 tag 属性来标记它的行：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    /...

    //Make sure you have a subclass for UITableViewCell that have an IBOutlet that connects to the collection view
    cell.collectionView.tag = indexPath.row //Note that this only works in your situation where the table view have only 1 section.
    /...
}

然后将你的数组拆分为二维数组：

var images = [
    ["11.png", "12.png", "13.png"],
    ["21.png", "22.png", "23.png"],
    ["31.png", "32.png", "33.png"],
    ["41.png", "42.png", "43.png"],
    ["51.png", "52.png", "53.png"],
    ["61.png", "62.png", "63.png"],
    ["71.png", "72.png", "73.png"],
    ["81.png", "82.png", "83.png"],
    ["91.png", "92.png", "93.png"],
    ["101.png", "102.png", "103.png"]
]

最后读取集合视图中的数组，如：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    /...

    let myCellImage = UIImage(named: images[myCell.tag][indexPath.item])

    /...
}

集合视图中的图像

Images In a Collection View

tableview

collectionview

swift