UICollectionView单元格视图重叠

Question

我的单元格重叠如下图所示:

我的cellForItemAtIndexPath如下:

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as UICollectionViewCell

cell.backgroundColor = UIColor(red: 27.0/255.0, green: 38.0/255.0, blue: 52.0/255.0, alpha: 1.0)
let textFrame = CGRect(x: 0, y: cell.frame.height * 0.30, width: cell.frame.width, height: cell.frame.height)
var textLabel: UILabel! = UILabel(frame: textFrame)
textLabel.font = UIFont(name:"Helvetica-Light", size: 14.0)
textLabel.textAlignment = .Center
textLabel.textColor = UIColor.whiteColor()

println(categoryArray[indexPath.row].category)

textLabel.text = categoryArray[indexPath.row].category
var cellImage = UIImage(named: categoryArray[indexPath.row].catImage)//Array(Array(model.categories.values)[cellCount])[1]

let imageSize = cell.frame.height * 0.45

let imageView = UIImageView(image: cellImage as UIImage?)
imageView.frame = CGRect(x: (cell.frame.width / 2) - (imageSize / 2), y:cell.frame.height * 0.15, width: imageSize, height: imageSize)

var bottomBorder: UIView = UIView(frame:CGRectMake(0, cell.frame.height - 1.0, cell.frame.width, 5));
//bottomBorder.backgroundColor = UIColor(rgba: Array(Array(model.categories.values)[cellCount])[0] as String)
bottomBorder.backgroundColor = UIColor(rgba: "#A64259")

cell.addSubview(imageView)
cell.addSubview(bottomBorder)
cell.addSubview(textLabel)

cellCount++
return cell
}

我了解它重复使用单元格的做法，很棒的思路……但是我该如何防止单元格文本重叠呢？

---

编辑 - 可能的解决方案 #1

因为这些子视图不断地被修改，所以我想，如果我把它们丢掉并创建新的，会怎样呢？所以我使用了：

for view in cell.subviews {
  view.removeFromSuperview()
}

这似乎解决了问题。我怀疑这比仅修改子视图中特定元素的值要多一些开销。将进一步调查。

- jshbrmn

Answer 1

这种情况发生的原因是因为单元格被重用，导致将图像作为子视图多次添加到同一UICollectionViewCell对象中。您可以创建一个自定义类来扩展UICollectionViewCell，以便可以保存您添加的imageView。

class ImageCell : UICollectionViewCell {
    private(set) var imageView : UIImageView?
    private(set) var textLabel : UILabel?

    func setImage(image: UIImage?) {
        if self.imageView == nil {
            let imageSize = cell.frame.height * 0.45
            self.imageView = UIImageView()
            self.imageView.frame = CGRect(x: (self.frame.width / 2) - (imageSize / 2), y:self.frame.height * 0.15, width: imageSize, height: imageSize)
            self.addSubview(imageView!)
        }

        imageView!.image = image
    }

    func setLabel(text: String) {
        if self.textLabel == nil {
            let textFrame = CGRect(x: 0, y: self.frame.height * 0.30, width: self.frame.width, height: self.frame.height)
            self.textLabel = UILabel(frame: textFrame)
            textLabel.font = UIFont(name:"Helvetica-Light", size: 14.0)
            textLabel.textAlignment = .Center
            textLabel.textColor = UIColor.whiteColor()
        }

        textLabel.text = text
    }
}

然后在你的cellForItemAtIndexPath方法中：

let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as ImageCell

var cellImage =  UIImage(named: categoryArray[indexPath.row].catImage)
cell.setImage(cellImage)
cell.setLabel(categoryArray[indexPath.row].category)

显然，您需要进行定制才能获得相同的布局，但这应该可以让您开始。

- Sam

Answer 2

由于它重用单元格，并且每次调用时都会向单元格添加子视图，因此您最终将在同一单元格中拥有多个重叠的视图！

相反，您可能希望仅添加一次子视图，对其进行标记，然后在获取调用以提供单元格时，使用其标记检索子视图，并根据需要设置其属性。

- amahfouz

---

由于我刚接触Swift和iOS，对很多操作不太确定。我正在尝试学习中。 - jshbrmn

如果你理解了问题，这应该很容易。基本上，你只需要重复使用少量的单元格，并在每次调用cellForItemAtIndexPath时向它们添加视图。因此，你只需要设置已经添加的视图的属性，而不是添加新的视图。如果你需要进一步帮助，请告诉我。 - amahfouz

从概念上我理解这个问题。实际的代码实现是我不确定的地方。我会继续尝试一些东西。 - jshbrmn