Delete Items from Collection View Controller iOS Tutorial

For product name, use IOSDeleteItemsCollectionViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Select the Collection View Cell and go to the Attribute inspector. In the View section change the Background color to Light Gray Color.

Select The Collection View and go the Size inspector. In the Collection View section change the Cell Size to a width and height of 100 points.

Drag a Label from the Object Library and place it on the Center of the Collection View Cell.

Drag another Label to the right-bottom of the cell. This label will be needed for the state of the selection during edit mode, when selected a checkmark will be displayed. Select the label and go to the Attribute inspector. In the Label section delete the label text so the label will contain an empty string.

Select the Collection View Cell and go to the Atrribute inspector. In the Collection Reusable View section set the Identifier to "Cell".

Next, drag a Bar Button Item to the right side of the Navigation Bar. Select the Bar Button Item and go to the Attributes inspector. In the Bar Button Item section change the System Item to Trash. Also in the Bar Item section deselect the Enabled checkbox. The trash button will only be displayed when an item is selected in edit mode.

The storyboard will look like this.

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. Add a new file to the project, select iOS -> Source -> Cocoa Touch Class. Name it CollectionViewController and make it a subclass of UICollectionViewController.

The CollectionViewController class needs to be linked to The Collection View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to CollectionViewController

Go back to Main.storyboard and select the Collection View Cell. Go to the Identity inspector and in the Custom Class section change the class to CollectionViewCell .

Ctrl and drag from the Checkmark Label to the CollectionViewCell class  and create the following Outlet.

Make sure the CollectionViewController.swift file is visible. Ctrl and drag from the trash bar button item to the CollectionViewController class  and create the following Outlet.

Ctrl and drag from the trash bar button item to the CollectionViewController class  and create the following Action.

var modelData = ["One","Two","Three","Four","Five"]

Since the Reuse Identifier is defined in the Storyboard, the following line can be removed in the CollectionViewController class

// Register cell classes
self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSections(in collectionView: UICollectionView) -> Int {
    // 1
    return 1
}


override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // 2
    return modelData.count
}

override func collectionView(_ collectionView: UICollectionView, cell override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // 3  
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! CollectionViewCell
    cell.titleLabel.text = modelData[indexPath.row]

    return cell
}

override func viewDidLoad() {
    super.viewDidLoad()

    navigationItem.leftBarButtonItem = editButtonItem
}

The Edit Bar Button Item is added to the Navigation Bar. This can be used to toggle to Edit mode.

Build and Runthe project.

// 1
var isInEditingMode: Bool = false {
    didSet {
        checkmarkLabel.isHidden = !isInEditingMode
    }
}

// 2
override var isSelected: Bool {
    didSet {
        if isInEditingMode {
            checkmarkLabel.text = isSelected ? "✓" : ""
        }
    }
}

override func setEditing(_ editing: Bool, animated: Bool) {
    super.setEditing(editing, animated: animated)

    collectionView.allowsMultipleSelection = editing
    let indexPaths = collectionView.indexPathsForVisibleItems
    for indexPath in indexPaths {
        let cell = collectionView.cellForItem(at: indexPath) as! CollectionViewCell
        cell.isInEditingMode = editing
    }
}

This method will check if a cell is in editing mode. Next add the following two methods.

// 1
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    if !isEditing {
        deleteButton.isEnabled = false
    } else {
        deleteButton.isEnabled = true
    }
}

// 2
override func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    if let selectedItems = collectionView.indexPathsForSelectedItems, selectedItems.count == 0 {
        deleteButton.isEnabled = false
    }
}

cell.isInEditingMode = isEditing

@IBAction func deleteItem(_ sender: Any) {
    if let selectedCells = collectionView.indexPathsForSelectedItems {
      // 1
      let items = selectedCells.map { $0.item }.sorted().reversed()
      // 2
      for item in items {
          modelData.remove(at: item)
      }
      // 3
      collectionView.deleteItems(at: selectedCells)
      deleteButton.isEnabled = false
    }
}