动态集合视图单元格大小调整无法正常工作

Question

我试图创建具有动态单元格大小的 UICollectionView 并且此单元格包含一个 imageView 和一个标签并且它工作正常但无法设置每行的项目数并且该行仅包含1 个项目，我需要每行的项目数量根据项目的大小而变化：

ViewController 代码：

   import UIKit
    
    class ViewController: UIViewController {
    //MARK: - Outlets
        
        @IBOutlet weak var collectionViewOutlet: UICollectionView!
        @IBOutlet weak var collectionLayout: UICollectionViewFlowLayout! {
            didSet {
                   collectionLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
               }
        }
        //MARK: - Vars
        let items: [Item] = [Item(title: "abscancnakcnaslcnajcacnajkcnajncajsncjasc", image: UIImage(named: "1.jpg")!), Item(title: "abscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjasc", image: UIImage(named: "2.jpg")!), Item(title: "abscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjasc", image: UIImage(named: "3.jpg")!),Item(title: "abscancnakcnaslcnajcacnajkcnajncajsncjasc", image: UIImage(named: "2.jpg")!), Item(title: "abscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjasc", image: UIImage(named: "1.jpg")!), Item(title: "abscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjascabscancnakcnaslcnajcacnajkcnajncajsncjasc", image: UIImage(named: "3.jpg")!)]
     
 

     //MARK: - Insets
        let itemsPerRow = 2

let sectionInsets = UIEdgeInsets(top: 5.0, left: 5.0, bottom: 5.0, right: 5.0)

        
        //MARK: - Life Cycle
        override func viewDidLoad() {
            super.viewDidLoad()
            collectionViewOutlet.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "Cell")
        }
    
    
    }
    
    extension ViewController:UICollectionViewDelegate, UICollectionViewDataSource {
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return items.count
        }
        
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionViewOutlet.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
            cell.imageOutlet.image = items[indexPath.item].image
            cell.lblTitleOutlet.text = items[indexPath.item].title
            cell.imageMaxWidth = collectionViewOutlet.bounds.width - 5
            cell.lblMaxWidth = collectionViewOutlet.bounds.width - 5
    
            
            return cell
        }
        
        
        }

    //MARK: - Collection View Flowlayout
    extension ViewController: UICollectionViewDelegateFlowLayout {
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            
            let paddingSpace = Int(sectionInsets.left) * (itemsPerRow + 1)
            let availableWidth = Double (view.frame.width) - Double(paddingSpace)
            let WidthForItem = availableWidth / Double(itemsPerRow)
            return CGSize(width: WidthForItem - 5 , height: WidthForItem - 5 )
        }
        
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
            
            return sectionInsets
        }
        
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
            
            return sectionInsets.left
        }
    }

CollectionViewCell 代码：

import UIKit

class CollectionViewCell: UICollectionViewCell {
//MARK: - Outlets
    
    @IBOutlet weak var imageOutlet: UIImageView!
    
    @IBOutlet weak var lblTitleOutlet: UILabel!
    @IBOutlet private var imageMaxWidthConstraint: NSLayoutConstraint! {
         didSet {
             imageMaxWidthConstraint.isActive = false
         }
     }
    
    @IBOutlet private var lblMaxWidthConstraint: NSLayoutConstraint! {
         didSet {
            lblMaxWidthConstraint.isActive = false
         }
     }
     
     var imageMaxWidth: CGFloat? = nil {
         didSet {
             guard let maxWidth = imageMaxWidth else {
                 return
             }
             imageMaxWidthConstraint.isActive = true
             imageMaxWidthConstraint.constant = maxWidth
         }
     }
   
     
     var lblMaxWidth: CGFloat? = nil {
         didSet {
             guard let maxWidth = lblMaxWidth else {
                 return
             }
            lblMaxWidthConstraint.isActive = true
            lblMaxWidthConstraint.constant = maxWidth
         }
     }
    //MARK: - Awake
    override func awakeFromNib() {
        super.awakeFromNib()
        contentView.translatesAutoresizingMaskIntoConstraints = false
             
             NSLayoutConstraint.activate([
                 contentView.leftAnchor.constraint(equalTo: leftAnchor),
                 contentView.rightAnchor.constraint(equalTo: rightAnchor),
                 contentView.topAnchor.constraint(equalTo: topAnchor),
                 contentView.bottomAnchor.constraint(equalTo: bottomAnchor)
             ])
    }

}

商品代码：

import Foundation
import UIKit

struct Item {
    var title: String?
    var image : UIImage
    init(title: String, image: UIImage) {
        self.title = title
        self.image = image
    }
}

输出 1：如果 collectionLayout 已连接：

输出 2：如果 collectionLayout 未连接，我将获得所需的输出，但无法显示图像：

我需要输出 2 但对于我的数组中的所有图像，任何帮助将不胜感激...

Answer 1

修复 1：如何在连接插座的情况下获得输出 2？

@IBOutlet weak var collectionLayout: UICollectionViewFlowLayout! {
    didSet {
        // Stop doing this
        /*
        collectionLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        */
    }
}

修复 2：如何确保无论文本有多长都始终显示图像？

1. 为单元格中的 >= 60/or whatever image size you want with maximum text size 实例设置最小高度 UIImageView 约束。

或

2. 为两者的超级视图设置比例高度约束。 0.7 for UIImageView / 0.3 for UILabel。

或

3. 将 UILabel 的最大行数限制为 3/5 等。