iOS UICollectionView每行两列适配异常及UITableView同类问题求助

问题描述 #

UICollectionView的两个项目之间存在大量空白，无法在所有iOS设备尺寸上正确显示。尝试实现每行显示两个项目，但多种约束配置均无效，同时UITableView也存在类似的适配问题。

问题代码 #

import UIKit

class MarketProduct: UIViewController {

    @IBOutlet weak var searchbar: UISearchBar!
    @IBOutlet weak var ItemCollectionView: UICollectionView!
    let productImages:[String]=["pulse","pulse","pulse","pulse","pulse","pulse","pulse","pulse","pulse","pulse","pulse"];
    let productPrice:[String]=["$20000","$20000","$20000","$20000","$20000","$20000","$20000","$20000","$20000","$20000","$20000"]
    let productDescription:[String]=["Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements","Server-side rendering with JavaScript libraries like React is where the server returns a ready to render HTML page and the JS scripts required to make the page interactive. The HTML is rendered immediately with all the static elements"]
    let productAge:[String]=["2 years old","2 years old","2 years old","2 years old","2 years old","2 years old","2 years old","2 years old","2 years old","2 years old","2 years old"]
    let locations:[String]=["pune","pune","pune","pune","pune","pune","pune","pune","pune","pune","pune"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        searchbar.searchTextField.backgroundColor = .white
        searchbar.layer.borderWidth = 1
        searchbar.layer.borderColor = UIColor.black.cgColor
        searchbar.layer.cornerRadius = 15
        searchbar.layer.masksToBounds = true
 
    }
    
}
extension MarketProduct:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout
{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        productImages.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = ItemCollectionView.dequeueReusableCell(withReuseIdentifier:"ItemCell", for: indexPath) as!  Items
        cell.itemImage.image = UIImage(named: productImages[indexPath.row])
        cell.PriceLabel.text = productPrice[indexPath.row]
        cell.descriptionLabel.text = productDescription[indexPath.row]
        cell.itemLocation.text = locations[indexPath.row]
        cell.layer.cornerRadius = 20
        cell.layer.borderWidth = 1
        cell.layer.borderColor = UIColor.blue.cgColor
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
//          let height = collectionView.frame.height
//            let width  = collectionView.frame.width
//            return CGSize(width: width, height: height)
//          let height = view.frame.size.height
          let width = view.frame.size.width
      
          // in case you you want the cell to be 40% of your controllers view
        return CGSize(width: width * 0.4, height: 360)

        
    }
    
    
    
}

解决方案 #

1. 修正Cell宽度计算逻辑 #

当前代码直接用view.frame.width * 0.4，未考虑collectionView内边距和item间距，导致多余空白。正确做法是基于collectionView可用宽度平分，同时统一管理间距：

extension MarketProduct: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    // 原有数据源方法保持不变
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 定义左右内边距各10，item之间间距10
        let horizontalPadding: CGFloat = 10
        let interItemSpacing: CGFloat = 10
        let totalSpacing = horizontalPadding * 2 + interItemSpacing
        
        // 计算可用宽度并平分给两个cell
        let availableWidth = collectionView.frame.width - totalSpacing
        let cellWidth = availableWidth / 2
        
        return CGSize(width: cellWidth, height: 360)
    }
    
    // 设置item之间的最小水平间距
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
    
    // 设置行之间的垂直间距
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 15
    }
}

2. 配置CollectionView内边距 #

在viewDidLoad中添加内边距，确保左右有留白：

override func viewDidLoad() {
    super.viewDidLoad()
    // 原有searchBar配置代码
    
    // 设置collectionView内边距
    ItemCollectionView.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}

3. 支持屏幕旋转适配 #

保证旋转后布局自动调整，在viewWillLayoutSubviews中刷新布局：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    // 强制刷新布局，重新计算cell宽度
    ItemCollectionView.collectionViewLayout.invalidateLayout()
}

4. 检查CollectionView约束 #

确保CollectionView的Auto Layout约束正确：

• 顶部约束绑定到searchBar底部
• 底部约束绑定到安全区底部
• 左右约束绑定到父视图边缘（或留固定边距）
• 不设置固定宽度，让其自适应父视图宽度

UITableView适配参考 #

如果是UITableView单元格高度适配问题，可按以下配置：

override func viewDidLoad() {
    super.viewDidLoad()
    // 开启自动高度计算
    yourTableView.estimatedRowHeight = 100 // 设置预估高度
    yourTableView.rowHeight = UITableView.automaticDimension
}

同时确保单元格内所有控件有完整的Auto Layout约束（从顶部到底部建立约束链，让系统计算准确高度）

内容的提问来源于stack exchange，提问作者Akshay Gandal