Animate the Boring TableViews in Your iOS App

Gratify your users with an attractive and engaging TableView Animation

Table views undoubtedly are one of the most used components in any iOS app. It’s used to display a single column of vertically scrolling content, divided into rows.

Adding animations is a great way to engage the user, and at the same time, it makes your app look smooth and fluid.

We will be animating the table view cells with the help of UIView.animate method of the UIView class. Here’s a description of the animated method —

Animate changes to one or more views using the specified duration. During an animation, user interactions are temporarily disabled for the views being animated.

I was reluctant to try UIView animations before, I gave excuses to myself, that it was too hard, it wasn’t needed, it would take a lot of time to learn. Only when I read some brilliant blogs, books on UI / UX and realized the power of animations, and I convinced myself and just started trying out animations.

Alright, we will be adding four types of animations, here’s how the animation of the TableView cells will look —

TableView Animations

Prerequisites

You should have some knowledge of iOS app development, even If you’re not that familiar with the concepts, feel free to follow along, I’ve explained everything simply. All you need is a MacBook, Xcode, and some knowledge of Auto Layouts, UIView.animate method, and enums.

Introduction

Introduction to the View UI

A little introduction to the View that we’ll be creating in this tutorial -

The View will have these components —

• TableView.
• Horizontal StackView with 4 buttons with equal spacing.

With these 4 buttons we’ll be changing the TableViewHeader and the TableView cell animations.

Tutorial

Start with creating a Single page application in Xcode and choose Storyboards as the User Interface.

Design the UI

Open Main.storyboard and do the setup for the views

Add components to the ViewController scene in the Main.Storyboard

Here is the list of components that we have added —

• TableView - Having top, leading and trailing constraints set to zero and proportional height to 77% of the view.
• Horizontal StackView - Having top, leading and trailing constraints set to 24.
• Buttons - Having a height constraint of 42, with four of them stacked inside a stackView.
  Each of the Buttons has a Tag associated with them, add them from the Attributes Inspector.
  - Button1 has a Tag equal to 1.
  - Button2 has a Tag equal to 2.
  - Button3 has a Tag equal to 3.
  - Button4 has a Tag equal to 4.

Next, we’ll also be creating a custom TableViewClass with a custom XIB -

• Create a new Cocoa Touch Class set the subclass as UITableViewCell and tick the create XIB file.
• Open the XIB file of the UITableViewCell.

Custom UITableView XIB

For this cell, we have added a single containerView inside the content view that has top and bottom constrains set to 5 and leading and trailing constraints set to 12.

Write the code

First, we’ll add code to the UITableViewCell class.

The UITableViewCell class is pretty simple.

We have added the outlet for the containerView and set two variables -

• TableViewHeight — determines the height of the cell, when accessed from the viewController.
• Color — determines the color of the cell.

We also have added code to set the selection style to none and round corners to the cell.

Next, let’s create the TableViewAnimator Class that we’ll add into our class for animating the TableView.

I recommend you always create a separate class for Animations so that it’s generic and can be applied to any views. There’s also another benefit in creating a custom class, it remains highly customizable, and the desired duration and effect can be provided in the initializer.

Let’s create the TableViewAnimator class —

Here, we’ve created a type alias and defined a class for TableViewAnimator.

Next, let’s create an enum TableAnimationFactory, and add the four animation methods —

We’ve added four types of animations here in an enum, the enum serves as an animation factory, that provides the animation to the animator class. The four animations are -

1. Fade-In animation: Animates the TableView cells based on the alpha of the cell.
2. Move-Up animation: Animates the TableView cells based on the position of the cell.
3. Move-Up-Fade animation: Animates the TableView cells based on the position and the alpha of the cell.
4. Move-Up-Bounce animation: Animates the TableView cells based on the position of the cell with a spring animation.

Next, for ease of use and to avoid the cluttering of the ViewController, let’s create a Data provider with the help of an enum, that provides the animation from the animation factory, we’ll also be adding a function for each enum case that provides the title for the tableView.

Enumerations are great to map functions with cases, it makes sure that the code is always error free.

Let’s create a Tables.swift file and create an enum TableAnimation for providing data to the ViewController —

We’ve defined a TableAnimation enum, with four cases for the four animation along with associated values, that is provided to the Animation Factory methods.

The enum also has two functions -

• GetAnimation returns the animation from the animationFactory based on the enum cases, and it’s associated values.
• GetTitle returns the title of the animation based on the enum cases.

Let’s write the code for the ViewController —

Start with connecting the outlets of the view in the ViewController —
(We also have outlet functions for the button which we’ll define later)

Add the variables for the ViewController —

Here’s a brief description for each of the variable —

• Colors — the colors that we’ll present to the TableView.
• TableViewHeaderText — defines the title of the TableView header.
• CurrentTableAnimation — is a value type of the Enum model that we defined before, it sets the TableViewHeaderText variable when the enum itself is changed.
• AnimationDuration — defines the animation duration of the cell.
• Delay — defines the delay between the animation of each cell.
• FontSize — defines the size of the symbols for the buttons.

Next, let’s register the TableView and set the lifecycle method of the ViewController -

We’ve registered the custom UITableViewCell class with our TableView and set the delegate and dataSource to the viewController, we’ve set the button1’s symbol to show it as the selected one, and also we’re asynchronously reloading the data to show the animation.

Next, let’s set the delegate and dataSource methods for the TableView in the viewController —

We’ve added the standard methods for initializing the TableView, Let’s take a look into them in brief -

• The numberOfRowsInSection determines the number of TableView cells to present.
• The heightForRowAt determines the height of the TableView cells.
• The cellForRowAt initializes a cell for the indexPath, assigns it a color and returns the cell to the TableView.
• The viewForHeaderInSection determines a view for the TableHeader, we have customized it to show a label, with the value obtained from the enum.
• The heightForHeaderInSection determines the height of the TableHeader.
• The willDisplay is the most important method for this tutorial, we fetch an animation from the currentAnimation enum, initialize a TableViewAnimator class with that animation, and then we animate the cell by calling the animate method of the animator.

Lastly, let’s added the code for the button interactions, each button should reload the table with a value fetched from the Table enum that we created —

Note — All the four buttons should be assigned to a single outlet function, in this tutorial, I’ve assigned it to the animationButtonPressed function.

Since we only want a single button to appear as selected at a time, we first assign all the buttons with a circle symbol, removing the fill from the previously selected button.

Now, based on the tags assigned to the button, the switch case helps to set that particular button’s symbol as filled, and likewise, the currentTableAnimation variable is also set accordingly -

• Button1 applies the Fade-In animation to the TableViewCells.
• Button2 applies the Move-Up animation to the TableViewCell.
• Button3 applies the Move-Up-Fade animation to the TableViewCells.
• Button4 applies the Move-Up-Bounce animation to the TableViewCells.

That’s it! Now when you run the application, you should get delightful animations on the TableView, and the animation changes on pressing a different button.

Here is the end result , Animate the TableView by pressing on the buttons —

Finished TableView Animation

Resources

1. Github Repository —

Shubham0812/TableViewAnimations_iOS

2. Apple Developer Documentation on Animation —

Apple Developer Documentation

Conclusion

Let’s recap what we learned today.

We started by adding the components required for the TableView animation in the Main.storyboard file.

Next, we created a custom UITableViewClass and added the components in its XIB file.

Next, we created a TableViewAnimator class that animates the TableView, remember that to create a separate class for every animation. We also created a TableAnimationFactory enum, where the four animations were defined.

Next, we created a new enum TableAnimation, to group the animation and title for the TableViews in separate cases by creating functions.

Finally, we wrote the code for the ViewController, we set up the TableView, we added the outlet function for the buttons and assigned it animations to set the animation of the TableView.

Thanks for reading this piece. Hope to see you again in the next article!