如何使用约束在表视图单元格之间创建空间？

Question

从屏幕截图中可以看到，顶部图像和屏幕顶部之间没有空格。 另外，我所有的图像尺寸都不一样。 如何在这些单元格之间创建空间并使所有图像具有相同大小。

Answer 1

您可以在UIImageView上创建高度约束。 然后创建一个宽高比约束并将其设置为16：9。 然后将UIImageView的contentMode属性设置为AspectFill并启用Clip To Bounds 。

然后将UIImageView的顶部约束为单元格的顶部，将底部约束为底部，并将尾部约束为尾部，且每一个常数都为15（或其他常数）。

在UILabel和UIImageView之间创建居中Y（垂直中心）和水平间距约束。

要阻止标签剪切，请在标签和单元格之间创建尾随约束，并将其值设置为> = 15或类似的值。 然后将“行数”属性设置为2（如果该名称在iPhone 4 / 4s / 5上运行时间太长，将其设置为0可能会在单元格的顶部和底部造成剪切）。

Answer 2

我建议去收集视图，您可以轻松管理单元格间距：

1）在情节提要上添加collection view夹collection view 。

2）以类似于表视图的方式添加其DataSource和Delegate （选择集合视图，并将拖放到黄色图标上）。

3）在单元格上添加imageView 。

4）相应地调整像cell大小。

5）还提供下图所示的像元间距检查。

6）调整行的最小间距，它将提供您想要的内容。

控制器类别：

import UIKit

//controller class with 3 needed protocols
class UnderlineViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

    //viewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()

        }
    //didReceiveMemoryWarning
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    //numberOfItemsInSection
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
        return 5
    }


    //dequeueReusableCell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        return cell
    }

    //numberOfSections

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

    // sizeForItemAt for each row
    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
        return CGSize(width: view.frame.width, height: 200)
    }

}

输出-：

还要取消选中scrollViewInsets 。

1）单击控制器的yello图标，然后选择Attribute Inspector 。

2）查找“调整滚动视图插图”，然后取消选中它。