How could I recreate the TweetBot style 'drop-down' cell menus?

Question

The app 'TweetBot' features a drop down menu below each cell, that appears when the cell is tapped. The menu appears as a different cell, directly below the tapped cell. Here's a (rather large) screenshot to make it more clear:

This interface idea would fit in perfectly with an app I am creating. It's not as straight forward as it sounds, due to the need to match cells/indexPaths up correctly. I've got some ideas about how I might implement this - but:

How would you go about implementing this feature (Or if you've done this, how did you achieve it?) Or even better - are there any open source implementations already?

Answer 1

When creating you're cell, create 2 UIViews, one to contain all the normal content, the other to contain the drop down.

Set the auto resizing mask of the drop down view so that it has an inflexible height, and a flexible top margin. (the rest as usual) Set the auto resizing mask of the normal content view so that it has inflexible margins and flexible width and height.

Set a tag for both views, each.

Make add the drop down view before the content view do that it is hidden by the content view (also the content view can't have a transparent background)

In the table view delegate method, for when a cell is pressed, set the auto resizing mask of the added content view, using tags to get to it, to the same as before except inflexible height and flexible bottom margin. And add :

[tableView beginUpdates];
[tableView endUpdates];

Create an instance variable to hold an NSIndexPath object. Set the variable to the index path of the pressed cell.

In the table view delegate method to set the height if the cells, add an if statement, so that the height of the drop down is added to the height of the selected cell (which will be in the instance variable described above)

Add the necessary if statements to the cell pressed method to determine whether to show the drop down or hide it.

This is just a rough pointer to one method of adding drop downs to cells, there are other ways, which may be better. I'll probably add some code and better details when I get to my laptop.

Answer 2

The answer is: with much diffuculty. Especially if your UITableViewCells are semi-transparent and of the 'grouped' table view style, as was the case in my situation.

I still haven't got this solution working perfectly, especially at the ends of each section where there are problems with rounded corners. However, here is a basic outline of how I've done it so far.

1. Subclass UITableViewCell - for instance, ExtendableTableViewCell.

2. Create a simple class to manage what cells are extended.

3. From this simple class, have it call a method on ExtendableTableViewCell, eg extendCell, whenever the cell should be extended.

4. In extendCell, add the relevant extension animation. There is all sorts of animation trickery with masking, bounds and anchor points neccesary in the case of semi transparent cells - something I still have not perfected.

If anyone can see a better way to do it, or has any ideas as to how I could solve issues with animating, or extending the bottom cell in a section nicely, then please say!

Answer 3

Jordan seems to have made some progress in this area; I haven't attempted something like this myself but here's my take on it:

Insert a 0px height transparent UITableViewCell in-between each regular UITableViewCell. You should be able to do this quite easily with a if(index%2) conditional block in ConfigureCellForIndexPath:

Make the toolbar a subview of your UITableView but position the UITableViewCells above it. When a user taps on a cell, you simply reposition the toolbar at the bottom of that cell and animate the transparent cell to the height of the toolbar.

Remember to bring the toolbar in front of the transparent cell after the animation is complete. Otherwise the user would be sending touch events to the dummy cell

You would need to take into account scenarios where the user taps on a cell whose lower bound is off-screen, and scroll the UITableView to keep the custom toolbar in view. Otherwise the user might not even realize the toolbar was opened.

Good luck!