Beginning Collection Views - Part 8: Section 1: | Ray Wenderlich

Begin the process of creating an editing mode for your Collection View to allow users to remove multiple cells at once.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/4448-beginning-collection-views/lessons/8

Hi, i’ve tried the Part 8: Section 1 Deleting Cells. I got a problem regarding the Unchecked image of the cell. when i’m in editing mode, some of the Unchecked image does not appear when i scrolled down/up. Maybe due to the indexpath for only the visible item of that instant of pressing the edit bar button. is there any way to get indexpath of all available cell instead of visible cell only.

p.s : sorry my english

Clicking the Edit button sets the uncheck image visibility for the items which are only currently visible because those are the only ones which need to be immediately made visible. The rest are automatically made visible as you scroll up and the collection view asks for a new image via cellForItemAt:. Look at the code there and you should see this line:

cell.isEditing = isEditing

And if you check the CollectionViewCell class for the property, it should have the following code:

var isEditing: Bool = false {
	didSet {
    		selectionImage.isHidden = !isEditing
    }
}

It’s that code which automatically manages displaying the selection image the rest of the time based on whether you are in editing mode or not.

So, if you don’t see the selection indicator image when you scroll down in editing mode, the issue would probably be somewhere else.

If you can’t find the issue, please post a link to a copy of your project here (after uploading it somewhere online of course) and I’ll see if I can find why it’s not working for you.

Hey bud… im running into a little issue.

How do you have the IBOutlet defined in your code? You generally are not able connect an outlet if the definition in code is not the same as the type of object on the storyboard. For example, if you have the outlet defined as UIImage in your code but the object in your storyboard is a UIImageView, you will not be able to connect.

So check how the outlet is defined and if you can’t figure out, post a screenshot of that bit of code.

Got it…ty for your help

@fahim , I think what @yuan1337 was referring to is the problem when scrolling up and down the collectionView quickly (and the collectionView has more than 1 page of cells, so some of the cells are being recycled during scrolling). Then you will see sometimes, some cells are not being rendered into its editing mode fast enough. Any more leads to this UI bug will be appreciated though.

I realize that @yuan1337 was asking about more than one page of items since otherwise the visible cells vs. non-visible cells bit does not come into play :slight_smile: However, my answer to him still stands in that generally the code should work as provided. I tested with more than one page of items and in scrolling the items I did not see the issue mentioned.

Of course, if you have a project which displays this issue consistently, you can certainly upload the project somewhere and provide a link and I can take a look to see what might be going on …

I admit this bug is pretty difficult to duplicate because on the demo app, the cells are not rendering anything too expensive. Anyhow, here is a link to my demo app’s repo, same as the one shown on the video, but with a larger array of data. Also I have a screen shot from my actual device and one from my simulator.

hi @catie and @jessycatterwaul , thanks for the tutorial. I am a beginner in iOS development. I don’t fully grasp the function of this lines of code

var isEditing: Bool = false {
didSet {
selectionImage.isHidden = !isEditing
}
}

is it different with the codes below? I accidentally wrote override var isSelected: Bool = false, but I got an error “variable with getter/setter cannot have initial value”

override var isSelected: Bool = false {
didSet {
if isEditing {
cellImage.image = isSelected ? UIImage(named: “Checked”) : UIImage(named: “Unchecked”)
}
}
}

those 2 code seem similar but apparently different because the the second code can’t have nitial value. I think i have problem to understand the basic syntax of this code. so if I want to understand this code, what topic that i should learn first ? what are they called ? it seems like boolean type that automatically changes.

and in the viewController.swift.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) → UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: “CollectionViewCell”, for: indexPath) as! CollectionViewCell
cell.titleLabel.text = collectionData[indexPath.row]
cell.isEditing = isEditing
return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if !isEditing {
performSegue(withIdentifier: “DetailSegue”, sender: indexPath)
}
}

I don’t understand where isEditing comes from, since viewController class doesn’t have isEditing property

Thanks in advance :slight_smile:

To answer your first question, if you look at the declarations for isEditing and isSelected, while they might look similar, the second one has the override keyword at the beginning. That means that this is a property in the superclass that you are modifying in the CollectionViewCell subclass. So, isSelected actually has a declaration elsewhere which adds other stuff to it that makes it different from isEditing which is something you declared only in CollectionViewCell. Does that make sense?

For the second question, isEditing is a property of UIViewController which is the superclass of ViewController. When you extend one class to create a subclass, like in the case of ViewController (or even CollectionViewCell above) you get (or inherit) all the properties of the superclass.

And if you are ever unsure as to where a property or method is defined when you are looking at code in Xcode, just hover your mouse cursor over the property or method and Command-Click. It should show a menu of choices which allows you to see the original declaration of the element. Or, you can right-click on the item and then select “Jump to Definition”. Or, you can have the Quick Help inspector open on the right, and simply move the cursor over the item and it should show you any available help about the item as well as where it is declared. There are multiple ways to do this :slight_smile:

2 Likes

Thanks Fahim, I got it

@fahim any updates on that bug where visible cells not being put into selected or unselected mode? I posted link and snapshots regarding to this bug a while ago in case you didn’t catch it.

Sorry, been a bit busy at this end. But I did try out your code but still can’t reproduce the issue that you’ve shown in the screenshots. I originally thought that the issue was that the checkmark state is not properly shown. But based on your screenshots, it looks as if the checkmark image is not shown at all in some cases.

That’s a bit puzzling since the image display code executes each time a new cell is instantiated. So if you are in editing mode and scroll, unless the visible cells did not get set up properly for some reason when you switched to editing mode, everything should show the selection indicator.

But since I can’t replicate the issue here, I’m unable to figure out what might be going on. Have you checked running on a device to see if this is perhaps a slow simulator/machine issue at your end?