How to show a message when collection view is empty

Question

I`m trying to show a message only when my collection view is empty. Well, I try set return 1 when my if is true but when I have this, it only show one item in my collection view

Answer 1

I make use of the backgroundView in an extension as such:

extension UICollectionView {

    func setEmptyMessage(_ message: String) {
        let messageLabel = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height))
        messageLabel.text = message
        messageLabel.textColor = .black
        messageLabel.numberOfLines = 0;
        messageLabel.textAlignment = .center;
        messageLabel.font = UIFont(name: "TrebuchetMS", size: 15)
        messageLabel.sizeToFit()

        self.backgroundView = messageLabel;
    }

    func restore() {
        self.backgroundView = nil
    }
}

and I use it as such:

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

    if (self.movies.count == 0) {
        self.collectionView.setEmptyMessage("Nothing to show :(")
    } else {
        self.collectionView.restore()
    }

    return self.movies.count
}

Answer 2

Maybe little bit late but here is little more constraint based solution. Still may help some one.

First create some empty state message (You can also create own, more complex view with image or something).

    lazy var emptyStateMessage: UILabel = {
        let messageLabel = UILabel()
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.textColor = .darkGray
        messageLabel.numberOfLines = 0;
        messageLabel.textAlignment = .center;
        messageLabel.font = UIFont.systemFont(ofSize: 15)
        messageLabel.sizeToFit()
        return messageLabel
    }()

Then add two methods and call them whenever you like.

    func showEmptyState() {
        collectionView.addSubview(emptyStateMessage)
        emptyStateMessage.centerXAnchor.constraint(equalTo: collectionView.centerXAnchor).activate()
        emptyStateMessage.centerYAnchor.constraint(equalTo: collectionView.centerYAnchor).activate()
    }

    func hideEmptyState() {
        emptyStateMessage.removeFromSuperview()
    }

Answer 3

Why don't you use:

open var backgroundView: UIView?

// will be automatically resized to track the size of the collection view and placed behind all cells and supplementary views.`

You can show it whenever collection is empty. Example:

var collectionView: UICollectionView!
var collectionData: [Any] {
    didSet {
        collectionView.backgroundView?.alpha = collectionData.count > 0 ? 1.0 : 0.0
    }
}

Answer 4

Use backgroundView of your Collection View to display the no results message.

Answer 5

I would say have two sections in your collectionView, where one is for the actual data to be displayed, then the other one when you don't have any data.

Assuming we are populating data in section 0.

in numberOfRowsInSection you'd have something like:

     if section == 0 { return movies.count}
     else if section == 1 {
          if movies.count < 1 { return 1 }
          else { return 0  }
     }
        return 0

in your cellForItemAt you'd do something like that:

 if indexPath.section == 0 {
      // let cell = ...
      // show your data into your cell 
        return cell  
     }else {
          // here you handle the case where there is no data, but the big thing is we are not dequeuing  
          let rect = CGRect(x: 0, y: 0, width: self.favCollectionView.frame.width, height: self.favCollectionView.frame.height)
        let noDataLabel: UILabel = UILabel(frame: rect)
        noDataLabel.text = "No favorite movies yet."
        noDataLabel.textAlignment = .center
        noDataLabel.textColor = UIColor.gray
        noDataLabel.sizeToFit()

        let cell = UICollectionViewCell()
        cell.contentView.addSubview(noDataLabel)

       return cell
      }