WepsTech
The world of development
How to animate UITableViewCell in iOS Swift
How to animate UITableViewCell in iOS Swift
Hello Guys, Welcome to this tutorial. I hope you are doing well. In this tutorial I will explain you how to animate UITableViewCell. And for this I will use Swift 5 as a Programming language and Xcode 11.4 as a IDE.
And I am sure after reading and implementing this complete tutorial. You will become a professional and expert in that. Because I am going to clear each and everything with the help of a basic example.
How to Animate UITableViewCell
If you are looking for, how to make your UITableViewCell attractive and how you can animate it? Then hopefully you are on the right page. So before programming let’s know about a little bit about UITableView and UITableViewCell.
UITableView
UITableView is a ViewController that contains multiple cells. It has two properties, the first property is a delegate and another is a data source. UITableView delegate is used for actions and modification methods. Whereas the data-source is used for setting the data in a particular manner and in a particular place. So that’s the short description of UITableView.
UITableViewCell
UITableViewCell Defines the attributes and behavior of cells in a table view. You can set a table cell’s selected-state appearance, support editing functionality, display accessory views (such as a switch control), and specify background appearance and content indentation.
After all that definition now we will move towards programming. At the very first you need to create the UITableView Controller and inside the UITable View controller you have to create the UITableViewCell.
After doing that now you have to set the delegates and dataSource method of the UITableView. If you have done with it then at the end you have to use willDisplay method of UITableView delegates as mention below.
import UIKit
import QuartzCore
class TableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 50
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
return cell
}
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// MARK: - You have to write code for animation here
}
}
😊 Great work, Now will write the animation code.
Whatever code I am writing you have to write inside the willDisplay function only. So first animation will be as
Rotate UITableViewCell
cell.transform = CGAffineTransform(rotationAngle: 360)
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.transform = CGAffineTransform(rotationAngle: 0.0)
})
Wonderful work, Now we will do different magic 😊😊😁
Wave Animation in UITableViewCell
Wave animation very very attractive animation. I also like this animation. I will suggest you that. You should try once this animation. I am sure you will also like this 😊😊
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0)
UIView.animate(withDuration: 4, delay: 0.05 * Double(indexPath.row), usingSpringWithDamping: 0.4, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
})
Great 😊😊😊 If you like this animation please let me know in comment box. After that we have another animation.
Alpha Animation in UITableViewCell
cell.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.alpha = 1
})
Wonderful..!! You done this 😊😊😊 Now another animation is
Drag UITableViewCell from left to right
cell.transform = CGAffineTransform(translationX: 0, y: cell.contentView.frame.height)
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
})
Wonderful work, Now let’s see the the different animation list. In the below TableViewController I am setting all the animation. You can integrate one by one these animation.
import UIKit
import QuartzCore
class TableViewController: UITableViewController {
// MARK: Spacial Animation CARD DROP
let TipInCellAnimatorStartTransform: CATransform3D = {
let rotationDegrees: CGFloat = -15.0
let rotationRadians: CGFloat = rotationDegrees * (CGFloat(Double.pi)/180.0)
let offset = CGPoint(x: -20, y: -20)
var startTransform = CATransform3DIdentity
startTransform = CATransform3DRotate(CATransform3DIdentity,
rotationRadians, 0.0, 0.0, 1.0)
startTransform = CATransform3DTranslate(startTransform, offset.x, offset.y, 0.0)
return startTransform
}()
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func refreshTable(_ sender: Any) {
self.tableView.reloadData()
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 50
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
if indexPath.row % 2 == 0 {
cell.contentView.backgroundColor = .systemGray5
} else {
cell.contentView.backgroundColor = .cyan
}
return cell
}
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// MARK: - alpha animation
/*cell.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.alpha = 1
})*/
// MARK: - Wave animation
/*cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0)
UIView.animate(withDuration: 4, delay: 0.05 * Double(indexPath.row), usingSpringWithDamping: 0.4, initialSpringVelocity: 0.1,
options: .curveEaseIn, animations: {
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
})*/
// MARK: - Left to right animation
/*cell.transform = CGAffineTransform(translationX: 0, y: cell.contentView.frame.height)
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
})*/
// MARK: - Top to bottom animation
/*cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0)
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
})*/
// MARK: - Bounce animation
/*cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0)
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), usingSpringWithDamping: 0.4, initialSpringVelocity: 0.1,
options: .curveEaseIn, animations: {
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
})*/
// MARK: - Right to left animation
/*cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0)
UIView.animate(
withDuration: 0.5,
delay: 0.05 * Double(indexPath.row),
options: [.curveEaseInOut],
animations: {
cell.transform = CGAffineTransform(translationX: 0, y: 0)
})*/
// MARK: - Rotate animation
cell.transform = CGAffineTransform(rotationAngle: 360)
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.transform = CGAffineTransform(rotationAngle: 0.0)
})
// MARK: - Linear animation
/*cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
UIView.animate(
withDuration: 0.5,
delay: 0.05 * Double(indexPath.row),
options: [.curveLinear],
animations: {
cell.transform = CGAffineTransform(translationX: 0, y: 0)
})*/
// MARK: - Zoom animation
/*cell.transform = CGAffineTransform(scaleX: 0, y : 0)
UIView.animate(withDuration: 0.5, animations: {
cell.transform = CGAffineTransform(scaleX: 1, y : 1)
})*/
// MARK: - Drag from right to left from -200 of X animation
/*cell.center.x += 200
UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
cell.center.x -= 200
})*/
// MARK: Spacial Animation CARD DROP
/*let view = cell.contentView
view.layer.transform = TipInCellAnimatorStartTransform
view.layer.opacity = 0.8
UIView.animate(withDuration: 0.5) {
view.layer.transform = CATransform3DIdentity
view.layer.opacity = 1
}*/
}
}
These all are really great animation. If you would like to watch the video regarding these animation and integration then you can watch after click here.
I am happy to help you guys. I want to learn something more about iOS Application development. Then you can go through by the below links. These all topics are very very interesting.
I hope you will enjoy. And also you will become a professional + expert developer after reading all these tutorial.
And here is one more benefit, I have create a video for every tutorial. So if it’s getting hard to read for you then you can watch the videos as well from this link
Tags
About The Author
Pushpendra Kumar
I am passionate about mobile application development and professional developer at Colour Moon Technologies Pvt Ltd (www.thecolourmoon.com). This website I have made so that I can meet with new challenges and can share here.
Posts You might like
KidePlace.com
In this table view animations tutorial, you’ll be using Swift to enhance an existing app to rotate the cells of a table as you scroll. Along the way, you’ll learn about how transforms are achieved in UIKit, and how to use them in a subtle manner so as not to overwhelm your user with too much happening on-screen at once. You will also get some advice on how to organize your code to keep responsibilities clear and your view controllers slim.