如何將圖像放入集合視圖中？

Question

目前我有以下圖片：

我想在容器內插入一張圖片。 但是當我運行這段代碼時

//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
}

結果是這樣的：

我的理解是圖像大於框架導致框架擴展。

如何在內部設置圖像以使其適合第一張圖像中的框？

Answer 1

歡迎使用 Stackoverflow。

為此，您需要添加明確的高度和寬度約束。 我假設您在sizeForItemAt方法中返回了合適的大小。

最后，不要忘記將cell或ImageView的clipsToBounds為true 。

Answer 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。 使用自動布局，使圖像完全適合超級視圖。 希望它會有所幫助。

Answer 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