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

Posted 2023-02-27

【中文标题】如何使用约束在表格视图单元格之间创建空间？

【英文标题】：How can I create space between table view cells using constraints?

【发布时间】：2017-08-27 14:28:57

【问题描述】：

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

【问题讨论】：

请查看***.com/questions/28598830/…

【参考方案1】：

您可以在UIImageView 上创建高度限制。然后创建一个纵横比约束并将其设置为 16:9 之类的东西。然后将UIImageView的contentMode属性设置为AspectFill并开启Clip To Bounds。

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

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

要阻止标签剪裁，请在标签和单元格之间创建一个尾随约束，并将值设置为 >= 15 或其他值。然后将 Number Of Lines 属性设置为 2（如果名称在 iPhone 4/4s/5 上运行时间过长，则将其设置为 0 可能会导致单元格顶部和底部出现剪裁）。

【参考方案2】：

我建议您使用 collection views 您可以轻松管理单元格间距-：

1) 在故事板上添加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) 点击控制器的黄色图标并选择Attribute Inspector。

2) 查找 Adjust Scroll View Insets 并取消选中它。