如何将图像放入collectionview？

Posted 2023-03-14

【中文标题】如何将图像放入collectionview？

【英文标题】：How to fit the an image in to a collectionview?

【发布时间】：2020-03-30 00:15:23

【问题描述】：

目前我有以下图片：

我想在容器中插入一张图片。 但是当我运行这段代码时

//MARK: - UICollectionViewDataSource protocol

// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    return self.items.count

//make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

    //get  a reference to our storyboard cell
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! AppIconViewCell

    // Use the outlet in our custom class to get a reference to the UILabel in the cell
    cell.myLabel.text = self.items[indexPath.item]
    cell.ImageView.image = UIImage.init(named: "page-01")

    //cell.backgroundColor = UIColor.cyan
    cell.layer.borderColor = UIColor.black.cgColor
    cell.layer.borderWidth = 1
    cell.layer.cornerRadius = 8

    return cell

结果是这样的：

我的理解是图像大于框架导致框架扩大。

我怎样才能在里面设置一个图像，以便它适合第一张图像的框？

【参考方案1】：

欢迎来到 ***。

为此，您需要添加明确的 height 和 width 约束。我假设您有适当的大小可以在方法 sizeForItemAt 中返回。

最后，别忘了将cell's 或ImageView's clipsToBounds 设置为true。

【讨论】：

我设法解决了这个问题，我进入了故事板并修复了图像的高度和宽度限制。并确保它小于单元格内内容视图的大小。谢谢。

【参考方案2】：

您希望每行有 3 个集合视图单元格，上面的图像将适合每个单元格。您需要实现 UICollectionViewDelegateFlowLayout 委托方法来设置集合视图单元格。

我假设单元格是正方形的，并且每个单元格和每行之间有 10px 的间隙（因此最小行距和项间距将为 10）

    let cellGap = 10
    let leftGapToScreen = 10
    let rightGapToScreen = 10
    let minLineSpacing = 10
    let minInterItemSpacing = 10

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let availableWidth = UIScreen.main.bounds.width - (2 * cellGap) - 
    leftGapToScreen - rightGapToScreen
    let cellWidth = availableWidth / 3
    let cellHeight = cellWidth
    return CGSize(width: cellWidth, height: cellHeight)


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets 
    return UIEdgeInsets(top: 0, left: leftGapToScreen, bottom: 0, right: rightGapToScreen)


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat 
    return minLineSpacing

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat 
    return minInterItemSpacing

现在，制作一个自定义 collectionViewCell 并将一个 imageView 放入其中。使用自动布局，使图像完全适合超级视图。希望它会有所帮助。

【讨论】：

感谢您的建议。 :)

【参考方案3】：

这是一个更简单的问题。所以，在未来我会建议做一些搜索，因为这样你会更快地学习基础知识。

           cell.ImageView.image = UIImage.init(named: "page-01")
            cell.ImageView.contentMode = .scaleAspectFill
            cell.clipsToBounds = true

这是基本的纲要。当您访问图像视图上的 .contentMode 属性时，您可能希望尝试使用可用选项来查看您最喜欢哪个选项。

https://developer.apple.com/documentation/uikit/uiview/1622619-contentmode