代码之家 › 专栏 › 技术社区 › javaChipFrapp

集合视图中的图像

collectionview tableview swift

javaChipFrapp · 技术社区 · 7 年前

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

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

现在,我有一个硬编码的图像名称数组,希望在每个集合视图中水平滚动三个图像,每一行都有不同的图像。然而,到目前为止,每一行都显示相同的三幅图像(“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
}

我是一名业余编码器,所以非常感谢您的帮助!

1 回复 | 直到 7 年前

Ben Ong 7 年前

我确信这个问题在某处已经有了答案,但既然我找不到答案,我就在这里给出一个答案。

您的错误在这里:

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

    /...
}

表视图中的每个集合视图没有相互沟通,形成更大的集体观点。由于所有的都为numberOfItemsInSection提供了3的int值,并且它们的numberOfSections默认为1(您没有设置任何值),因此在尝试填充数据时,它们中的每一个都将在indexpath(0,0)、(0,1)和(0,2)处请求项。

但是,您的硬编码数组是一个包含30项的数组。因此,当请求cellForItemAt时,每个集合视图对于图像[indexPath.row]只会得到0、1和2。还应该使用indexPath。集合视图的项,indexPath。行用于表视图,如果使用错误,它可能工作,也可能不工作。

解决方案
您只需设置 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])

    /...
}