How do I create a UICollectionView with standard layout programmatically in Swift 4?
Tags: swift, ios, discuss
Published: 2019-02-19 17:31:37

---
title: How do I create a UICollectionView with standard layout programmatically in Swift 4?
published: true
description: 
tags: #swift, #ios, #explainlikeimfive, #discuss
---

Hello all!

I'm pretty new to iOS development and have been mostly working with Interface Builder. However, I've recently started learning how to create UI elements programmatically but I'm have found very few tutorials on doing things without IB.

I was able to piece together the code at the bottom of this post using YouTube tutorials but, while it compiles and runs, I have a few questions about how things work and why:

1) I noticed that the collection view is declared using this format:

```swift

let myCollectionView: UICollectionView = {}()

```
After reading the [Properties](https://docs.swift.org/swift-book/LanguageGuide/Properties.html) page of Swift.org the format looks similar to a computed property. Is that right? Why are there parentheses after the brackets? Are we "calling" the collection view or instantiating it?

2) Is `UICollectionViewFlowLayout` used when one does not need a custom layout for the collection view? Meaning, is this the "default" layout? And do you always "have" to define a layout object for all collection views?

3) What does `frame: .zero` mean in the line `let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)`?

4) How do I add elements, such as a title, within a collection view cell?

Any advice or guidance is greatly appreciated! 😀

```swift

import UIKit

class FirstVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(collectionView)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(UICollectionViewCell.self, 
        forCellWithReuseIdentifier: "cell")
        setupCollectionConstraints()
    }

    let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .lightGray
        return cv
    }()
    
    func setupCollectionConstraints() {
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        collectionView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        collectionView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        collectionView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell  = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .white
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 250, height: 100)
    }

}



```