UICollectionView单元格视图重叠 [英] UICollectionView cell views overlapping

问题描述

我的细胞重叠如下：

我的 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
}

据我所知，它重用细胞，好主意...除了怎么做我阻止单元格文本重叠？

I understand that it reuses the cells, great idea...except how do I prevent the cell text from overlapping?

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

由于这些子视图不断被修改，我想，如果我只是抛弃它们并创建了新的，所以我使用了：

Since these subviews were continually being modified I figured, what if I just dumped them and created new ones so I used:

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

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

And that seemed to do the trick. I suspect this has a little more overhead than just modifying the values of the specific elements in the subviews. Will investigate further.

推荐答案

之所以发生这种情况，是因为正在重复使用单元格，最后将图像添加为子视图多次到同一个UICollectionViewCell对象。您可以创建一个扩展UICollectionViewCell的自定义类，以便您可以保留添加的imageView。

The reason it's happening is because the cells are being reused and you end up adding the image as a subview multiple times to the same UICollectionViewCell object. You can make a custom class that extends UICollectionViewCell so that you can hold onto the imageView that you add.

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中：

Then in your 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)

显然你必须自定义它以获得相同的布局，但这应该让你开始。

Obviously you would have to customize it to get the same layout, but that should get you started.

这篇关于UICollectionView单元格视图重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！