Creating a fluid and colorful zoom transition on table view cells

Animations are amazing. iOS users love to use great apps with immersive and fluid animation. This is my first post as iOS developer on this platform and I want to explain you what I realized for a project I’m currently working on.

Imagine a list of objects or, better, a UITableView, a colorful UITableView, like this:

Simple and beautiful, isn’t it?

Simple, clear, and, most important for this tutorial, with mono-chromatic cells. Wouldn’t be great if by tapping on one of these cells we could zoom it and go to another view controller colored with tapped cell color? 😻 I really think so.

So, let’s open a new Xcode project and start coding to achieve this 💪🏻

Let’s start by initializing a UITableView with alternated colored cells, I’m gonna choose red and blue. Open ViewController.swift in your brand new project and start typing this:

setupTableView in ViewController.swift

As you can see I put the code in a private func of ViewController.swift and since I set delegate and dataSource, I wrote an extension to contains methods I need.

Delegate methods of UITableView in ViewController.swift

I called setupTableView() inside viewDidLoad() and I clicked Run. This is what I see, and you should see it too. If not, check the code again.

Mmm… 😕

Ok. This is a very simple implementation of a UITableView. But I don’t like those colors, those separators and those cells so big. Let’s build something more beautiful 😉

I’d start removing that separators. Just add this line of code in setupTableView():

tableView.separatorStyle = .none

Then, I think we should add a separate class for our cell. Everything is going to be more complex. Let’s do it:

Go to Project Navigator, New File, Cocoa Touch Class. Type “ColorfulTableViewCell” and make it a subclass of UITableViewCell. Create the file. Now you should have this thing:

ColorfulTableViewCell.swift

We want our cells looking as I showed at the beginning of this story. We need a card-view, let’s make it:

I declared a var inside ColorfulTableViewCell class, like this:

var cardView: UIView!

Then I added a private method to initialize graphic and now I have this:

ColorfulTableViewCell.swift

Take a look at the first two lines of setupGraphic(). I need a clear background because I want to use a nice card-view, and I need also a .none selectionStyle because I don’t need any selection style: I’ll build THE SELECTION STYLE 🤪

Make sure your ColorfulTableViewCell class is like this and then open again ViewController.swift to make some little changes. In setupTableView() you have to register another class for cells. Not anymore UITableViewCell.classForCoder(), but ColorfulTableViewCell.classForCoder().

Edit numberOfRows and cellForRow like this:

Delegate methods of UITableView in ViewController.swift

We now want to use our custom cell class and we don’t need more than 5 cells (I’m gonna use only 5 cells because I have only 5 cool colors to use, but this tutorial works for infinite cells!).

Run! You should see this:

Cards, cards… cards! 🤩

Let’s add some cool colors. I picked up these 5 at coolors.co

coolors.co is amazing!

Let’s get the RGBs and add them to the code:

UIColor extension: the simplest way to add your custom colors

Let’s array them and use them to color the cardView, like this, in cellForRow:

cellForRow in ViewController.swift

Run again. You should see this:

Better?

Now, we have our colorful, “cardy” table view 💕. Let’s make things more interesting. We want a ZOOM effect and a transition to a view controller when tapping on a cell. So, what do you think about when I say “tapping on a cell”?

Let’s write something in didSelectRow.

In this case, we want to zoom a card to have a nice transition. How to get the single card? We can simple re-create it over the table view and then work with it.

This is how I simply recreated the card view of tapped cell:

didSelectRow in ViewController.swift

Now tapping on a cell it seems nothing happen, but if you 3D debug your screen, you should see this:

3D debugger is always cool 😎

I tapped on last three cells and, as you can see, there’s a card on them.

Now… let’s animate 😱

didSelectRow in ViewController.swift

Run. You should be amazed by what you’ve just created 🤩.

Before going on, let’s save something. We need a reference for cardViewFrame and copyOfCardView. When we will go back from the second view controller, we will have to resize and then remove copyOfCardView.

I made a little struct for the occasion and I used in this way:

ZoomTransitionManager
didSelectRow in ViewController.swift

Let’s create another VC and get into it. Project navigator, New File, Cocoa Touch Class and type “SecondViewController”, a subclass of UIViewController.

Let’s setup it like this:

SecondViewController.swift

Now, let’s add a private function in ViewController.swift like this:

goToNextViewController in ViewController.swift

I modified again the didSelectRow, so here’s the updated version:

didSelectRow in ViewController.swift

RUN! Isn’t it amazing? We built a simple but cool animation. It’s limited because we used a presented view controller, but for a lot of use cases it’s a very good way, I believe 😊.

Now, I think you want to go back to your colorful table view!

Let’s add an interface for SecondViewController.swift and a simple tap gesture on main view, just to have something to tap to go back that emulates a button or something else that you could have in your vc.

This is how I edited SecondViewController.swift. Look at the protocol at the top. In viewDidLoad() you can find the tap gesture, and below its implementation in goBackToTapGestureAction().

SecondViewController.swift

Let’s go back to ViewController.swift and let’s implement the protocol.

I assigned the delegate to ViewController.swift in goToNextViewController() and added the implementation for didGoBack().

goToNextViewController in ViewController.swift
didGoBack implementation in ViewController.swift

Done! We have a fully working and cool zoom transition in iOS. Aren’t you excited? 🤩

Let’s see it 😻

I really hope you enjoyed this tutorial, and I hope you’ll find the right use case to implement this. I know this is not the proper way to achieve such a complex transition like this with Swift: I literally bypassed UIViewControllerTransitioningDelegate, but for a simple use case I think it can be a good solution. Obviously you can add whatever you want to each card, you can play with objects in it in order to make them disappear or fade, or something else, to create way more cool animations.

Follow me @ edoardovicoli on Twitter 😊