Swift : Tableview Autoresizing Cell Height

So today i’m going to write a story about IOS tableview which might felt so dull if we used a default implementation, so today the story is about spicing up some tableview.

So how it goes

First let’s create a new IOS project with Single View App and in the Main Storyboard let’s replace the main View Controller with a Table View Controller, we can do this by adding the Table View Controller in the story board, delete the default View Controller, and set the Initial View controller to this Table View Controller.


figure 1. New Application

Then create two new Cocoa Touch Files Files for the Table View Controller and table View cell. Set the corresponding custom class for the Table View Controller and the Table View cell, don’t forget to set the reuse identifier for the table view cell.

figure 2. Table View Class assigned

Okay, all is set to start creating. Now the scenario would be a the table view would have a cell that when tapped it would expand to display detailed information.

So let’s build the Content of the cell, let’s put some label with the expanded state.


figure 2. TableViewCell

Next let’s add a new entry in couple of the event of the table view controller, which in this case

  • func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
  • tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat

Let’s add the entry for the first one, which is the didSelectRowAt function

  public func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

 selectedIndex = indexPath

 tableView.beginUpdates()
 tableView.endUpdates()
 
 tableView.scrollToRow(at: indexPath, at: .top, animated: true)
  
 }

Oops, something was forgotten, what is selectedIndex ? well it is actually a temporary variable to hold the current table’s selected index that we would used on other function for simplicity. Let’s put this in the top of the class

var selectedIndex : IndexPath? = nil

Next, the key for the auto height is actually is in this method that would return the height of the each cell when requested, and in conjunction with the previous call on begin and end updates, this method will be called when the cell are being tapped.

public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
  let h : CGFloat
  let screenheight = UIScreen.main.bounds.size.height
  if selectedIndex == indexPath {
    h = 0.164917541229385 * screenheight
    selectedIndex = nil
  }else{
    h = 0.052473763118441 * screenheight
  }        
  return h
}

With this two method we can make a simple slide to open cell which would allow the user to tap on the specific cell and react to this.

There might be a question, why the number of the multiplier and why does the we need to include the screen height into this.

well, that question is will be answered on the next post, but for now the main idea is the height gets calculated based on the percentage of the screen height instead of an exact integer value.

Idea to add the feature

So we have a tableview that slide every time we tapped on the cell, and when we tapped the other cell, well it collapsed the previous cell and expand the tapped cell, then comes a question, what if we just want to keep the state.

actually we can do that by retaining the collapsible state of the cell in an array list of a struct, and we can toggle the collapsible on the didSelect function and check the state based on the index parameter in the getRowHeight .

Source code

Source can be downloaded from https://github.com/perdhevi/swift-TableviewAutoHeight