0

I am trying to recreate the collapsable date picker that the calendar app uses when creating a new event. I've put an example of what I'm trying to do on github

In short, I've created a static table, added three cells. The first cell is for the date, and contains a button to toggle the second cell. The second cell is the date picker. The third cell is arbitrary. In the code I'm trying to set the height of the table cell (and the date picker if needed) to zero, and then toggle the size whenever the user clicks the button. No matter what I've tried, I can't a) get the cell to collapse without some sort of gap, and 2) get the animation to smoothly transition from expanded to collapsed and back again.

Edit: This question is not the same as the duplicate answer, in that I wanted to expand a separate table cell and not the same cell as being selected. But, I personally can live with using a same-cell expansion. I also updated my github project so future people can see a working example.

dohpaz42
  • 520
  • 4
  • 18
  • It _is_ a duplicate because _the answer_ is given there. The mechanism that triggers the expansion / contraction is irrelevant to the story, and is trivial to institute. Your question was about the expansion / contraction itself, and that is correctly described in the answers to that question. Moreover, I've fully described it in my answer; there really is no more to it than what I've said. – matt Oct 23 '16 at 23:49
  • No problem. Thank you again for your time and patience. I've learned a lot. – dohpaz42 Oct 23 '16 at 23:59

1 Answers1

6

It's very simple; you are probably over-thinking things here. This functionality is built in; Apple wants you to be able to expand and contract a cell. You just aren't using the API Apple has provided. Use it! Here's how.

The date picker cells are always present. But their height is zero (and their clipsToBounds is true) so you don't see them. So implement heightForRowAtIndexPath to return zero for those cells.

To show a date picker cell, change what heightForRowAtIndexPath returns (this is easiest if you have a property that holds this value, so you can just change the property value and have heightForRowAtIndexPath read it from there) and say:

    self.tableView.beginUpdates()
    self.tableView.endUpdates()

That's all there is to it!

Here's a quick demo I made. The red and orange things are cells. The table has three cells but the second one, containing the date picker, starts out with zero height:

enter image description here

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • I'm a little confused about how you went about expanding the separate table cell. Could you post your example code? I'd like to compare it with my derived solution. Thanks! – dohpaz42 Oct 23 '16 at 16:51
  • Well, I think I described it in my answer. The button just says: `self.height = self.height > 0 ? 0 : 200; self.tableView.beginUpdates(); self.tableView.endUpdates()` And my implementation of `heightForRowAt` picks up that value (`self.height`) for that row. – matt Oct 23 '16 at 17:36
  • You may have described it, but it doesn't make much sense to me (I'm new to this, btw). How are you getting `heightForRowAt` to return three values? There is the normal row height for cells 1 and 3, then there is zero for the initial value of cell 2, and the expanded height for cell 2. I asked to see your code because what you described is not conceptually making sense to me. Also, I can get it to work, but the second cell has the normal row height; otherwise, the expanding and collapsing works. – dohpaz42 Oct 23 '16 at 21:55
  • I'll send you the example project. (I'll post it on github for you.) Would you like me to use Swift 2.2 or Swift 3? – matt Oct 23 '16 at 23:31
  • I'm using swift 3, and thank you. – dohpaz42 Oct 23 '16 at 23:31
  • Here you go: https://github.com/mattneub/accordionCellDemo – matt Oct 23 '16 at 23:47