views:

616

answers:

4

After the user taps a tableview cell, I'd like to slide open a small view just below the cell . The first screenshot of these two apps show this:

Tweetie 2: http://itunes.apple.com/us/app/tweetie-2/id333903271?mt=8

Pastebot: http://itunes.apple.com/us/app/id344614116?mt=8

I know how to dynamically increase the height of a cell but that is a different effect than the above. The slide out view affect doesn't seem to increase the cell's height. Also, the new view isn't as wide. Any suggestions on how to go about designing that?

+1  A: 

You could create and insert, with animation, a new custom cell under it. Check out insertRowsAtIndexPaths:withRowAnimation:.

UPDATE
I also really like your idea of using a "slideout" view, but I agree with TechZen that this should be added as a subview of the cell.
If you want to increase the height of the cell, you need to return the correct heights for all the cells from the delegate method tableView:heightForRowAtIndexPath:. You will need to return the same height (standard is 44) for all rows except the one with the extra view which will be increased by the height of the new view.

gerry3
Thanks. How do I control content of the cell being inserted? It inserts the cell above it so I end up with two of the same cells.
4thSpace
Well, if you use this approach, you are adding another row to your table, so you need to account for it in your table view datasource/delegate methods. For example, if you use an array for your data, you will need to insert an object at the appropriate index. You definitely can control where the new row/cell appears.
gerry3
I'm using tableView.editing = YES and [tableView beginUpdates] just before calling insertRowsAtIndexPaths:withRowAnimation. This allows some type of animation but not the behavior used by the above two apps. The animation seems to create a cell on the current one and slide it down. Also, I guess since I'm in editing mode, now I can't click any other cells or do anything. Am I going in the wrong direction?
4thSpace
I would not set editing property--that is for when the user can delete/move/insert rows. Again, you can create this cell anywhere, so it can be under the cell that the user selects (use a different indexPath to tell it where you want it). You should use [tableView endUpdates] after you add the row. This is quite likely NOT what those apps are doing, it was just a suggestion based on your general question. I do not have PasteBot, but in Tweetie version 2.1c, the options for the tweet appear over the top of the row when you swipe it, not under it. So, that is probably a new view in the cell.
gerry3
Ok, yes. That sort of behavior is much better. Thanks Gerry.
4thSpace
I've got it all just about working. One problem is I can't dequeue the previously selected subcell without manually scrolling it out of view then back. So, I end up with all of the little subcells still visible until I scroll them out of view then back, which then leaves everything in a correct state and I have only the last selected cell's subcell displaying. Do you know how I can make the older subcells go away without user interaction?
4thSpace
To reload the table view send it a reloadData message. If just a cell or a few cells need to be changed, reload them with reloadRowsAtIndexPaths:withRowAnimation:
gerry3
A: 

I don't think they're sliding a view beneath the cell view, I think they're inserting the view into the cell itself and modifying the graphics to create the illusion of an overlying view.

TechZen
A: 

I don't really know how they did that, but in the last minutes I tried some experiments and... the easiest solution is definitely:

NSIndexPath *myIndexPath = [NSIndexPath indexPathForRow:[selectedCell intValue]+1 inSection:0];
[tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:myIndexPath] withRowAnimation:UITableViewRowAnimationTop];

Insert some custom graphics (cellForRowAtIndexPath) and it looks quite the same.

Joe Mallik
A: 

Those two apps are doing things that are quite different. Tweetie is overlaying a new cell on top of an existing one, while PasteBot is creating a new one underneath, and animating the expansion of the table view. Mooch! does the same thing as PasteBot, and it's a really cool effect that I'd like to duplicate.