When to use a CollectionView and TableView

and when not to…

Kenji Daniel Akiba
4 min readJul 8, 2021

So a UITableView in essence are shows data statically in multiple rows which arranged in a single column, up and down. Then each row has a cell which it’s design pattern fits as a row. How to implement it you ask, well keep reading you will find out.

Now a UICollectionView, introduced in iOS6, which basically is an upgraded version of the UITableView. Depending on what the app requires or what you are developing is when you will determine which ‘User Interface’ will be. Think of your photo app on an iPhone how you have a collection of your photos and stuff; or your Instagram, each collection is a cell.

Photo by Sebastian Bednarek on Unsplash

For the UICollectionView these photos can go up or down — left to right. Now to go left and right within a description in a different page, you would implement what is called an auto image slider or scroller, which ever you prefer, and add whatever data you would want to have for example the photos and such.

These customizable design layout is more common and useful than you may think you see them a day to day basis every time when an smart phone is being used. Remember, before you make a decision consider if it is just a straight-up list of things with no designs or anything like that, use a TableView. Then if you want more customizability with each cells, like a frame for a portrait, use a CollectionView. At the time of this writing as of now — iOS 14, it is definitely recommended to use the UICollectionView approach.

An object that manages an ordered collection of data items and presents them using customizable layouts.

That’s from apple’s documentation, probably word it better than I did. Of course, in code this what how you would implement:

A.) Now I am assuming you’ve already had created a new project so we can the formalities. You’re going to have to go to your Main.storyboard and add a View Controller in your image compartment(the Image Library):

afterwards just drag it anywhere on the work place. Either way it is still going to be visible.

This right here are your collection view options.

This is your table view options.

You may chose to implement one or the other or both in a view controller. Afterwards you implanted one of them you should see collection view cell or prototype cell on your controller. Now we go into the controller’s file and we’ll add some custom code for us to talk to each other and add some data. Within your code it needs specific protocols and in your code should have these written after your line:

“UITableViewDataSource and UITableViewDelegate”

“UICollectionViewDataSource and UICollectionViewDelegate”

Within each of these under your class are mandatory protocol stubs:

“func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: int) -> Int {

//your code here*

}”

“func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

//your code here*

}”

Now the table view ‘s code is something similar like it(the single column row):

“func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

//your code here*

}”

“func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

//your code here*

}”

*This is where you will edit or add some custom code and however you would want your cells to be or look like.

Conclusion

I think utilizing UIkit for your very first time as a starting developer is the way to tackle basic swift knowledge or app development in general and much easier. As we progress into our journey we will encounter more complex interface toolkits like SwiftUI that lets us design apps in a declarative way.

--

--

Kenji Daniel Akiba

App developer, iOS; PC and avid comic enthusiast; always a student