Springboard-like animation for deleting UICollectionViewCells - ios

I am trying to figure out a way to animate the deletion of a UICollectionViewCell similarly to springboard in iOS 7. The deleted cell should shrink into nothingness and the remaining cells should slide over to fill its place (the sliding is the important part). I have tried:
• Setting the frame of each cell to the frame of the previous cell, like so:
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
CGRect rect = [self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:i - 1 inSection:0]].frame;
[UIView animateWithDuration:0.2 animations:^{
cell.frame = rect;
}];
But this did not work, as the cells did not move at all.
• Both of the following:
[self.collectionView performBatchUpdates:^{
[self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
} completion:nil];
and
[UIView animateWithDuration:0.2 animations:^{
[self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]];
}];
But these make the cells crossfade to their required spots, not slide.
I also found this project, which uses the following:
for (int i = index+1; i<[items count]; i++) {
SEMenuItem *item = [items objectAtIndex:i];
[UIView animateWithDuration:0.2 animations:^{
if (i < index + remainingNumberOfItemsInPage) {
int intVal = item.frame.origin.x;
if (intVal %3== 0)
[item setFrame:CGRectMake(item.frame.origin.x+2*item.frame.size.width, item.frame.origin.y-item.frame.size.height-5, item.frame.size.width, item.frame.size.height)];
else
[item setFrame:CGRectMake(item.frame.origin.x-item.frame.size.width, item.frame.origin.y, item.frame.size.width, item.frame.size.height)];
}
[item updateTag:item.tag-1];
}];
}
However, it is not in a UICollectionView, so it does not help me.
Note: I am doing this on an iPad, just in case it matters to you.
Any ideas?

Subclass UICollectionViewFlowLayout. Implement:
- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath]; // might need to replace self with super
attr.transform = CGAffineTransformMakeScale(0, 0);
return attr;
}

In addition to duci9y's answer, (using attr.transform = CGAffineTransformMakeScale(0,0);), the following makes the tiles slide. I can't believe I didn't think of this before.
[self.collectionView performBatchUpdates:^{
[self.collectionView deleteItemsAtIndexPaths:#[indexPath]];
[dataSource removeObjectAtIndex:indexPath.row];
} completion:nil];

Related

UICollectionview custom flow layout delete cell

I have a horizontal UICollectionView that implements UICollectionViewLayout and uses targetContentOffsetForProposedContentOffset for a custom fling/paging functionality. Each cell is nearly the width of the screen with the next cell showing slightly to the right. The functionality works great, but I want to be able to delete the cell at index 0 when the current cell is index 1. I'm currently able to calculate and do this just fine, but upon deleting the index 0 cell it slides to the next cell (old index 2, new 1 (after deleting 0)) because of the current content offset. I'm not sure how I can delete index 0 while maintaining the current layout.
Right now in my delegate I'm doing:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
float cellWidth = self.collectionView.bounds.size.width - 20;
float currentPage = self.collectionView.contentOffset.x / cellWidth;
if (currentPage == 1) {
[self remove:0];
}
}
-(void)remove:(int)i {
[self.collectionView performBatchUpdates:^{
[self.data removeObjectAtIndex:0];
NSIndexPath *indexPath =[NSIndexPath indexPathForRow:0 inSection:0];
[self.collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]];
} completion:^(BOOL finished) {
}];
}
So the calculation and deletion works fine, but upon deleting [0], the collection view is scrolled to the next cell..and I'm not sure how to stop it.
I've tried self.collectionview.contentOffset = CGMakePoint(0,0) after the deleting, but the transition is still noticeably buggy. Any ideas on how to approach this problem?
so after a ton of trial and error I was able to resolve the issue. It might be a little hackish but I just wrapped the batch with a uiview animation that has no duration. Basically it overrides the deletion animation
[UIView animateWithDuration:0 animations:^{
[self.collectionView performBatchUpdates:^{
[scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
[self.data removeObjectAtIndex:0];
NSIndexPath *indexPath =[NSIndexPath indexPathForRow:0 inSection:0];
[self.collectionView deleteItemsAtIndexPaths:#[indexPath]];
[self.collectionView.collectionViewLayout invalidateLayout];
} completion:nil];
}];

Inserting UIView into TablewView with InsertRowsAtIndexPaths using ContentView

I lost a bit nerves on this case. I have UIView with few images as buttons. I would like to insert it with insertRowsAtIndexPaths:
I have no idea how to start with that, and I really searched every site on google. I even found something that works like a charm ( http://jackkwok.github.io/JKExpandTableView/ ) but I still cannot make it right.
Here is my didSelectRowAtIndexPath method:
-(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
int selectedRow = indexPath.row;
NSLog(#"touch on row %d", selectedRow);
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
PrototypeCell *prototypeCell =(PrototypeCell *)[tableView cellForRowAtIndexPath:indexPath];
if (prototypeCell.stretched == NO){
[UIView animateWithDuration:1 animations:^{
prototypeCell.View.frame = CGRectMake(0, 0, 320, 120);}
completion: nil];
prototypeCell.stretched = YES;}
else {
[UIView animateWithDuration:1 animations:^{
prototypeCell.View.frame = CGRectMake(0, 0, 15, 120);}
completion: nil];
prototypeCell.stretched = NO;
}
// Start a new core animation transaction
[CATransaction begin];
// Set a completion block for the animation
[CATransaction setCompletionBlock:^{
//
// Update the data model to add a new section
// [_data addObject:[DetailView init] alloc];
NSInteger item = self.thingList.count-1;
// Animate the new section apperance
[tableView beginUpdates];
[tableView insertRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath indexPathForItem:item inSection:0], nil] withRowAnimation:UITableViewRowAnimationFade];
NSLog(#"Array is: %#", _data);
// [tableView endUpdates];
}];
[CATransaction commit];
}
My head is already numb from that problem. I cannot even understand basic inserting, how I write what I would like to insert here?
Any Help appreciated!
Based on your described intent, I'm not entirely sure you need or want to insert table rows. It looks like what you are trying to achieve is to simply expand the height of a given row to reveal some extra buttons when that row is selected.
Changing the height of row is covered How to dynamically resize UITableViewCell height
Essentially you can have your PrototypeCell have some extra content (the buttons) that is usually clipped. When the view is selected, you simply change the height to make sure all of the buttons would be visible and you indicate to the tableview to reload the row that was selected.
Should you need to insert rows, this was covered in how to properly use insertRowsAtIndexPaths?
Good luck!

Add cell at bottom and scroll UITableView

I want to add cells at the bottom of a UITableView, and scroll to make it fully visible (just like in Whatsapp when you send or receive a message).
I've tried doing this:
[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:[self.tableView numberOfRowsInSection:0]-1 inSection:0] atScrollPosition:UITableViewScrollPositionMiddle animated:YES];
But this makes a graphical glitch and the table flashes and make a bad scrolling instead of a smooth one.
Any help with this?
here what I have done is, inserted a row and then changed the content inset of the tableView
-(IBOutlet)sendButton:(id)sender
{
[array addObject:textView.text];
[self addAnotherRow];
}
- (void)addAnotherRow {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:(array.count - 1) inSection:0];
[self.messagesTableView beginUpdates];
[self.messagesTableView insertRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
[self.messagesTableView endUpdates];
[self updateContentInsetForTableView:self.messagesTableView animated:YES];
// TODO: if the scroll offset was at the bottom it can be scrolled down (allow user to scroll up and not override them)
[self.messagesTableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}
- (void)updateContentInsetForTableView:(UITableView *)tableView animated:(BOOL)animated {
NSUInteger lastRow = [self tableView:tableView numberOfRowsInSection:0];
NSLog(#"last row: %lu", (unsigned long)lastRow);
NSLog(#"items count: %lu", (unsigned long)array.count);
NSUInteger lastIndex = lastRow > 0 ? lastRow - 1 : 0;
NSIndexPath *lastIndexPath = [NSIndexPath indexPathForItem:lastIndex inSection:0];
CGRect lastCellFrame = [self.messagesTableView rectForRowAtIndexPath:lastIndexPath];
// top inset = table view height - top position of last cell - last cell height
CGFloat topInset = MAX(CGRectGetHeight(self.messagesTableView.frame) - lastCellFrame.origin.y - CGRectGetHeight(lastCellFrame), 0);
// What about this way? (Did not work when tested)
// CGFloat topInset = MAX(CGRectGetHeight(self.tableView.frame) - self.tableView.contentSize.height, 0);
NSLog(#"top inset: %f", topInset);
UIEdgeInsets contentInset = tableView.contentInset;
contentInset.top = topInset;
NSLog(#"inset: %f, %f : %f, %f", contentInset.top, contentInset.bottom, contentInset.left, contentInset.right);
NSLog(#"table height: %f", CGRectGetHeight(self.messagesTableView.frame));
UIViewAnimationOptions options = UIViewAnimationOptionBeginFromCurrentState;
[UIView animateWithDuration:animated ? 0.25 : 0.0 delay:0.0 options:options animations:^{
tableView.contentInset = contentInset;
} completion:^(BOOL finished) {
}];
}
Note: to view existing messages from array, you have to include this
also.
- (void)viewDidLayoutSubviews {
[self updateContentInsetForTableView:self.messagesTableView animated:NO];
}
example function to add an item:
- (IBAction)addItem:(UIBarButtonItem *)sender {
[self.items addObject:[NSString stringWithFormat:#"Item %lu", self.items.count + 1]];
NSIndexPath *indexPathToInsert = [NSIndexPath indexPathForRow:self.items.count - 1 inSection:0];
[self.tableView insertRowsAtIndexPaths:#[indexPathToInsert] withRowAnimation:UITableViewRowAnimationAutomatic];
[self.tableView scrollToRowAtIndexPath:indexPathToInsert atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}
for me the animation looks perfectly fine this way!
Well, what I did is use [self.tableView scrollToRowAtIndexPath... but calling it from a 0.1s NSTimer.
Make insertions animated and after endUpdates scroll bottom not animating. Worked for me
Swift
self.tableView.beginUpdates()
self.tableView.insertRowsAtIndexPaths(newIndexPaths, withRowAnimation: UITableViewRowAnimation.Top)
self.tableView.endUpdates()
self.tableView.scrollToRowAtIndexPath(NSIndexPath(forRow: self.tableDataCount-1, inSection: 0), atScrollPosition: .Bottom, animated: false)

uitableview cell delete, custom animation

i am trying to create a custom animation for the deletion of table rows by overriding the deleteRowsAtIndexPaths method. i created the custom insert animation successfully and tried to reverse the animation for the deletion part but i get some errors: Assertion failure in -[UITableView _endCellAnimationsWithContext:]
and
NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 0.(rows after update must be equal to rows before the update).
If i don't override the deleteRows method and use tableView's default delete method, everything works fine, but not with my own method.
Here is the overriden method written in my tableViewController class:
- (void)insertRowsAtIndexPaths:(NSArray *)indexPaths
withRowAnimation:(UITableViewRowAnimation)animation
{
[[super tableView] insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
[self.tableView endUpdates]; // Populates UITableView with data
[self.tableView beginUpdates];
for (NSIndexPath *indexPath in indexPaths) {
__block UITableViewCell *cell = [[super tableView] cellForRowAtIndexPath:indexPath];
if (cell) { // If indexPath isn't visible we'll get nil here
// Custom animation
CGRect frame = cell.frame;
frame.origin.x = cell.frame.size.width;
cell.frame = frame;
frame.origin.x = 0;
void (^animationsBlock)() = ^{
cell.frame = frame;
};
if ([[UIView class] respondsToSelector:
#selector(animateWithDuration:delay:usingSpringWithDamping:
initialSpringVelocity:options:animations:completion:)]) {
[UIView animateWithDuration:0.9
delay:0
usingSpringWithDamping:0.5
initialSpringVelocity:0
options:0
animations:animationsBlock
completion:NULL];
} else {
[UIView animateWithDuration:0.3
delay:0
options:UIViewAnimationOptionCurveEaseIn
animations:animationsBlock
completion:NULL];
}
}
}
}
deleteRowsAtIndexPathsMethod:
- (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths
withRowAnimation:(UITableViewRowAnimation)animation
{
[[super tableView] deleteRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
[self.tableView endUpdates]; // Populates UITableView with data
[self.tableView beginUpdates];
for (NSIndexPath *indexPath in indexPaths) {
__block UITableViewCell *cell = [[super tableView] cellForRowAtIndexPath:indexPath];
if (cell) { // If indexPath isn't visible we'll get nil here
// Custom animation
CGRect frame = cell.frame;
frame.origin.x = 0;
cell.frame = frame;
frame.origin.x = cell.frame.size.width;
void (^animationsBlock)() = ^{
cell.frame = frame;
};
if ([[UIView class] respondsToSelector:
#selector(animateWithDuration:delay:options:animations:completion:)]) {
[UIView animateWithDuration:0.9
delay:0
options:UIViewAnimationOptionCurveEaseIn
animations:animationsBlock
completion:NULL];
} else {
[UIView animateWithDuration:0.9
delay:0
options:UIViewAnimationCurveLinear
animations:animationsBlock
completion:NULL];
}
}
}
}
Edit: this code is inside a method, that runs whenever i modify a cell's object. I modify an object and save it to core data, then i retrieve all the updated objects using [self populateData], then i want to run the animations: delete the old cell and insert the new updated cell somewhere at the bottom of the tableView
[coreDataStack saveContext];
[self populateData];
[self.tableView beginUpdates];
int oldIndex = indexPath.row;
int newIndex = newIndexPath.row;
if(oldIndex<newIndex){
[self deleteRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationRight];
[self insertRowsAtIndexPaths:#[newIndexPath] withRowAnimation:UITableViewRowAnimationTop];
} else if (oldIndex>newIndex) {
[self deleteRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationRight];
[self insertRowsAtIndexPaths:#[newIndexPath] withRowAnimation:UITableViewRowAnimationBottom];
} else {
[self.tableView reloadRowsAtIndexPaths:#[newIndexPath] withRowAnimation:UITableViewRowAnimationMiddle];
}
[self.tableView endUpdates];

Animating all UICollectionViewCells in a UICollectionView

I was wondering what a good way to animate all the cells in a UICollectionView is. I'm trying to simulate editing in a UICollectionView. So what I want to do is shrink all the bounds of the UICollectionViewCells. So what I have is this:
- (IBAction)startEditingMode:(id)sender {
[_items enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:idx inSection:0];
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];
[UIView animateWithDuration:0.25 animations:^{
cell.layer.transform = CATransform3DMakeScale(0.9, 0.9, 1);
}];
}];
}
It works, but I wasn't sure if there was a property on UICollectionView, or a better more standard way to do something like this. Thanks.
I would create a UICollectionViewLayout subclass. Add a BOOL property called editing. When editing changes, call invalidateLayout. Then in the attribute returned by the -layoutAttributesForItemAtIndexPath: method you can specify a transform.
The problem with your approach is that it affects only the visible cells. The UICollectionViewLayout subclass is nice because it will apply the transform to all of the cells even as new ones get added. And it moves all of the collection view layout handling out of the view controller.
Cell attributes can include frame, size, center, transform(3D), alpha, and your own custom attributes.
You'll change the value of editing in a -performBatchUpdates: block, as suggested by wL_.
- (IBAction)startEditingMode:(id)sender {
[self.collectionView performBatchUpdates:^{
((MyCollectionViewLayout *)self.collectionView.collectionViewLayout).editing = YES;
}
completion:NULL];
}
And in the UICollectionViewLayout subclass:
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
if (self.editing) {
attributes.transform = CGAffineTransformMakeScale(0.9, 0.9);
}
else {
attributes.transform = CGAffineTransformIdentity;
}
return attributes;
}
Also note you (probably) don't need a 3D transform here. An affine transform is sufficient.
Have you tried using UICollectionView performBatchUpdates:?
Something like:
[collectionView performBatchUpdates:^{
[_items enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:idx inSection:0];
UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];
cell.layer.transform = CATransform3DMakeScale(0.9, 0.9, 1);
}];
} completion:^{}];

Resources