In this brief tutorial, we will learn how to implement very common iOS UI components:
The source code of the finished project is available on GitHub.
First, let’s create a brand new Xcode project, giving it any name.
Now, delete the
SceneDelegate.swift file and remove two
UISceneSession methods inside the
Next, Delete the
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.
We should create our
UITabBarController and configure its tabs the following way:
Ignore the compiler warnings for now.
TabBarController as the
rootViewController of the
Currently, the compiler is complaining that there are no such classes as
CollectionViewController. Therefore, we are going to create them now.
First, let’s create an array of
titles counting from “One” to “Eight”, which we will display in our
Now implement the actual
tableFooterView = UIView() to hide separators under 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.
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
Don’t forget to call our newly
setupUI() method inside the
Now we will create our custom
UITableViewCell that we will reuse in the
Here we want to have a
UILabel centered inside the
contentView of the cell:
centerXAnchor constraint centers the titleLabel horizontally inside the
contentView . The
centerYAnchor constraint performs a vertical centering.
Let’s use our cell inside the
First, register the cell and set
delegate = self and
datasource = self on the
tableView . Here is the updated lazy
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
UITableView being successfully implemented, we are ready to create the
UICollectionView in a similar way!
The implementation is very similar. However, now we need to provide a UICollectionViewLayout for our
collectionView . Inside the
collectionViewLayout() method we tell the
collectionView to have square cells of width and height equal to 20 percent of the width of the screen. We use
sectionInset to place a 10 point padding on left and the right side of the
The cell is also implemented very similarly:
Let’s take a closer look at how we setup constraints:
Here, we layout UI as follows:
- Add the
- Add the
- Position the
roundBackgroundViewwith 5 points offset from each side: top, bottom, left, and right.
- Horizontally and vertically center the
Finally, if we build and run our app we will see our
collectionView displayed exactly as we wanted:
We are done!
Implement UITableView and UICollectionView With RxDataSources
And why you will never directly use UITableViewDataSource again
Thank you very much for reading!