how to insert images in collection view cell

Question

I want to insert three images in collection view cell, 3 images. One image for each cell.Only one section. But when the simulator shows black screen, no any images. Here is part of my code:

import Foundation
import UIKit

class CatImagesViewController:UIViewController,UICollectionViewDataSource,UICollectionViewDelegate
{
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return 3
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let con = CatService(test:"test")

    let temp = NSUserDefaults()
    let  number = temp.integerForKey("num_of_images")

    var title_array:Array<String> = con.imageNamesForCategoryAtIndex(number)

    var string:String = title_array[indexPath.row]

    print("indexPath.row \(indexPath.row)");
    print("string is \(string)")

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("firstCollectionCell", forIndexPath: indexPath)

    let imageview:UIImageView=UIImageView(frame: CGRectMake(50, 50, self.view.frame.width-200, 50))
    let image:UIImage = UIImage(named:string)!
    imageview.image = image
   // self.view.addSubview(imageview)
    cell.contentView.addSubview(imageview)
    return cell
}
}

I revised cell.contentView.addSubview(image view), but still black screen.

What is the height of the cell? – Ryniere Silva Oct 25 '15 at 20:28 — Ryniere Silva, Oct 25 '15 at 20:28
I don't know how to set the height of the cell.... – beasone Oct 25 '15 at 20:30 — beasone, Oct 25 '15 at 20:30

Ryniere Silva · Accepted Answer · 2015-10-25T20:46:07.983

You should use

cell.contentView.addSubview(imageview)

indexPath.row is used to know the cell position in the table.

To set the height:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSizeMake(50, 414)
}

And you should use the property item of NSIndexPath

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

let con = CatService(test:"test")

let temp = NSUserDefaults()
let  number = temp.integerForKey("num_of_images")

var title_array:Array<String> = con.imageNamesForCategoryAtIndex(number)

var string:String = title_array[indexPath.item]

print("indexPath.row \(indexPath.item)");
print("string is \(string)")

let cell = collectionView.dequeueReusableCellWithReuseIdentifier("firstCollectionCell", forIndexPath: indexPath)

let imageview:UIImageView=UIImageView(frame: CGRectMake(50, 0, self.view.frame.width-200, 50))
let image:UIImage = UIImage(named:string)!
imageview.image = image
cell.contentView.addSubview(imageview)
return cell
}

Do you mean fun collectionView ? There is no function tableView in this class — beasone, Oct 25 '15 at 20:37

score 0 · Answer 2 · edited Aug 02 '17 at 07:23

0

You need to be putting the images in the contentView --

cell.contentView.addSubview (...)

Also, you are reusing the same frame on each image which would cause them to overlay one another.

edited Aug 02 '17 at 07:23

Uma Madhavi

4,851
5
38
73

answered Oct 25 '15 at 20:32

RegularExpression

3,531
2
25
36

I use let imageview:UIImageView=UIImageView(frame: CGRectMake(50, 50, self.view.frame.width-200, 50)) let image:UIImage = UIImage(named:string)! imageview.image = image cell.contentView.addSubview(image view) but still doesn't work. – beasone Oct 25 '15 at 20:34

Abishek Thangaraj · Answer 3 · 2018-08-11T09:38:25.020

Code for Swift 4: indexPath.row is used to know the cell position in the table. To set the height:

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {   
    return 1   
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    var imageview:UIImageView=UIImageView(frame: CGRect(x: 50, y: 50, width: 200, height: 200));

        var img : UIImage = UIImage(named:"Your image name")
        imageview.image = img

        cell.contentView.addSubview(imageview)

    return cell
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: 50, height: 414)
}

score 0 · Answer 4 · answered Jan 04 '21 at 00:06

When you add a subview to a cell, that cell can be reused meaning you will be creating multiple UIImageViews as you scroll up and down. Here's what I'd use instead:

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        
        for view in cell.contentView.subviews {
            view.removeFromSuperview()
        }
        
        let img = UIImageView(frame: cell.frame)
        img.image = UIImage(named: collectionViewData[indexPath.row])
        cell.contentView.addSubview(img)
        
        return cell
    }

score 0 · Answer 5 · answered Nov 01 '21 at 18:55

for SWIFT 5 you can use switch statment and create CollectionViewCell.

@IBOutlet weak var imageCell: UIImageView!

override func collectionView(_ collectionView: UICollectionView,

cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: 

reuseIdentifier, for: indexPath) as! CollectionViewCell
     
    switch indexPath.row {

    case 0:

        cell.imageCell.image = ImageLiteral

    case 1:

        cell.imageCell.image = ImageLiteral

    case 2:

        cell.imageCell.image = ImageLiteral

    default:

        break

    }

    return cell
}

how to insert images in collection view cell

5 Answers5