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, 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:
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.
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.
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:
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:
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:
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:
Let’s add some cool colors. I picked up these 5 at coolors.co
Let’s get the RGBs and add them to the code:
Let’s array them and use them to color the cardView, like this, in cellForRow:
Run again. You should see this:
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:
Now tapping on a cell it seems nothing happen, but if you 3D debug your screen, you should see this:
I tapped on last three cells and, as you can see, there’s a card on them.
Now… let’s animate 😱
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:
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:
Now, let’s add a private function in ViewController.swift like this:
I modified again the didSelectRow, so here’s the updated version:
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().
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().
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 😊