0

我试图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，但对于我数组中的所有图像，任何帮助将不胜感激......

4

1 回答 1

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

或者

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

或者

  1. 将最大行数限制为UILabel3/5 等。
于 2021-06-27T05:12:12.883 回答