UICollectionView Without Storyboard — Swift 5

Photo by Thought Catalog on Unsplash

I have to admit, writing constraints on code on my first try was extremely tedious. But once I got to understand how they work, my journey without storyboards became smoother.

We’ll be creating a simple Collection View and a cell in Nib for today’s tutorial.

Let’s begin by creating a new single view app project on Xcode.

Begin by creating a View, once you open it, you’ll notice a ViewController element. Delete it and Drag a UICollectionViewCell on the space. Drag a UIView inside it and place any more elements you’ll need. I’ll be using just an Image View for this tutorial.

A UICollectionViewCell with an ImageView inside

Create a class from UICollectionViewCell, and connect the elements to the NIB file. From here you can add edits like corner radius, shadows and more on the cells.

class CollectionViewCell: UICollectionViewCell {
@IBOutlet weak var cardView: UIView!
@IBOutlet weak var imageView: UIView!
override func awakeFromNib() {
super.awakeFromNib()
}
}

Let’s move the main part. Open ViewController.Swift, and declare an optional variable of a collection view type.

var collectionView: UICollectionView?

Next, inside ViewDidLoad, we’ll describe our collection view’s size, delegate, data source and register a cell that’s created on a NIB file:

collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height), collectionViewLayout: UICollectionViewFlowLayout())
collectionView?.delegate = self
collectionView?.dataSource = self
collectionView?.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
//Add To Parent View
view.addSubview(collectionView!)

It’s on the parent view for sure, but let’s keep in mind that it does not have constraints yet. Here’s how we’ll add them:

collectionView?.translatesAutoresizingMaskIntoConstraints = false
collectionView?.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
collectionView?.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0).isActive = true
collectionView?.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0).isActive = true
collectionView?.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true

Finally, we’ll then return the cell view, the number of cells, and define the size of the cells.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.bounds.width, height: 400)
}

That’s it! not tough, right? Run the app and see what you get.

Here’s a link to the sample just in-case: https://github.com/danielkioko/CollectionViewApp

Thanks for reading & Happy Coding! 🌟