swift - Collection View 中的图像

Question

我在 Swift 3.2 中编码，TableView Controller 内部有一个 TableView(垂直滚动)，表格的每一行都有一个 CollectionView(水平滚动)。

我不确定这是否是可接受的编码实践，但我让我的 ViewController 类继承了 UITableViewController 和 UICollectionViewDelegate 和 UICollectionViewDataSource 。

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

下面是我的 ViewController 类。

//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

    /...
}

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

然而，您的硬编码数组是一个包含 30 个项目的数组。因此，每个 Collection View 在请求 cellForItemAt 时只会获得图像 [indexPath.row] 的 0,1 和 2。此外，您应该将 indexPath.item 用于 Collection View ，indexPath.row 用于 TableView ，如果使用不当可能会或可能不会。

解决方案
您可以只设置 Collection View 的 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"]
]

最后读取 Collection View 中的数组，如:

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

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

    /...
}