在表视图单元格内设置集合视图约束的正确方法

Question

我想知道在这方面设置约束的正确方法。我在表格视图单元格内部有一个集合视图，作为在用户发布的图像之间滑动的一种方式。每个帖子（tableview单元格）可以包含多个图像（每个图像都在集合视图中发布）。我想采用与Instagram相似的风格，您可以在图像之间滑动。我遇到的问题是当我在集合视图和图像视图上设置约束时，它们不会在设备之间发生变化。似乎唯一的方法是手动更改集合视图单元格和图像视图的大小，具体取决于用户使用的设备。任何可以实现我想要完成的外观的替代方法也将受到赞赏。

以下是集合视图上设置的约束

这是帖子在iPhone SE上的外观

以下是该帖子在iPhone 8 Plus 上的外观

界面构建器中故事板上的总体帖子。

以下是在图像上设置的约束，它位于集合视图中。

Answer 1

第1步：创建一个UITableviewCell（如InstagramViewCell），其中包含集合视图。

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!

     }


 }

集合视图具有以下约束：

步骤2：创建一个包含图像视图的UICollectionViewCell（如ImageCollectionViewCell）。

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)

   }

}

第3步：将InstagramViewCell用于您的控制器。

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;
    }

}

Answer 2

我很感激答案，我解决问题的方法是使用此代码更改集合视图单元格的大小

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

我意识到图像约束是针对单元格的，并且无法对单元格本身设置约束，因此您需要更改单元格的大小以使图像变大或缩小。