Swift iOS-如何将Button添加到CollectionView Cell的外部

Question

1. 我想得到一个deleteButton，它是一个删除图像，位于collectionViewCell的外部（它可以部分在里面）。



1. 我查看了其他SO答案，他们说只是玩按钮框架的Rect x & y值，我做了。当我将x & y值设置为0,0时，我得到：

    class CustomCell: UICollectionViewCell {
   
    @IBOutlet weak var imageView: UIImageView!
    var deleteButton: UIButton!
    var deleteButtonImg: UIImage!
   
    override func awakeFromNib() {
        super.awakeFromNib()
   
    deleteButton = UIButton(frame: CGRect(x: 0, y: 0, width: frame.size.width/4, height: frame.size.width/4))
   
    deleteButtonImg = UIImage(named: "delete-icon")!.withRenderingMode(.alwaysTemplate)
    deleteButton.setImage(deleteButtonImg, for: .normal)
    deleteButton.tintColor = UIColor.red
   
    contentView.addSubview(deleteButton)
    }
   



1. 当我尝试将Rect x & y设置为-10,-10时，deleteButton会在单元格的imageView中被剪切。我没有clipsToBounds设置。

    deleteButton = UIButton(frame: CGRect(x: -10, y: -10, width: frame.size.width/4, height: frame.size.width/4))
   



我甚至尝试将clipToBounds设置为false，但我得到与图片＃3相同的效果。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell

        cell.imageView.image = myImageArray[indexPath.row]
        cell.imageView.clipsToBounds = false

        return cell
    }

我哪里错了？

Answer 1

问题出在我的故事板里面：

CollectionView
      -CustomCell (type collectionViewCell)
           -imageView

在“属性”检查器的“绘图”部分中，其中所有3个都具有属性clipsToBounds。

我忽略了一个事实，即我在imageView上将clipsToBounds设置为false（未选中），但在CustomCell和CollectionView上设置为true（已选中）。

如果其他人遇到此问题，请确保在collectionView，collectionViewCell和imageView上uncheck clipToBounds。

Answer 2

好的，你可以这样做，首先创建一个xib文件并用集合视图单元格替换默认视图，并设置如下，

在上面的图片中将类名设置为CustomCell（在我的情况下）并放置图像视图（绿色）和按钮（蓝色）。

和View controller，

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
     //register the nib to collectionview
    self.aColectionView.register(UINib(nibName: "CustomCell", bundle: nil), forCellWithReuseIdentifier: "CUSTOM_CELL")
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

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

//cell creation as u are doing
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell:CustomCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CUSTOM_CELL", for: indexPath) as! CustomCell
     //set the image for custom cell

    return cell
}

//return the required size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 200, height: 150)
}

并输出如下，

在自定义单元格类中，您可以添加任何其他功能，例如按钮的操作和其他与视图相关的代码

class CustomCell:UICollectionViewCell {

  @IBOutlet weak var deleteButton: UIButton!
  @IBOutlet weak var imageView: UIImageView!


  //other view related code
}