Quickly Implement UITableView and UICollectionView Programmatically

And layout them using Swift’s NSLayoutConstraint

Zafar Ivaev
Jan 28, 2020 · 4 min read

Intro

The source code of the finished project is available on GitHub.

Project Setup

Now, delete the SceneDelegate.swift file and remove two UISceneSession methods inside the AppDelegate.swift :

Next, Delete the Main.storyboard file.

Now we need to open Info.plist and remove the following keys: Application Scene Manifest and Main storyboard file base name . Our final file now looks like this:

And now we are ready to start building our UI programmatically! The app will contain a UITabBarController with two tabs: Table and Collection.

TabBarController

Ignore the compiler warnings for now.

AppDelegate

Currently, the compiler is complaining that there are no such classes as TableViewController and CollectionViewController. Therefore, we are going to create them now.

TableViewController

Now implement the actual UITableView:

We write tableFooterView = UIView() to hide separators under the tableView. The translatesAutoresizingMaskIntoConstraints = false command makes sure that our future programmatically created constraints do not conflict with autogenerated ones. In fact, using this command, we tell our tableView to NOT automatically generate constraints based on its frame.

We implement the constraints as follows:

overrideUserInterfaceStyle = .light tells the system to use the light mode on iOS 13.

Inside NSLayoutConstraint.activate we list all tableView’s constraints. The first, widthAnchor constraint means that we want to have the width of tableView equal to the width of the main view . The second constraint performs a similar task but with a height property.

Don’t forget to call our newly setupUI() method inside the viewDidLoad():

Now we will create our custom UITableViewCell that we will reuse in the tableView

TableViewCell

The centerXAnchor constraint centers the titleLabel horizontally inside the contentView . The centerYAnchor constraint performs a vertical centering.

Let’s use our cell inside the tableView!

TableViewController

Now the compiler will complain that there are no UITableViewDataSource methods implemented in our view controller:

The implementation is simple: we tell the tableView to have the number of rows equal to the count of the titles array property (in our case 8), have only one section, and display a title to the according UITableViewCell.

With UITableView being successfully implemented, we are ready to create the UICollectionView in a similar way!

CollectionViewController

CollectionViewCell

Let’s take a closer look at how we setup constraints:

Here, we layout UI as follows:

  1. Add the roundBackgroundView to the contentView.
  2. Add the titleLabel to the roundBackgroundView
  3. Position the roundBackgroundView with 5 points offset from each side: top, bottom, left, and right.
  4. Horizontally and vertically center the titleLabel inside the roundBackgroundView

Finally, if we build and run our app we will see our tableView and collectionView displayed exactly as we wanted:

We are done!

If you are curious about how to implement a UITableView and UICollectionView in a faster way using RxSwift and RxDataSources, feel free to check out my another example-based piece:

Thank you very much for reading!

Clean Software

Programming tutorials and more.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store