Proper way to set constraints of collection view inside of table view cell

Question

I am wondering the proper way to set the constraints on this. I have a collection view inside of a table view cell as a way to swipe between images that the user posts. Each post (tableview cell) can contain multiple images (Which are each posted in the collection view). I am going for a similar style as instagram has where you can swipe between images. The problem I am having is when I set constraints on the collection view and image view they don't change between devices. It seems the only way to do it is manually change the size of the collection view cell and image view depending on the device the user is using. Any alternative way to achieve the look I am trying to accomplish would be appreciated as well.

Here are the constraints set on the collection view

Here is how the post looks on an iPhone SE

Here is how the post is supposed to look on the iPhone 8 Plus

Overall post on the storyboard in interface builder.

Here are the constraints set on the image, which is inside the collection view.

Answer 1

I appreciate the answer, the way I solved the problem was by changing the size of the collection view cell using this code

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: UIScreen.main.bounds.width, height: 346) }

I realized the image constraints were to the cell and there is no way to set constraints on the cell itself, so you need to change the size of the cell so the image becomes enlarged or shrinks.

Answer 2

Step 1: Create a UITableviewCell (as Like InstagramViewCell), which contains collection view.

import UIKit

class InstagramViewCell: UITableViewCell {

   @IBOutlet weak var innerCellView:innerCell!
   @IBOutlet weak var collectionView: UICollectionView!

   var totalElements = 0

   override func awakeFromNib() {

     super.awakeFromNib()

     let flowLayout = UICollectionViewFlowLayout.init()
     flowLayout.itemSize = CGSize.init(width: self.frame.size.width, height: self.frame.size.height)
     flowLayout.scrollDirection = .horizontal
     self.collectionView?.collectionViewLayout = flowLayout

     self.collectionView.delegate = self
     self.collectionView.dataSource = self
     self.collectionView.register(UINib.init(nibName: "ImageCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "ImageCollectionViewCell")

   }

   override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
   }

   func setInformation(_ numberOFCell : Int, _ information : NSDictionary) {
  self.totalElements = numberOFCell
    self.collectionView.reloadData()
   }

}

extension InstagramViewCell:UICollectionViewDelegateFlowLayout,UICollectionViewDataSource {

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      return CGSize.init(width: self.frame.size.width, height: self.frame.size.height)
   }

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
       return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
       return 0
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
       return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

       return self.totalElements

    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as? ImageCollectionViewCell
       cell?.setInformation("image")
       return cell!

     }


 }

Where collection view have following constraints:

Step 2: Create a UICollectionViewCell (as Like ImageCollectionViewCell), which contains image view.

import UIKit

class ImageCollectionViewCell: UICollectionViewCell {

   @IBOutlet weak var imageView: UIImageView!

   override func awakeFromNib() {
      super.awakeFromNib()
    // Initialization code
   }

   func setInformation(_ imageName : String) {

    self.imageView.image = UIImage.init(named: imageName)

   }

}

Step 3: Use InstagramViewCell into your controller.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var table: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let backButton = UIButton(type: .custom)
        backButton.frame = CGRect(x:0,y:0,width: 45, height:45)
        backButton.setImage(UIImage(named: "back-arrow-white"), for: .normal)
        let backItem = UIBarButtonItem.init(customView: backButton)
        self.navigationItem.leftBarButtonItem = backItem;


        table.delegate = self
        table.dataSource = self
        table.estimatedRowHeight = 100.0
        table.rowHeight = UITableViewAutomaticDimension
        table.register(UINib.init(nibName: "InstagramViewCell", bundle: nil), forCellReuseIdentifier: "InstagramViewCell")

    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)


    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}

extension ViewController:UITableViewDelegate,UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "InstagramViewCell") as? InstagramViewCell
        let information:NSDictionary = [:]
        cell?.setInformation(10, information)
        return cell!
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableViewAutomaticDimension;
    }

}