以编程方式用UIImage填充UIImageView并将其放置在UICollectionViewCell中

问题描述

我一直在尝试用UIImageView（汽车系统映像）填充UIImage。我已经在网上尝试了许多解决方案，但似乎无法填补UICollectionViewCell，这里出现了尴尬的空格：

我发现，因为UIView是UICollectionViewCell的大小，如下所示：

必须是图像未缩放到视图。因此，我在为集合视图创建单元格时修改了内容模式以缩放以填充图像视图，然后将此图像视图添加到集合视图单元格中：

func collectionView(_ collectionView: UICollectionView,cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CarCell",for: indexPath)
    
    let carImageView = UIImageView(image: UIImage(systemName: "car"))
    
    carImageView.contentMode = .scaleToFill
    cell.addSubview(carImageView)
    
    return cell
    
}

这似乎没有任何效果（即使将.bottom用于内容模式时图像也不会移动），但是在视图层次结构中看来，这就是应该解决的问题。

有人知道我在做什么错吗？

这是情节提要：

更新：

我已使用以下代码向图像视图添加了约束：

func collectionView(_ collectionView: UICollectionView,for: indexPath)
    
    let carImage = UIImage(systemName: "car")
    
    let carImageView = UIImageView(image: carImage)
    carImageView.contentMode = .scaleToFill
    
    cell.addSubview(carImageView)
    
    carImageView.topAnchor.constraint(equalTo: cell.topAnchor).isActive = true
    carImageView.bottomAnchor.constraint(equalTo: cell.bottomAnchor).isActive = true
    carImageView.leftAnchor.constraint(equalTo: cell.leftAnchor).isActive = true
    carImageView.rightAnchor.constraint(equalTo: cell.rightAnchor).isActive = true
    
    return cell
    
}

func collectionView(_ collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,sizeForItemAt indexPath: IndexPath) -> CGSize {
    
    let columns: CGFloat = 2
    
    let collectionViewWidth = collectionView.bounds.width
    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let spaceBetweenCells = flowLayout.minimumInteritemSpacing * (columns - 1)
    
    let adjustedWidth = collectionViewWidth - spaceBetweenCells
    
    let width: CGFloat = floor(adjustedWidth / columns)
    let height: CGFloat = width
    
    return CGSize(width: width,height: height)
    
}

但是最终会缩小图像视图，而不是将其放大到单元格的大小：

解决方法

从collectionView单元的所有位置开始，对imageView施加约束zero，并将图像内容模式设置为.scaleToFill，然后显示结果。

谢谢

,

我到了你那里。正如我之前评论过的那样，以显示您如何对图像视图施加约束，因此存在错误。有一个名为“ translatesautoresizingmaskintoconstraints”的属性，您需要在设置视图约束的同时进行设置。您可以here来了解它。

现在，在您的 cellForItemAt 中，您需要更改：-

func collectionView(_ collectionView: UICollectionView,cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CarCell",for: indexPath)

let carImage = UIImage(systemName: "car")

let carImageView = UIImageView(image: carImage)
carImageView.contentMode = .scaleToFill

carImageView.translatesautoresizingmaskintoconstraints = false

cell.addSubview(carImageView)

carImageView.centerXAnchor.constraint(equalTo: cell.contentView.centerXAnchor).isActive = true
carImageView.centerYAnchor.constraint(equalTo: cell.contentView.centerYAnchor).isActive = true
carImageView.heightAnchor.constraint(equalTo: cell.contentView.heightAnchor).isActive = true
carImageView.widthAnchor.constraint(equalTo: cell.contentView.widthAnchor).isActive = true

return cell

}

您可能会注意到，我还更改了约束条件，以使您对要设置与单元格一样精确的图像尺寸时应如何赋予约束条件有一个了解。提供约束而不是单元格时，应始终访问单元格的内容视图。