I am implementing an animation on my UITableView. Whenever I tap on my section I want all the rows under that section to collapse with an animation. A tap again will bring them back animated.
This is what I am doing:
Putting a tap gesture recognizer on my table sections & on the
handler I am setting the table data sources accordingly.
After setting up correct data sources I am calling following code,
here aTag is the section index tapped.
[self.tableView reloadSections:[NSIndexSet indexSetWithIndex:aTag] withRowAnimation:UITableViewRowAnimationBottom];
Here, the problem I am facing is that when rows are animating I see them animating in wrong frame. My section header also animates from above & the whole animation looks displaced by height of section header. Once animation is done, everything is at correct place. It is just during the animation I see a little weirdness of animation displacement. So, ideally, only cell should animate & not the section & cell should animate from its position without any displacement.
Any idea what needs to be taken care of here.
This is a UITableView bug. I spent a technical support ticket, and they told me to report it as a bug. Bug ID# 12498611.
The solution I've come up for this is:
scroll the cells first out of the view
update the backing data
reload the table, as not to animate the cell removal
scroll the table (without animation) to compensate for the missing cells
There are some edge cases for which you have to ensure that the content offset doesn't become negative or overshoots the content size. For this rectForSection is your best friend.
Hope this helped.
Related
I was downloading an Pizza pizza application for IPhone. There is very cool animation for a cell.
If you click on particular cell, it will expand down and show you more controllers.
Please look at link1 (first state ) and at link2 (second state when you are clicking on the cell)
Question : what is the right way to achieve this animation.
Please advice me on this issue. Any comments are welcomed
There is nothing new about this animation. Its pretty straight forward, and it will just depend on how you want to effect this change.
For example, start off with the cells as shown in your first image. Touching a cell will call the -didSelectRowAtIndexPath, and you will need to increase the size of the cell, and provide the new cell (which is the image of the second link). Call tableView reloadData to effect this change. UseUIAnimation that will animate the cell from your first state to second state for a period of 0.5 seconds (how fast you want it to be)
Make sure that during the animation period, your cell is NOT selectable.
cell.userInteractionEnabled = NO
You can do this with other animation frameworks, but UIAnimation should do the trick. (Refer to examples of UIAnimation if you need help with it)
Every cell you see is a section Header View with button.When you touch the button,the table reload data in this section,then you can see the real cell view in this section. The cell view is a custom view with a lot of controllers.
Currently I have UITableViewCell's that hold sometimes really long text (up to 50,000 pixels in height after drawing). However the UITableView delegate documentation says that cells shouldn't be higher than 2009 pixels in height (any ideas why?).
It's only the first section in my table view that has the really long cell, so instead of using a cell for the first section, I thought I'd create a UIScrollView, put a UITextView as the first "cell" and add it to the scrollView, and then add the tableView to the scroll view as well (under the textView). However, having a 50,000 px high UITextView is causing huge memory problems.
What are my options? I know I could use a UITextView that scrolls, but to have a scrollable UITextView with a tableView just causes complicated scrolling behavior. I want to mimic the scrolling of a tableView.
I didn't know it would be an issue to have a 50,000 px high view in a UIScrollView. I thought that's what UIScrollView's are for? Do I have any alternatives?
I would seriously question the UI design where you must render text that large as part of a table cell. The best option would be to put a reasonably-sized summary in a cell with cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;, build a separate view for the long text, and let the user navigate to that view by clicking the disclosure indicator.
As a side note, you could also put a scroll view inside the initial table cell (not all cells must be of the same type; you can make one with a scroll view in it, and use it for the cell at index zero). It's not going to be as usable as the regular cell with a disclosure indicator, though.
Stackoverflow seems to be one of the most authoritative and easy to use technical forums on the internet so I figured that this would be the best place to start. I have done considerable research on this particular issue and so far I have not found a definitive answer and was hoping that someone here would have a solution or at least an answer as to why this is not working. This is for iPhone SDK 4.1 with xcode 3.2.4.
I have a grouped table view containing 2 sections with 3 rows in each section. By design the entire table view is visible when not being obscured. When a user touches any of the cells a picker view is displayed and as selections are made on the picker they are reflected in the selected table view cell. This picker view obscures the bottom three cells so I would like to have the bottom cells slide up and be visible but when using the following code nothing happens:
NSIndexPath* ip = [NSIndexPath indexPathForRow:0 inSection:1];
[tableView scrollToRowAtIndexPath:ip
atScrollPosition:UITableViewScrollPositionTop animated:NO];
There are no compiler errors or warnings and I have verified that it is getting executed and that scrolling is enabled on the table view. As would be expected when unobscured the table view does not scroll but bounces since all of the cells are already visible. I've thought of a couple of workarounds neither of which are very appealing. One would be to create two separate table views but this would involve a considerable amount of work since I have proceeded with further development predicated on being able to get the bottom section to scroll. The other possible solution is to have the frame set to display the picker on the top when selecting from the bottom section and vice versa when selected from the top. I do not like this solution much for aesthetic reasons. I am hoping that someone has a solution or at least an explanation for why this is not working as expected.
Many thanks,
Tom
When the table is unobscured by the picker view
Right, the tableview will not scroll beyond the cells it contains. Just resize the tableview when the picker view is presented so that they don't overlap.
Try getting the frame of the tableView and then moving that.
In the UITableViewController :
//change the height value to accomodate the pickerView
CGRect newFrame = CGRectMake(0.0f, 0.0f,320.0f,240.0f); //guessing on height of 240
self.tableView.frame = newFrame;
When you're done, just put it back
CGRect oldFrame = CGRectMake(0.0f,0.0f,320.0f,480.0f);
self.tableView.frame = oldFrame;
You could always put it in a nice animation block to slide it up or down.
Good luck
Suppose I have a table view, and I want to implement something like this:
The table view contains n cells by default.
New cells will be added at the top(head) of the table view.
The data source of the table view is a mutable array.
The problem is when I use [tableview reloadData], the new data is always shown at the top of the tableview, but what I want is remain the old visible cells at the old position, means no refresh after reload data. I had tried some solutions, and I found out that if I added new cells at the tail, and update the tableview, the old visible cells will remain old position without any extra effort. But I don't know how to remain the old visible cells at the old position if I add the new cells at the top.
As a reference, I think the official Twitter app for iPhone just implemented what I want in the time line view, but I don't know how to archive it.
Guys, have any idea?
Thanks a lot.
-Tonny Xu
[Update] It's a little bit hard to describe what I want in text. I added some pictures.
As the picture shows[the link is below], the default cells is started from section California, I want to added 3 new cells before "Brea", what I want is after I added "New cell 1,2,3", the cell "Brea" is still remain the position where it was. In another word, the new cells 1,2,3 are not visible after updated.
Sorry, because I don't have enough reputation to use image, please visit this url http://i.stack.imgur.com/S9jJl.png
I had figured out how to implement this, hope this can help somebody else who wants the same effect.
The point is that UITableView is a subclass of UIScrollView. Thus, UITableView has all the properties of UIScrollView, especially one will work for this: UITableView.contentOffset, this can also be animated using [UITableView setContentOffset:animated:].
To archive the same effect as Twitter for iPhone official app, we need to know every time how much offset is added or deleted. Remember the former offset and set the offset +/- delta offset without animation.
Done.
Just answered a similar question with code snippets here
Keep uitableview static when inserting rows at the top
Basically:
Save the scroll offset where you would have called beginUpdate:.
In place of calls to InsertCell you add the cell's height to the saved offset.
Where you would have called endUpdate:, call reloadData, then scroll by the saved offset with NO animation.
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?
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.
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.
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.
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.