DEV Community: Aaron Cleveland

Building a UITableView Programmatically

Aaron Cleveland — Thu, 26 Nov 2020 00:29:11 +0000

As a user, we start up our application on our device and we never know what is exactly going on in our application. All we know is that this application is "Gorgeous, Beautiful, and even Spectacular". But as a developer, we know what is going on in the code without looking at the code. We can tell this is a UITableView or even possibly a UICollectionView.

Today we are going to look just at UITableView. Specifically, we are going to look at building a 'UITableView' programmatically. Let's look at two ways we can build this out. One is by creating our UITableView via a function that gives us the ability to call it. Two is with creating the UITableView in a computed property. Both ways would give you the same result.

Initialize UITableView in ViewController via computer property.

We are going to set up a single app with a normal view controller. If you don’t know how to set up your project programmatically, please take a look at my past article or you can check out my youtube video. Once we have our application up and configured correctly, let’s jump over to our ViewController file.

The first option here is setting this up via a computed property.

class ViewController: UIViewController {

    let tableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        return tableView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        subviews()
        constraints()
    }
}

extension ViewController {
    func subviews() {
        view.addSubview(tableView)
    }

    func constraints() {
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leftAnchor.constraint(equalTo: view.leftAnchor),
            tableView.rightAnchor.constraint(equalTo: view.rightAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 100
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        return cell
    }


}

Initialize UITableView in ViewController via a function.

The second option here is setting up UITableView with a function.

import UIKit

class ViewController: UIViewController {

    let tableView = UITableView()

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        subviews()
        constraints()
        setupTableView()
    }

    func setupTableView() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }
}

extension ViewController {
    func subviews() {
        view.addSubview(tableView)
    }

    func constraints() {
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leftAnchor.constraint(equalTo: view.leftAnchor),
            tableView.rightAnchor.constraint(equalTo: view.rightAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 100
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        return cell
    }


}

Side note to remember that if you don’t introduce the “translatesAutoresizingMaskIntoConstraints” you will not see your UITableView populate on the screen! The definition for this wonderful long word — from Apple documentation is listed below.

If this property’s value is true, the system creates a set of constraints that duplicate the behavior specified by the view’s autoresizing mask. This also lets you modify the view’s size and location using the view’s frame, bounds, or center properties, allowing you to create a static, frame-based layout within Auto Layout.
Note that the autoresizing mask constraints fully specify the view’s size and position; therefore, you cannot add additional constraints to modify this size or position without introducing conflicts. If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set this property to false, and then provide a non ambiguous, nonconflicting set of constraints for the view.
By default, the property is set to true for any view you programmatically create. If you add views in Interface Builder, the system automatically sets this property to false.

In Conclusion!

Now you can set up the UITableView just like normal if we were to do this in a storyboard file. When working with programmatic code, it’s about how you can customize it to your liking with animations, style, and being user friendly. Hope you guys enjoyed this little short article!

Understanding Styles in programmatic UI.

Aaron Cleveland — Wed, 25 Nov 2020 09:14:07 +0000

Inspiration

When you look for inspiration whether it be from the great mind of yourself, or from sites like dribble. Like the example above, we can see multiple buttons and labels that could be reusable.

Creating programmatic stored properties with the same methods is tedious and unnecessary. If it doesn’t follow the DRY concept then refactor it.

D: Don’t
R: Repeat
Y: Yourself

When writing code, and we notice that these two stored properties share some common interest.

let articleTitle: UILabel = {
 let articleTitle = UILabel()
 articleTitle.translateAutoresizeMaskIntoConstraints = false
 articleTitle.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
 articleTitle.textColor = .white
 articleTitle.numberOfLines = 0
 return articleTitle
}()

translatesAutoresizingMaskIntoConstraints = false

font = UIFont.systemFont()

textColor = .white

This is six lines of unwanted code, let's implement a style file that will assist with fixing this issue!

class TestUIStyle: UILabel {
 enum Style {
  /*
   I usually determine my cases based on the needs of the project. Let's try to get some of the details in order.
  */
  // HomeView
  case title, header
 }
}

I created a new Swift file and named it TestUIStyle. The style that I want to mimic is for labels, I am gonna subclass it as a UILabel and start with an enum called "Style". As you can see I have determined from our dribble image that we have a ton of labels that are gonna follow suit.

let style: Style
init(style: Style, text: String) {
 self.style = style
 super.init(frame: .zero)
 self.text = text
 setupStyling()
}

required init?(coder: NSCoder) {
 fatalError("init(coder:) has not been implemented")
}

private func setupStyling() {

}

Now we are gonna create a constant and set it to our enum and initialize it. This allows us to choose which style wants and the given text that you would like when creating it in our ViewControllers. The "text: String" is optional and it's not a requirement if you prefer not to.

private func setupStyling() {
 translatesAutoresizingMaskIntoConstraints = false
 numberOfLines = 0

 switch style {
  case .header:
   font = .systemFont(ofSize: 20, weight: .bold)
   textColor = .label
  case .title:
   font = .systemFont(ofSize: 14, weight: .light)
   textColor = .white
  default:
   font = .systemFont(ofSize: 12, weight: .regular)
   textcolor = .yellow
 }
}

As you can see with each style that is being switched they have their own set attributes but they all conform to two things that we need from them all.

translatesAutoResizingMaskIntoConstraints = false

numberOfLines = 0

Let's see how this style file can go from what we had before to now!

// New code from the style
let articleTitle = TestUIStyle(style: .title, text: "Medium"
let articleHeader = TestUIStyle(style: .header, text: "Name of Source"

// Old code from the style
let articleTitle: UILabel = {
 let articleTitle = UILabel()
 articleTitle.translatesAutoresizingMaskIntoConstraints = false
 articleTitle.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
 articleTitle.textColor = .white
 articleTitle.numberOfLines = 0
 return articleTitle
}

Cleaning up unwanted code could be a huge time saver when working with programmatic UI. We are able to bring everything down to two lines.

Here is the full sample code for viewing! Hope you’re just like me and prefer your things DRY!

import Foundation
import UIKit

class TestUIStyle: UILabel {
    enum Style {
        // HomeView
        case header, description, title, dates, author
        // ArticleDetailView
        case detailTitle, detailDate, detailAuthor, detailPaper, detailContent
        // CollectionView
        case collectionTitle, collectionAuthor
    }

    let style: Style
    init(style: Style, text: String) {
        self.style = style
        super.init(frame: .zero)
        self.text = text
        setupStyling()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupStyling() {
        translatesAutoresizingMaskIntoConstraints = false
        numberOfLines = 0

        switch style {
        case .header:
            font = .systemFont(ofSize: 20, weight: .bold)
            textColor = .label
        case .title:
            font = .systemFont(ofSize: 14, weight: .light)
            textColor = .white
        default:
            font = .systemFont(ofSize: 12, weight: .regular)
            textColor = .yellow
        }
    }
}