How to Create iOS TableView That Adds Cells From Bottom Up Using Reverse Extension Swift Component

iOS tableview is one of the most important user interface components on iOS and almost every iOS app uses it. For example, your contacts are displayed in a iOS tableview. Another example is the Mail app. It uses iOS Tableview to display your mail boxes and emails.

However, most of these apps add cells from the top to bottom, but today, in this Swift app development tutorial, we’ll see how to create an iOS tableview that add cells from the bottom up.

For this, we’re going to use Reverse Extension – a Swift component that enhances the UITableView and allows you to add cells from the bottom up as we see in the chat apps.

Basically, the Reverse Extension Swift component rotates both UITableView and UITableViewCell to add cells from the bottom up. Now, let’s move forward and implement reverse extension in iOS tableview.

Let’s Get Started

Open your Xcode and create a new project.

Select Single View Application as a project type and click on next.

In the next tab, set the project name and other details.

Once you create a new project successfully, drag and drop iOS Tableview from “Show the Object Library” section.

Set TableView DataSource and Delegate from storyboard.

Add below pods to your projects.

# Pods for ReverseExtensionDemo
pod 'ReverseExtension'
pod 'TouchVisualizer'

Import ReverseExtension in your viewController.

In viewDidLoad() we have used some properties of UITableview.

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

reverseTableView.re.dataSource = self

reverseTableView.register(UINib(nibName: “ReverseTableViewCell", bundle: nil), forCellReuseIdentifier: "ReverseTableViewCell")

reverseTableView.re.delegate = self
reverseTableView.re.scrollViewDidReachTop = { scrollView in
print("scrollViewDidReachTop")
}
reverseTableView.re.scrollViewDidReachBottom = { scrollView in
print("scrollViewDidReachBottom")
}
reverseTableView.estimatedRowHeight = 56
reverseTableView.rowHeight = UITableViewAutomaticDimension

}

//Set DataSource and Delegate of UITableView.

//MARK:UITableViewDataSource & Delegate
func scrollViewDidScroll(_ scrollView: UIScrollView) {
print("scrollView.contentOffset.y =", scrollView.contentOffset.y)
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return numberOfCell
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "ReverseTableViewCell", for: indexPath) as! ReverseTableViewCell
cell.cellLabel.text = "\(indexPath.row)"
cell.cellImageView.image = UIImage(named: "Dog\(indexPath.row%2).jpg")
cell.backgroundColor = UIColor(red: random(),
green: random(),
blue: random(),
alpha: 1.0)
return cell
}

//Add button action
//MARK:IBAction
@IBAction func addCellTapped(_ sender: Any) {
numberOfCell = numberOfCell + 1
reverseTableView.beginUpdates()
reverseTableView.re.insertRows(at: [IndexPath(row: numberOfCell - 1, section: 0)], with: .automatic)
reverseTableView.endUpdates()
}

//To get random colour
func random() -> CGFloat {
return CGFloat(arc4random()) / CGFloat(UInt32.max)
}

And Done!

Once you successfully implement this code, you can easily add the feature of adding cells from bottom up. Though, if you’re trying to implement it in your chat or similar app where you want to implement, then it’s important that you hire iPhone app developer who has the experience and skills to implement the reverse extension successfully.

Grab a free copy of Revese Extension Demo from Github.