How to fit the an image in to a collectionview?

user_12925124 0
Viewed 2862

Currently I have the below image:
enter image description here

I would like to insert a picture inside the container. but when I run this code

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

the result is this:
enter image description here

my understanding is that the image is larger than the frame causing the frame to expand.

How can I set an image inside so that the it fit within the box in the first image?

uicollectionviewcell uicollectionview swift ios
3 Answers

Welcome to Stackoverflow.

For that, you would need to add explicit height and width constraint. I assume you have a proper size to return in the method sizeForItemAt.

Lastly, don't forget to set cell's or ImageView's clipsToBounds to true.

user_32311940

You want 3 collection view cells in each row and the above image will fit in each cell. You need to implement the UICollectionViewDelegateFlowLayout delegate methods to set the collection view cell.

I am assuming that the cell will square and there is a gap of 10px between each cell and each line (so minimum line spacing and inter-item spacing will be 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
}

Now, make a custom collectionViewCell and put an imageView in it. Use auto-layout so that the image wholely fits inside the super view. Hope it will help.

user_78088610

This is an easier question. So, in the future I would suggest doing a few searches because that way you will learn the basics faster. 

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

This is the basic rundown. When you access the .contentMode property on your image view you might want to experiment with the available options to see which one you like best.

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

user_122474870
Related