UICollectionView animate data change - ios

In my Project I use UICollectionView to display a grid of icons.
The user is able to change the ordering by clicking a segmented control which calling a fetch from core data with different NSSortDescriptor.
The amount of data is always the same, just ending up in different sections / rows:
- (IBAction)sortSegmentedControlChanged:(id)sender {
_fetchedResultsController = nil;
_fetchedResultsController = [self newFetchResultsControllerForSort];
NSError *error;
if (![self.fetchedResultsController performFetch:&error]) {
NSLog(#"Unresolved error %#, %#", error, [error userInfo]);
}
[self.collectionView reloadData];
}
The problem is that reloadData doesn't animate the change, UICollectionView just pops with the new data.
Should I keep track in which indexPath a cell was before and after change, and use [self.collectionView moveItemAtIndexPath: toIndexPath:] to perform the animation for the change or there is a better method ?
I didn't get much into subclassing collectionViews so any help will be great...
Thanks,
Bill.

Wrapping -reloadData in -performBatchUpdates: does not seem to cause a one-section collection view to animate.
[self.collectionView performBatchUpdates:^{
[self.collectionView reloadData];
} completion:nil];
However, this code works:
[self.collectionView performBatchUpdates:^{
[self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
} completion:nil];

reloadData doesn't animate, nor does it reliabably do so when put in a UIView animation block. It wants to be in a UICollecitonView performBatchUpdates block, so try something more like:
[self.collectionView performBatchUpdates:^{
[self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
} completion:^(BOOL finished) {
// do something on completion
}];

This is what I did to animate reload of ALL SECTIONS:
[self.collectionView reloadSections:[NSIndexSet indexSetWithIndexesInRange:NSMakeRange(0, self.collectionView.numberOfSections)]];
Swift 3
let range = Range(uncheckedBounds: (0, collectionView.numberOfSections))
let indexSet = IndexSet(integersIn: range)
collectionView.reloadSections(indexSet)

For Swift users, if your collectionview only has one section:
self.collectionView.performBatchUpdates({
let indexSet = IndexSet(integersIn: 0...0)
self.collectionView.reloadSections(indexSet)
}, completion: nil)
As seen on https://stackoverflow.com/a/42001389/4455570

Reloading the whole collection view inside a performBatchUpdates:completion: block does a glitchy animation for me on iOS 9 simulator. If you have a specific UICollectionViewCell you want do delete, or if you have it's index path, you could call deleteItemsAtIndexPaths: in that block. By using deleteItemsAtIndexPaths:, it does a smooth and nice animation.
UICollectionViewCell* cellToDelete = /* ... */;
NSIndexPath* indexPathToDelete = /* ... */;
[self.collectionView performBatchUpdates:^{
[self.collectionView deleteItemsAtIndexPaths:#[[self.collectionView indexPathForCell:cell]]];
// or...
[self.collectionView deleteItemsAtIndexPaths:#[indexPath]];
} completion:nil];

The help text says:
Call this method to reload all of the items in the collection view.
This causes the collection view to discard any currently visible items
and redisplay them. For efficiency, the collection view only displays
those cells and supplementary views that are visible. If the
collection data shrinks as a result of the reload, the collection view
adjusts its scrolling offsets accordingly. You should not call this
method in the middle of animation blocks where items are being
inserted or deleted. Insertions and deletions automatically cause the
table’s data to be updated appropriately.
I think the key part is "causes the collection view to discard any currently visible items". How is it going to animate the movement of items it has discarded?

Related

Update UITableView height when tweet loaded

I have a UITableViewCell which contains a TWTRTweetView with auto layout. I am loading a tweet like this:
- (void)loadTweetWithId:(NSString *)tweetId {
if (mTweetId == nil || ![mTweetId isEqualToString:tweetId]) {
mTweetId = tweetId;
[[[TWTRAPIClient alloc] init] loadTweetWithID:tweetId completion:^(TWTRTweet *tweet, NSError *error) {
if (tweet) {
NSLog(#"Tweet loaded!");
[mTweetView configureWithTweet:tweet];
[mTweetView setShowActionButtons:YES];
//[mTweetView setDelegate:self];
[mTweetView setPresenterViewController:self.viewController];
[mTweetView setNeedsLayout];
[mTweetView layoutIfNeeded];
[mTweetView layoutSubviews];
hc.constant = mTweetView.frame.size.height;
[self updateConstraints];
[self layoutIfNeeded];
[self layoutSubviews];
[self.tableView setNeedsLayout];
[self.tableView layoutIfNeeded];
[self.tableView layoutSubviews];
} else {
NSLog(#"Tweet load error: %#", [error localizedDescription]);
}
}];
}
}
When tweet loaded cell doesn't resize unless I scroll it out and scroll it to back. I have tried several approaches as you can see in code snippet. But non of these works. My table view uses full auto layout approach which doesn't implement cell height for row function. How can i fix this?
UPDATE:
Using:
[self.tableView beginUpdates];
[self.tableView endUpdates];
is not possible because when I do that all cells being redrawn and very big jumping happens and that is not acceptable. Also I have confirmed that tweet completion block runs in main thread.
UPDATE 2:
I have also tried to cache tweet view with tweet id and reload cell for related index path and give the same tweet view for tweet id. The cell height is corrected but it doesn't become visible until scroll out/in.
UPDATE 3:
I give constraints to tweet view in xib of the cell and height constraint is connected. So this is not a main thread issue. I have also mentioned that reloading particular cell at index doesn't work.
While working an other solution I have seen some sample TwitterKit codes that uses TWTRTweetTableViewCell but was preloading tweets to configure the cells. So I have done the same. This is a workaround of course.
Updated Answer:
You're doing a couple of things wrong that are likely to cause (or at least contribute to) the jumping:
Never call layoutSubviews yourself.
It's a method called by the system to resolve your constraints. It's automatically triggered when calling setNeedsLayout and layoutIfNeeded in a row.
The same applies to updateConstraints. It is called by the system during a layout pass. You can manually trigger it by subsequently calling setNeedsUpdateContraints and updateConstraintsIfNeeded. Furthermore, it only has an effect if you actually implemented (overrode) that method in your custom view (or cell).
When you call layoutIfNeeded on a view it layouts its subviews. Thus, when you change the constant of a constraint that constrains your mTweetView, it probably won't have any effect (unless the view hierarchy is invalidated during the triggered layout pass). You need to call layoutIfNeeded on mTweetView's superview which is the cell's content view (judging from the screenshot you added to your post):
[contentView layoutIfNeeded];
Furthermore, there is one more thing you need to be aware of that can cause flickering as well:
Cells in a table view are being recycled. Each time a cell is reused you load a new tweet. I guess it's from an asynchronous network request? If so, there is the possibility that the completion block from the first tweet you load for that cell instance returns after the completion block from the second tweet you load for that (recycled) cell when you scroll really fast or you internet connection is really slow. Make sure you cancel the request or invalidate it somehow when your cell is reused (prepareForReuse method).
Please make sure you've fixed all these issues and see if animation now works as expected. (My original answer below remains valid.)
Original Answer:
I'm pretty sure that
[self.tableView beginUpdates];
[self.tableView endUpdates];
is the only way to have a cell auto-resize itself while being displayed.
Reason:
For historic and performance reasons a UITableView always works with fixed-height cells (internally). Even when using self-sizing cells by setting an estimatedRowHeight etc. the table view will compute the height of a cell when it's dequeued, i.e. before it appears on screen. It will then add some internal constraints to the cell to give it a fixed width and a fixed height that just match the size computed by Auto Layout.
These internal constraints are only updated when needed, i.e. when a row is reloaded. Now when you add any constraints inside you cell you will "fight" against these internal constraints which have a required priority (aka 1000). In other words: There's no way to win!
The only way to update these internal (fixed) cell constraints is to tell the table view that it should. And as far as I know the only public (documented) API for that is
- (void)beginUpdates;
- (void)endUpdates;
So the only question that remains is:
Why is this approach not an option for you?
I think it's legitimate to redraw a cell after it's been resized. When you expand the cell to show a longer tweet than before the cell needs to be redrawn anyway!
You probably won't (and shouldn't) resize all visible cells all the time. (That would be quite confusing for the user...)
Try reloading that particular cell, after you loaded the tweet using,
- (void)reloadRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths
withRowAnimation:(UITableViewRowAnimation)animation;
I had the similar issue and i got that fixed by adding all my code in dispatch_async to make sure its running on main thread.
dispatch_async(dispatch_get_main_queue(), ^{
/*CODE HERE*/
});
So your code should be like this:
- (void)loadTweetWithId:(NSString *)tweetId {
if (mTweetId == nil || ![mTweetId isEqualToString:tweetId]) {
mTweetId = tweetId;
[[[TWTRAPIClient alloc] init] loadTweetWithID:tweetId completion:^(TWTRTweet *tweet, NSError *error) {
dispatch_async(dispatch_get_main_queue(), ^{
if (tweet) {
NSLog(#"Tweet loaded!");
[mTweetView configureWithTweet:tweet];
[mTweetView setShowActionButtons:YES];
//[mTweetView setDelegate:self];
[mTweetView setPresenterViewController:self.viewController];
[mTweetView setNeedsLayout];
[mTweetView layoutIfNeeded];
[mTweetView layoutSubviews];
hc.constant = mTweetView.frame.size.height;
[self updateConstraints];
[self layoutIfNeeded];
[self layoutSubviews];
[self.tableView setNeedsLayout];
[self.tableView layoutIfNeeded];
[self.tableView layoutSubviews];
} else {
NSLog(#"Tweet load error: %#", [error localizedDescription]);
}
});
}];
}
}

Animation when remove UICollectionViewCell

I have collection view, and have logic to delete cells from it. However, when cell is removed, next cell is appeared instantly on deleted cell place. Is there a way to add animation for deletion, for example, for 0.5 sec change opaque of cell, or something similar? There is a method i use for delete cell:
-(void)aMethod:(UIButton*)sender{
[self.viewModel deleteAt:[sender tag]];
[self.myCollectionView reloadData];
}
You have to use:
[UIView performWithoutAnimation:^{
[self.myCollectionView reloadData];
}];

Removing object on a tableView animation

I have a UITableView and when the user swipes on one of the cells he can delete the cell (delete the object from the array).
But for example, when the user swipes on a cell in the middle of the table the animation is made on the last cell (the one on the bottom) like in this video:
https://vid.me/D0pi
Here is the code for this deletion:
//Removing cell from "AroundersTableView"(UITableView) with UITableViewRowAnimationLeft
[self.AroundersTableView beginUpdates];
[self.Arounders removeObjectAtIndex:cellRowToDelete];
[self.AroundersTableView deleteRowsAtIndexPaths:#[[NSIndexPath indexPathForRow:cellRowToDelete inSection:0]] withRowAnimation:UITableViewRowAnimationLeft];
[self.AroundersTableView endUpdates];
//Saving Arounders
[self saveArounders];
//Creating "newTableFrame"(CGRect) and setting it to current "AroundersTableView"'s frame will one less cell
CGRect newTableFrame=self.AroundersTableView.frame;
newTableFrame.origin.y+=44;
//Animating "AroundersTableView" to the new frame
[UIView animateWithDuration:0.5 animations:^{
self.AroundersTableView.frame=newTableFrame;
}];
//ReConfiguring "AroundersTableView"(UITableView) height
[self performSelector:#selector(configureTableViewsHeight) withObject:nil afterDelay:0.5];
//Reloading "AroundersTableView"(UITableView) data
[self.AroundersTableView reloadData];
Note: configureTableViewsHeight is just a method the makes the tableView height to be the cell.height*Arounders.count (cells height * number of cells).
I have no idea why it's happening.
Why is it? How can I make the animation on the correct cell (the all the cells above it are going down and hiding the red part)?
Thank you!

Slowing down row insertion animation in UITableView

Is there a way to slow down the row insertion/deletion animation ?
In my particular case, I'm expanding/colapsing a cell by adding/removing rows below my cell and I'd like to slow the animation a little bit.
I'm using the below tricks to animate insert/delete the table view cells in my project, which works fine.
you can try this out. Happy coding!!!
// Here you can change the animation duration based on ur needs
NSTimeInterval animationDuration = 2.0f;
[UIView animateWithDuration:animationDuration animations:^{
// Disable the user interaction to the view if needed, otherwise user may interact with table view.
//view.userInteractionEnabled = NO;
[tableview beginUpdates];
// insert object to table view data source
//[yourArray insertObject:#"Some object" atIndex:some indexpath];
// Perform insert animation
//[tableview insertRowsAtIndexPaths:[NSArray arrayWithObject:someindexpath] withRowAnimation:UITableViewRowAnimationRight];
[tableview endUpdates];
} completion:^(BOOL finished) {
NSLog(#"Animation done");
// Enable the user interaaction now
//view.userInteractionEnabled = YES;
}];
Try to add/remove rows as following :
[_tableView beginUpdates];
// your add/remove func
[_tableView endUpdates];
Do UI changes for Tableview like above to reduce slow behaviour.
Hope it helps..

UITableView callback after row deletion animation complete

I have a table with shadows above the top and below the bottom cell (using Matt Gallagher's solution here: http://cocoawithlove.com/2009/08/adding-shadow-effects-to-uitableview.html). These are added in the layoutSubviews method of the UITableView class extension.
I dynamically add and delete cells below each main cell (these provide additional data) - let's call these "detail" cells. There is only one ever open at a time. When deleting the "detail cell" beneath the last main cell, as the animation begins, the shadow flicks upwards to the last cell (above the detail cell). It does this because the layoutSubview methods considers the last cell of the table to have changed the moment the animation for deleteRowsAtIndexPaths begins (rather than when the animation ends).
So, in essence, I need a way to keep the shadow below the detail cell as its being deleted. Not sure of the best way to do this. If the UITableView no longer considers that cell to be the last cell, then I am not sure even how to get the cell (since the UITableView gets the cell thus):
NSIndexPath *lastRow = [indexPathsForVisibleRows lastObject];
if ([lastRow section] == [self numberOfSections] - 1 &&
[lastRow row] == [self numberOfRowsInSection:[lastRow section]] - 1)
{
//adds shadow below it here
}
So even trapping the start of the animation is not much use if the UITableView still thinks the main cell above the "detail" cell is the "lastObject".
Thanks for any ideas.
Try this
[CATransaction begin];
[tableView beginUpdates];
//...
[CATransaction setCompletionBlock: ^{
// Code to be executed upon completion
}];
[tableView deleteRowsAtIndexPaths: indexPaths
withRowAnimation: UITableViewRowAnimationAutomatic];
[tableView endUpdates];
[CATransaction commit];
I am sure that you can easily achieve this by using a custom table view class instead of using dependencies from external frame work just inherit from the uitable view and add subviews to it.
But if you insist to keep it this way. take a reference in your own variable before deleting it.
Swift (the idea is the same, you can of course use this in obj-c):
UIView.animateWithDuration(0.3, animations: { () -> Void in
self.tableView.scrollToRowAtIndexPath(indexPathes, withRowAnimation: UITableViewRowAnimation.None)
}, completion: { (Bool) -> Void in
// The logic you want to execute after the animation
})

Resources