Creating UI Elements Programmatically Using PureLayout

In an app like this, you’ll probably want a navigation bar so that a user can navigate from the list of contacts to a detail view for a certain contact and then go back to the list. A UINavigationController would easily solve this with its navigation bar.

A UINavigationController is simply a stack on which you push many views as you go further into the application. The upper most view (the one pushed or navigated into last) is probably the one that the user sees right now (except if you have another view presented on top of that). And as you push view controllers on top of the navigation controller, a back button will be automatically be created by the navigation controller (the upper left or right side depending on the device’s current language preference) and pressing that button will take you to the previous view controller.

Navigate to AppDelegate.swift and add this line of code below let viewController = ViewController()

And now change self.window?.rootViewController = viewController to self.window?.rootViewController = navigationController. What we did in the first line is create an instance of a UINavigationController and give it our viewController as the rootViewController, which is the view controller at the very bottom of the stack, meaning that there will never be a back button on that view’s navbar. Then we give our window the navigation controller as it’s rootViewController since it will now contain all of the view in the application, or that tab if that app has a tabbar.

Oops, something doesn’t look right. It seems like the navigation bar is overlaying our upperView and we have a couple of ways here to fix this:

I will personally go with the second choice, but please, go ahead and explore the first one. I also recommend to check out, and read thoroughly, Apple’s docs on the UINavigationController and UINavigationBar:

Now, go to viewDidLoad method and add this line self.navigationController?.navigationBar.isTranslucent = false below super.viewDidLoad() so it will look like this:

You can also add this line self.title = "John Doe" in viewDidLoad. This will add the word “Profile” to the navigation bar so the user knows where they currently stand. Go ahead and do this before running the application and the result should look like this:

Before proceeding to creating UI elements programmatically, we’ll need to slim down our ViewController.swift file to be able to only accommodate actual logic instead of just code for UI elements. We can do this by subclassing UIView and moving all of our UI elements there. The reason why we’re doing this is to follow the Model-View-Controller architectural pattern, or MVC for short. More on MVC Model-View-Controller (MVC) in iOS: A Modern Approach.

Click on Cocoa Touch Class and then click Next. Now write “ProfileView” as the name of the class and next to “Subclass of:” make sure to type in “UIView”. This is just to tell Xcode to automatically make our class inherit from UIView and it will add some boilerplate code (that we’ll probably remove anyway in the case of UIView). Now click Next, then Create, and remove the commented code:

Cut and paste all the lazy vars from the view controller to our new view.

Below the last lazy var, override init(frame:), by typing init and then choosing the first autocomplete result from Xcode.

In any overridden initializer, you should almost always call the super class’s initializer, so add this line of code at the top of the method: super.init(frame: frame).

Cut and paste the addSubviews() method underneath the initializers and remove the self.view before each addSubview call.

For the constraints, override updateConstraints() and add the call to its super at the end of that function (where it will always stay).

Now go back to the view controller and initialize an instance of ProfileView above the viewDidLoad method let profileView = ProfileView(frame: .zero), add it as a subview to the ViewController’s view and pin all its edges to the superview’s edges.

Moving on, we will now add a UITableView to present a contact’s information such as their phone number, address, etc.

If you haven’t before, head to the Apple docs to read up on UITableView, UITableViewDataSource and UITableViewDelegate

Navigate to ViewController.swift and add a lazy var for the tableView above the viewDidLoad():

If you try to build the app, Xcode will complain saying that this class is neither a delegate nor a data source for a UITableViewController and so we will add these two protocols to the class:

Once again, Xcode will complain about the class not conforming to the UITableViewDataSource protocol, which means that there are required methods in this protocol that are not defined in the class. To find out which of these methods you should implement, hold down Cmd + Control and click on the UITableViewDataSource protocol in the class’s definition, this will navigate to the protocol’s definition. There, any method that is not prefixed by the word optional must be implemented by the class conforming to that protocol.

Now head back to ViewController.swift, start typing numberOfRowsInSection, and when the autocomplete appears, choose the first hit.

Delete the word code and return 1 for now.

Underneath this function, start typing cellForRowAt and, again, choose the first method from autocomplete.

And, again, for now, return a UITableViewCell.

Now, to plug in our table view inside the ProfileView, we will define a new initializer for ProfileView that takes a table view as a parameter so it can add it as a subview and setup the proper constraints for it.

var tableView: UITableView! is defined so we’re not really sure that there would be one all the time.

Now replace the old implementation of init(frame:) with:

Xcode will now complain about the missing init(frame:) for ProfileView so head back to ViewController.swift and replace let profileView = ProfileView(frame: .zero) with

Now our ProfileView has reference to the table view and we can add it as a subview and set up the right constraints for it.

Back to ProfileView.swift, add addSubview(tableView) to the bottom of addSubviews() and set up these constraints in updateConstraints() above super.updateConstraints:

To implement a UITableViewCell, we will almost always need to subclass this class, so go ahead and right click on ContactCard folder in the Project Navigator, then New file…, then Cocoa Touch Class, then Next.

Here we start using UIEdgeInsets to set the spacings around each label. A UIEdgeInsets object can be created using the UIEdgeInsetsMake(top:, left:, bottom:, right:) method. For the titleLabel for example, we say that we want the top constraint to be four points long and the right and left to be eight. We don’t care about the bottom because we’re excluding it as we will pin it to the top of the description label. Take a minute to read and visualize the constraints in your head.

We also add a constant for the cell’s reuse identifier. This identifier is used to dequeue cells from the table view when they’re being rendered. This is an optimization that can (and should) be used to help the UITableView reuse cells that were presented before in order to show new content instead of redrawing a new cell from scratch. Brilliant!

Now let me show you how to reuse cells in just one line of code in the cellForRowAt method:

Here we tell the table view to dequeue a reusable cell using the identifier that we registered the cell under for the index path that is about to appear for the user. We then force cast the cell to ProfileInfoTableViewCell in order to be able to access its properties so we can, for example, set the title and description. This can be done through the following:

And now set the numberOfRowsInSection to return 3 and run your application.

First of all, in ProfileInfoTableViewCell, add this line to the descriptionLabel’s lazy initializer: label.numberOfLines = 0.

Go back to ViewController and add these two lines to the table view’s initializer:

In ViewDidLoad, we need to reload the table view for these changes to take effect:

Now go and add another cell by increasing the number of rows to four and adding another switch statement to the cellForRow: