CODEWITHSUNDEEP
iosswiftuicollectionview
jprly
jprly

Reputation: 23

Returning Proper Image from Collection View

I've created a collection view that shows several images. However when I tap one of the cells it's not populating the correct image.

This is my collection of images:

let stickers: [UIImage] = [
    UIImage(named: "cow")!,
    UIImage(named: "chicken")!,
    UIImage(named: "pig")!,
]

I set a default image:

var activeSticker = UIImage(named: "cow")

This function sets up the collection view and displays all of the images from above as individual cells:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.stickerImage.image = stickers[indexPath.item]
    cell.backgroundColor = UIColor(white: 1, alpha: 0.9)
    cell.translatesAutoresizingMaskIntoConstraints = false
    cell.contentMode = .scaleAspectFill
    cell.clipsToBounds = true
    cell.layer.cornerRadius = 7
    let addSticker = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    addSticker.addTarget(self, action: #selector(addStickerTapped), for: UIControl.Event.touchUpInside)
    activeSticker = cell.stickerImage.image
    cell.addSubview(addSticker)
    return cell
}

This function currently adds images to the view, but it's not the cell tapped, I'm not sure how it is setting the value.

@IBAction func addStickerTapped() -> Void {
    print("Hello Sticker Button")
    let image = activeSticker 
    let imageView = UIImageView(image: image!)
    imageView.frame = CGRect(x: 100, y: 100, width: 100, height: 200)
    imageView.contentMode = .scaleAspectFit
    imageView.isUserInteractionEnabled = true
    self.view.addSubview(imageView)
    //Imageview on Top of View
    self.view.bringSubviewToFront(imageView)
    selectedImageView = imageView
}

Upvotes: 1

Views: 315

Answers (1)

PGDev
PGDev

Reputation: 24341

First of all, move all the code of CollectionViewCell's layout from cellForItemAt to awakeFromNib().

Next, create the addSticker button in the CollectionViewCell's xib itself instead of adding it everytime in cellForItemAt.

Also, use closure to handle the tap event on addSticker button.

So, the CollectionViewCell looks like,

class CollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var stickerImage: UIImageView!
    var handler: (()->())?

    override func awakeFromNib() {
        super.awakeFromNib()
        self.backgroundColor = UIColor(white: 1, alpha: 0.9)
        self.contentMode = .scaleAspectFill
        self.clipsToBounds = true
        self.layer.cornerRadius = 7
    }

    @IBAction func onTapAddStickerButton(_ sender: UIButton) {
        self.handler?()
    }
}

Now, in cellForItemAt create the instance of CollectionViewCell and set the handler that will be called after tapping addSticker button, i.e.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    let sticker = stickers[indexPath.item]
    cell.stickerImage.image = sticker
    cell.handler = {
        self.activeSticker = sticker
        //add the code after tapping the addSticker here...
    }
    return cell
}

I'm a bit confused with what you're trying to do in addStickerTapped() method. Kindly clarify more for a better understanding.

Upvotes: 1

Related Questions