Swift iOS- 如何将按钮添加到 CollectionView 单元格的外部

Question

我想要一个 deleteButton，它是一个删除图像，位于 collectionViewCell 的外部（它可以部分位于内部）。

我查看了其他 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)
 }

当我尝试将 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

好的，你可以像下面那样做，首先创建一个 xib 文件并将默认视图替换为集合视图单元格，然后像下面这样设置，

在上图中将 class 名称设置为 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 中，添加任何其他功能，例如按钮操作和其他视图相关代码

class CustomCell:UICollectionViewCell {

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


  //other view related code
}

Answer 2

问题出在情节提要里面我有一个：

CollectionView
      -CustomCell (type collectionViewCell)
           -imageView

在 Attributes Inspector 下，在 Drawing 部分，所有这 3 个都有属性 clipsToBounds。

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

如果其他人有此问题，请确保您在 collectionView、collectionViewCell 和 imageView 上 uncheckclipsToBounds。

Swift iOS- 如何将按钮添加到 CollectionView 单元格的外部

Swift iOS- How to Add Button to the outside a CollectionView Cell

frame

uibutton

bounds

cgrect

uicollectionviewcell