Swift iOS-如何将按钮添加到 CollectionView 单元的外部
Posted
技术标签:
【中文标题】Swift iOS-如何将按钮添加到 CollectionView 单元的外部【英文标题】:Swift iOS- How to Add Button to the outside a CollectionView Cell 【发布时间】:2017-06-08 05:11:19 【问题描述】:-
我想要一个 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
我哪里出错了?
【问题讨论】:
尝试在自定义单元格中设置deleteButton.clipsToBounds = false
@Shankar BS 感谢您的帮助 :) 在“class CustomCell: UICollectionViewCell”中,我尝试了 deleteButton.clipsToBounds = false,然后尝试了 imageView.clipsToBounds = false,但都没有成功:(
【参考方案1】:
问题出在故事板里面我有一个:
CollectionView
-CustomCell (type collectionViewCell)
-imageView
在 Attributes Inspector 下,在 Drawing 部分,所有 3 个都具有属性 clipsToBounds
。
我忽略了这样一个事实,即我在 imageView 上将 clipsToBounds 设置为 false(未选中),但在 CustomCell 和 CollectionView 上设置为 true(选中)。
如果其他人遇到此问题,请确保您在 collectionView、collectionViewCell 和 imageView 上 uncheck
clipsToBounds。
【讨论】:
很好的答案,只是一个旁注——collectionview 上的clipToBounds 将剪辑x 按钮的顶部,而单元格上的clipToBounds 将剪辑x 按钮的前导边.. @Eyzuky 感谢您提供更多信息。一切都有帮助! 自定义单元格中的剪辑到边界也需要为 false。【参考方案2】:好的,你可以像下面这样,首先创建一个xib文件并用collection view cell替换默认视图,然后像下面这样设置,
在上图中,将类名设置为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
【讨论】:
我明天试试。我快要睡着了。我会让你知道它是如何工作的。谢谢???? 顺便说一句,第二张照片没有显示 我找到了答案,在情节提要中,我没有选中 imageView 的 clipsToBounds,但选中了 collectionViewCell 和 collectionView 的 clipsToBounds。我将为您的努力投票赞成,因为这是一个很好的选择!再次感谢:)以上是关于Swift iOS-如何将按钮添加到 CollectionView 单元的外部的主要内容,如果未能解决你的问题,请参考以下文章
在 swift 中为按钮添加约束(Apple iOS 教程)
如何在 Swift 4 中以编程方式将 IBAction 添加到按钮?
如何在swift中使用for循环将按钮添加到stackview?