Search code examples
iosswiftuicollectionviewuiscrollviewuiimageview

ScrollView Doesn't Scroll in collectionViewCell


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.


Solution

  • 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.