Animate That Table View!

Table views are one of the fundamental views of iOS. They make it easier to present a large volume of information in an easy-to-read (and easy-to-scroll) manner.

Many of the apps we use today are comprised of TableViews. The Settings app on your iPhone is a TableView. The “Stories” page in Snapchat is a TableView of all your friends and their stories. TableViews are basically everywhere where there’s data.

Table View Fundamentals

Don’t remember how TableViews work? Let’s do a super quick review:

Table views are comprised of cells. Each cell represents a single piece of data in a larger data set. You can define how to draw a single cell, and the table view will take care of the work of drawing the many cells in your data set and scrolling them.

TableViews go hand in hand with data! They are backed by a data source. The data source provides the pieces of data that will be drawn into each individual cell of the table view. Cool!

If you use the standard UITableViewController created by Apple, the TableView setup will be mostly done for you. For this project, we won’t do that, because there’s no challenge! We’ll do the long way. The long way allows us to practice TableViews and even a little bit of Protocols too.

Setup your TableView

I won’t go into a ton of detail here, because we’ve all been practicing this.

1. Drag a TableView object from Object Library onto your View Controller.
2. Add a Cell to Your Table View.
3. Give the cell a reuse Identifier “basicCell”
4. Add an IBOutlet from your TableView to ViewController.swift so your code “knows” what the TableView is.
5. In View Controller.swift, make sure your View Controller adopts and conforms to the necessary protocols for TableViews: UITableViewDelegate and UITableViewDataSource
6. Going back to Storyboard: Make sure your ViewController is set to the right Class.
7. Head over to Connections Inspector and control-drag the delegate & dataSource over to your View Controller.
8. Back in ViewController.swift, implement the necessary methods for TableViews.

TableView + Animation = Cool TableView!

TableViews are great. But, TableViews with animations are better! Let’s try adding an animation to our TableView. First, create constants for the cells and the TableView’s height.

Next, loop through the cells that are currently visible on the screen and move each of them to the bottom of the screen.

Next, let’s iterate through the cells that we moved to the bottom of the screen and use an animation to get them back into position.

Using springWithDamping, we can create a slightly bouncy effect.

How does this work?

springWithDamping: “Performs a view animation using a timing curve corresponding to the motion of a physical spring.” Thanks Apple. That tells us a lot.

Spring animations work by changing from a start state to an end state, with a slight overshoot and bounce at the end. For example, if you want to animate a view moving from X:0 to X:100, it might move to X:110 before bouncing back to X:80, then X:120 and finally X:100, as if the animation were attached to a spring.

Spring animations require two values: how “bouncey” the spring should be, and how fast it should start. The first value is specified with usingSpringWithDamping, — higher values here make the bouncing finish faster. The second value is specified with initialSpringVelocity, where higher values give the spring more initial momentum. That’s pretty much it.

Now we can make TableViews like this bouncey owl. Neat!