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

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. 为单元格中的UIImageView 实例设置一个最小高度>= 60/or whatever image size you want with maximum text size 约束。

或

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

或

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