swift中的集合视图单元格被压缩

Posted 2023-02-26

【中文标题】swift中的集合视图单元格被压缩

【英文标题】：Collection View cell in swift get compressed

【发布时间】：2020-06-28 02:53:40

【问题描述】：

我正在尝试在集合视图单元格中显示一个图像，后跟一个 UILabel，但问题是集合视图被压缩，因此只有 1/4 部分的图像是可见的并且 ui 标签是隐藏的。我怎么能解决这个问题。我还在集合视图单元格内添加了图像视图的约束，但它不起作用。

Click here to see interface builder design

Click here to see the simulator output

视图控制器代码

import UIKit

class ShopVC: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource
  
    

    @IBOutlet weak var productcollection: UICollectionView!
    var selectedpname: String!
    
    override func viewDidLoad() 
        super.viewDidLoad()
        print(selectedpname!)
        productcollection.delegate = self
        productcollection.dataSource = self
    
    
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return DataService.serviceobj.getProducts(product: selectedpname).count
        
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
        
        
        if let collectioncell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectioncell", for: indexPath) as? ProductCell
        
            let parray = DataService.serviceobj.getProducts(product: selectedpname)
            let product = parray[indexPath.row]
            
            collectioncell.updateCollectionCell(productname: product.pname, productimage: product.pimage)
            
            return collectioncell
        
        
        
        return UICollectionViewCell()
        
    
    

型号代码

import Foundation

struct Products

    private(set) public var pname:String
    private(set) public var pimage:String
    
    init(pname: String,pimage: String) 
        self.pname = pname
        self.pimage = pimage
    

CollectionView 单元格代码

import UIKit

class ProductCell: UICollectionViewCell 
    
    @IBOutlet weak var productname: UILabel!
    
    @IBOutlet weak var productimage: UIImageView!
    
    
    override  func awakeFromNib() 
        super.awakeFromNib()
        
        layer.cornerRadius = 10
        layer.shadowColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
        layer.shadowRadius = 5
        layer.shadowOpacity = 10
    
    
    func updateCollectionCell(productname: String,productimage: String)
    
        
        self.productimage.image = UIImage(named: productimage)
        self.productname.text = productname
    

数据服务代码

import Foundation


    class DataService
    
         static let serviceobj = DataService()
        
       private let categories = [Products(pname: "Shirts", pimage: "shirts.png"),
        Products(pname: "Hoodies", pimage: "hoodies.png"),
        Products(pname: "Hats", pimage: "hats.png"),
        Products(pname: "Digital", pimage: "digital.png")]
        
        private let shirts = [Products(pname: "Shirt1", pimage: "shirt01.jpg"),
        Products(pname: "Shirt2", pimage: "shirt02.jpg"),
        Products(pname: "Shirt3", pimage: "shirt03.jpg"),
        Products(pname: "Shirt4", pimage: "shirt04.jpg")]
    
        
        private let hoodies = [Products(pname: "Hoodie1", pimage: "hoodie01.jpg"),
                               Products(pname: "Hoodie2", pimage: "hoodie02.jpg"),
                               Products(pname: "Hoodie3", pimage: "hoodie03.jpg"),
                               Products(pname: "Hoddie4", pimage: "hoodie04.jpg")]
        
       func getCategories() -> [Products]
        
            return categories
        
        
        func getProducts(product: String) -> [Products]
        
            switch product 
            case "Shirts":
                return shirts
            case "Hoodies":
                return hoodies
           
            default:
                return categories
                
            
            
            
        
        
        
    

【问题讨论】：

你的约束看起来如何？

我为图像视图提供了固定的宽度和大小，并将其从集合视图单元格的左上角和右上角固定为 8

如果您发布一些代码，我相信我们中的某个人将能够帮助您。

既然你的图像视图有一个固定的高度，你能计算出你的单元格应该有多大吗？

是的，使集合视图单元格足够大以容纳图像视图和标签

【参考方案1】：

我提取了您的回购并查看了。您似乎没有在集合视图单元格中设置任何约束。

您需要为单元格中的所有视图设置前导、顶部、尾随和底部约束。您还需要在图像视图和标签上设置宽度/高度约束。

【讨论】：

哦，我们应该为集合视图单元格中的所有 4 个面设置约束。谢谢它现在可以工作了