How to show check tick mark in Collection view (images)

Question

In Table view we can put checkmark easily on cells.

But in Collection View how can we put check mark, when we select a cell (image)?

I just took a image view inside the cell and image view and put a tick mark image. My code is below.

But it's not working.

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
{

   //  handle tap events
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! customCollectionViewCell


    if(cell.checkMarkImage.hidden == true)
    {
        print("Hidden")
       cell.checkMarkImage.hidden = false

    }
    else
    {
         cell.checkMarkImage.hidden = true
        print("No Hidden")
    }
}

http://stackoverflow.com/questions/18977527/how-do-i-display-the-standard-checkmark-on-a-uicollectionviewcell — Ujjwal Khatri, Mar 23 '16 at 13:09
Short answer you cant, you either create your custom cell, or try to find a third party cell somewhere on the internet — sken3r.MI, Mar 23 '16 at 13:40
custom cell + delegate (optional, only if you want to get update immediately when the tick changed its state); — holex, Apr 19 '16 at 11:19

score 4 · Answer 1 · answered Jul 20 '16 at 07:58

//Delegate Method cellForItemAtIndexPath

func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) ->
UICollectionViewCell
{
    //Get a reference to our storyboard cell
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
                                                            "pickSomecell",
                   forIndexPath: indexPath) as! pickSomeGridViewController

    //Show Images in grid view
    cell.cellImage.image = self.arrAllOriginalImages[indexPath.row]
                                                            as? UIImage        

    //Check Mark toggle.
    cell.toggleSelected()      

    //return cell.
    return cell
}

And in pickSomeGridViewController show checkMark image selected or not.

class pickSomeGridViewController: UICollectionViewCell{
//Outlet of cell image.
@IBOutlet var cellImage: UIImageView!

//Outlet of checkMark image.
@IBOutlet var cellCheckMarkImage: UIImageView!

//Function  for select and deselect checkmark.
  func toggleSelected ()
  {
    //If image is selected.
    if (selected)
    {
            //Show check mark image.
            self.cellCheckMarkImage.hidden = false           
    }   

    else
    {
             //Hide check mark image.
            self.cellCheckMarkImage.hidden = true            
    }
  }   
 }

score 1 · Answer 2 · answered Apr 19 '16 at 10:41

I see two main problems with this code:

You use dequeueReusableCellWithReuseIdentifier method which obtains different cell from collection view cache, not the one on screen. Use cellForItemAtIndexPath method of collection view instead.
You try to save cell's state (selected/not selected) in the cell itself. It's common mistake when working with UITableView/UICollectionView and this approach will not work. Instead, keep the state in some other place (in dictionary, for example) and restore it every time collection view calls your data source cellForItemAtIndexPath method.

Yes I will try . So i have to use cellForItemAtIndexPath method ? Thanks — kishor, Apr 19 '16 at 10:57

score 1 · Answer 3 · answered Dec 06 '16 at 10:14

var arrData = NSMutableArray() // 1.Make a ModalClass.swift and NSArray with modal class objects like this

 class CustomModal: NSObject {
        //Declare bool variable for select  and deselect login
        var is_selected = Bool()
        //you can declare other variable also
        var id = Int32()

}




// 2. custom array with modal objects

    override func viewDidLoad() {
        super.viewDidLoad()
        let arrTemp = NSArray()
        arrTemp = [1,2,3,4,5,6,7,8,9,10]
        for i in 0 ..< arrTemp.count{
            let eventModal = CustomModal()
            eventModal.is_selected = false
            eventModal.id = arrTemp[i] 
            arrData.add(eventModal)
        }
        tblView.reloadData()

    }

// 2. Use collection view delegate method

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let modal = arrData[indexPath.row] as! CustomModal()
    modal.is_selected = true
    self.arrData.replaceObject(at: indexPath.row, with: modal)

    tblView.reloadData()
}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    let modal = arrData[indexPath.row] as! CustomModal()
    modal.is_selected = false
    self.arrData.replaceObject(at: indexPath.row, with: modal)

    tblView.reloadData()
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! YourCellClass
    let modal = arrData[indexPath.row] as! CustomModal
    if modal.is_selected == true{
        cell.imgView.image = UIImage(named:"selected_image")
    }else{
        cell.imgView.image = UIImage(named:"deselected_image")
    }
}

score 0 · Answer 4 · answered Mar 24 '16 at 05:43

0

@Kishor, paintcode is the third party tool through which you can do that. I have provided the link too. since by default you don't have this facility, you should make your custom behavior to achiever this. Thanks.

answered Mar 24 '16 at 05:43

Ujjwal Khatri

716
1
6
19

But How Can we Put it in Grid View ? We Are Creating Only Check Mark Right? Thanks – kishor Mar 24 '16 at 07:51

score 0 · Answer 5 · answered Feb 06 '19 at 17:47

Swift 4

In ViewController

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

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCollectionViewCellID", for: indexPath as IndexPath) as! YourCollectionViewCell
    cell.someImageView.image = imgArr[indexPath.item]
    return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    print("You selected cell #\(indexPath.item)!")
    let cell = collectionView.cellForItem(at: indexPath) as? YourCollectionViewCell
    cell?.isSelected = true
    cell?.toggleSelected()    
}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {

    let cell = collectionView.cellForItem(at: indexPath) as? YourCollectionViewCell
    cell?.isSelected = false
    cell?.toggleSelected()
}

In YourCollectionViewCell

class YourCollectionViewCell: UICollectionViewCell {


    @IBOutlet weak var someImageView: UIImageView!
    @IBOutlet weak var checkImageView: UIImageView!

    //Function  for select and deselect checkmark.
    public func toggleSelected() {

        if (isSelected == false) {

            //Hide check mark image.
            self.checkImageView.image = UIImage(named: "unCheckImage")
            isSelected = true
        }else{

            //Show check mark image.
            self.checkImageView.image = UIImage(named: "CheckImage")
            isSelected = false
        }
    }    
}

Hope enjoy!!

score 0 · Answer 6 · answered Apr 04 '20 at 18:17

var selectedCellIndex:Int?

take variable if you want to show selected Item after reloadData() : which is previously selected CellItem. {inspired by above answer }

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

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ColorCollectionCell", for: indexPath) as! ColorCollectionCell

        cell.isSelected = false

        if selectedCellIndex == indexPath.item {
            cell.checkMarkImgView.image = UIImage(named: "icn_checkMark")
        }else {
            cell.toggleSelected()
        }

        return cell
    }


    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

        let cell = collectionView.cellForItem(at: indexPath) as! ColorCollectionCell
        cell.isSelected = true
        selectedCellIndex = indexPath.item
        cell.toggleSelected()
}

In CollectionViewCell u can use this method

class ColorCollectionCell: UICollectionViewCell {
    @IBOutlet weak var cellimgView: UIImageView!
    @IBOutlet weak var checkMarkImgView: UIImageView!

     func toggleSelected() {

        if (isSelected) {
            self.checkMarkImgView.image = UIImage(named: "icn_checkMark")
        }else{
            self.checkMarkImgView.image = UIImage(named: "")
// here you can use uncheck img here i am not using any image for not selected.
        }
    }   
}

How to show check tick mark in Collection view (images)

6 Answers6