2

I am working on a ViewController with a TableView populated with dynamic cells from a prototype nib. I have run into a dead-end trying to recreate certain a cell-expanding animation.

My goal:

When a cell is selected, the selected cell should "expand" (grow in height to twice it's starting size) while at the same time creating space between the cell directly above and below the selected cell.

I've found an example of EXACTLY the asethetic I am looking for in the app "Things". Below are two screenshots showing the table before and and after a cell is selected:

Screenshot of table BEFORE expansion

Screenshot of table AFTER expansion

The best way I can describe the desired animation is the UITableView version of "the parting of the Red Sea". When a cell is selected, the surrounding cells give way lending the selected cell more room.. and the user's focus.

What I've tried:

I found Simon Lee's method answering a similar question and implemented it into my project. And although it animates the row-height change perfectly, it only pushes the adjacent cells on one side of the selected cell. (ie: if the cell at index 4 is selected, all the cells from index 5+ move down but those from index 0-3 stay static. Thereby not achieving the look I'm seeking.)

Using that method, the relevant sections of my code looked something like:

var cellHeight: CGFloat = 72
var selectedCell: IndexPath?

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath == selectedCell {
            return cellHeight * 2
        } else {
            return cellHeight
        }
    }
}

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

    tableView.beginUpdates()
    tableView.endUpdates()
}

func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
    selectedCell = nil

    tableView.beginUpdates()
    tableView.endUpdates()
}

Because that didn't result in my desired animation, I tried insertRows:at:with: to insert 2 empty cells (1 above and 1 below the selected row) -- then deleteRows:at:with: to remove them upon deselecting the cell. This ultimately made for a better looking animation, and looked closer to the "Things" example I'm shooting for. However this made the table overly complicated because by adding and removing cells each time a row is selected, it would change the index of the other cells making it frustrating to predict which cells would have what index at any given time.

A possible solution idea?

After working on this for a couple of days the only other way I could think to accomplish what I want is to somehow scroll the table slightly at the same time that the selected cell's height it changed.. so that as the cell expands (moving the following cells downward) it would make the previous cells appear to move upward. I'm hesitant to try this because it feels like a hack, there should be a better way to accomplish this.

ANY help would be thoroughly appreciated! I've been pulling my hair out at an alarming rate. Thank you to anyone who can share their knowledge.

Harjot Singh
  • 535
  • 7
  • 24
Trent M.
  • 101
  • 2
  • 4
  • Perhaps using a `UITableView` is the wrong way to go... Have you thought about trying any other approach? – DonMag Oct 25 '17 at 20:10
  • Here is an article that might help you: [link](https://sociumapp.com/2016/11/23/adding-cell-in-uitableview-with-nice-animation.html). Not exactly what you are going for, but could maybe be a good starting point for you to build on. – DonMag Oct 25 '17 at 20:20
  • @DonMag You know what.. you might be right. Maybe I need to think outside the restrictions of a `UITableView`. A `UICollectionView` could possibly have more flexible methods available to achieve this. Thanks for that. – Trent M. Oct 25 '17 at 20:22

0 Answers0