ScrollView Doesn't Scroll in collectionViewCell

Question

I am creating a collage app. The functionality I am looking at in my collectionViewCell is exactly like this: How to make a UIImage Scrollable inside a UIScrollView?

What I have done till now:

Created a custom collectionViewCell embedded a UIScrollView in it and an imageView inside the scrollView. I have set their constraints. Following is my code for collectionViewCell :

    override init(frame: CGRect) {
        super.init(frame: frame)
        
    
        
//        addSubview(scrollView)
        insertSubview(scrollView, at: 0)
        contentView.isUserInteractionEnabled = true
        scrollView.contentMode = .scaleAspectFill
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(imageView)
        scrollContentView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.isScrollEnabled = true
        imageView.isUserInteractionEnabled = false
        
        
        scrollView.delegate = self
        scrollView.maximumZoomScale = 5.0
        scrollView.backgroundColor = .red
        scrollViewDidScroll(scrollView)
//        scrollViewWillBeginDragging(scrollView)
       
        
        let constraints = [

//          Scroll View Constraints
         scrollView.topAnchor.constraint(equalTo: contentView.topAnchor,constant: 0.0)             
         scrollView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor,constant: 0.0),
         scrollView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor,constant: 0.0),
         scrollView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor,constant: 0.0),


//          ImageView Constraints
            imageView.topAnchor.constraint(equalTo: self.scrollView.topAnchor),
            imageView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor),
            imageView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor),
            imageView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor)

        ]

        NSLayoutConstraint.activate(constraints)
        
    }

Another issue I face here is if I do insertSubview() instead of addSubview my collectionView function for didselectItemAt works fine else if I use addSubView the didselectItemFunction doesn't execute. Code For didSelectItem :

   func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
    if selectedImage[indexPath.row] != UIImage(named: "empty-image") {
       
        collectionViewCellClass.scrollView.isUserInteractionEnabled = true
        collectionViewCellClass.scrollViewDidScroll(collectionViewCellClass.scrollView)
        collectionViewCellClass.scrollView.showsHorizontalScrollIndicator = true
        
    }else {
        
    collectionViewCellClass.imageView.isUserInteractionEnabled = false
    self.currentIndex = indexPath.row
    if UIImagePickerController.isSourceTypeAvailable(.photoLibrary){
        imagePicker.delegate = self
        imagePicker.allowsEditing = false
        imagePicker.sourceType = .savedPhotosAlbum
        present(imagePicker, animated: true, completion: nil)
    }
    }
}

Code for CellForItemAt IndexPath :

     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        
     
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
        
        cell.imageView.image =  selectedImage[indexPath.item]
//      TODO: Round corners of the cell
       
        cell.scrollView.frame = CGRect(x: 0, y: 0, width: cell.frame.size.width, height: cell.frame.size.height)
//        cell.scrollView.contentSize = CGSize(width: cell.imageView.image!.size.width * 2, height: cell.imageView.image!.size.height * 2)
        cell.scrollView.contentSize = cell.imageView.image?.size ?? .zero
        cell.scrollView.contentMode = .center
        cell.scrollView.isScrollEnabled = true
//        cell.scrollContentView.frame = CGRect(x: 0, y: 0, width: cell.frame.size.width, height: cell.frame.size.height)
        cell.imageView.frame = CGRect(x: 0, y: 0, width: cell.imageView.image!.size.width, height: cell.imageView.image!.size.height)

//        cell.imageView.clipsToBounds = true
      
        cell.backgroundColor = .black
        
        return cell
        
    }

I have tried changing the size of ImageView = cell.frame.size still no luck and changed the size for scrollView Frame as well to imageView.image.size but for some reason scrollView doesn't scroll.

baronfac · Answer 1 · 2021-01-14T13:09:08.217

0

Try adding the scrollView to the cells contentView:

self.contentView.addSubview(scrollView)

edited Jan 14 '21 at 13:09

answered Jan 14 '21 at 11:13

baronfac

348
3
9

Doesn't Work. I did the way you said then didselectItem was not executing so I turned contentView.isUserIteractionEnable = false and when the new image is there I will set it to true. but still doesn't work – Omair Jan 14 '21 at 11:24

score 0 · Answer 2 · answered Jan 14 '21 at 12:15

Insertview vs addSubview

addSubview: add the view at the frontmost. insertSubview: add the view at a specific index.

when you add your scrollview it using addSubView method it will block all the user interaction for the view's that are below it. That's why didSelect event is not triggered. see this question

To make the scrollview scroll you need to set its contentSize which should be greater than scrollview's frame. try adding an image whose size is greater than collectionview cell.

scrollView.contentSize = imageView.bounds.size

I made the didselectwork but as you mentioned contentView.size should be greater I set it to imageView.image.size which is I am 100% greater than the frame of scrollView. — Omair, Jan 14 '21 at 12:39

score -1 · Accepted Answer · answered Jan 15 '21 at 05:33

I finally found the Solution, following is what worked for me :

if selectedImage[indexPath.row] != UIImage(named: "empty-image"){
   cell.contentView.isUserInteractionEnabled = true
}else{
   cell.contentView.isUserInteractionEnabled = false  
}

The UIImage(named: "empty-image") is the image that appears when a user doesn't have made any selection for his image. I wrote the above code in the cellForItemAt function. Also, I had to set imageView.frame equal to the original width and height of the image.

cell.imageView.frame = CGRect(x: 0, y: 0, width: cell.imageView.image!.size.width, height: cell.imageView.image!.size.height)

The above solution solved my problem. Hopefully, it will help someone.

ScrollView Doesn't Scroll in collectionViewCell

3 Answers3