在表格视图单元格内设置集合视图约束的正确方法
Posted
技术标签:
【中文标题】在表格视图单元格内设置集合视图约束的正确方法【英文标题】：Proper way to set constraints of collection view inside of table view cell 【发布时间】：2017-12-23 02:03:07 【问题描述】：我想知道设置约束的正确方法。我在表格视图单元格中有一个集合视图，作为在用户发布的图像之间滑动的一种方式。每个帖子（表格视图单元格）可以包含多个图像（每个图像都发布在集合视图中）。我将采用与 instagram 类似的风格，您可以在图像之间滑动。我遇到的问题是当我在集合视图和图像视图上设置约束时，它们不会在设备之间改变。似乎唯一的方法是根据用户使用的设备手动更改集合视图单元格和图像视图的大小。任何实现我想要完成的外观的替代方法也将不胜感激。
这里是集合视图上设置的约束
这是帖子在 iPhone SE 上的外观
这是帖子在 iPhone 8 Plus 上的外观
界面生成器中故事板上的整体帖子。
这是在集合视图内的图像上设置的约束。
【问题讨论】：
【参考方案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!
collection view 有以下限制：
第 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;
【讨论】：
【参考方案2】：感谢您的回答，我解决问题的方法是使用此代码更改集合视图单元格的大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
return CGSize(width: UIScreen.main.bounds.width, height: 346)
我意识到图像约束是针对单元格的，并且无法对单元格本身设置约束，因此您需要更改单元格的大小以使图像放大或缩小。
【讨论】：
以上是关于在表格视图单元格内设置集合视图约束的正确方法的主要内容，如果未能解决你的问题，请参考以下文章