8

I'm trying to replicate this at the moment:

enter image description here

If you're familiar with Google's app, it looks like a UICollectionView with a custom flow layout.

I'm expanding on a question that has been closed with some additional code.

Here's the link to the other question.

In the custom flow layout class, I can create a "stacked" effect by setting a negative minimum line spacing value, and using the following:

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *allAttributesInRect = [super layoutAttributesForElementsInRect:rect];

    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMidY(self.collectionView.bounds));

    for (UICollectionViewLayoutAttributes *cellAttributes in allAttributesInRect)
    {
        if (CGRectContainsPoint(cellAttributes.frame, centerPoint))
        {
            cellAttributes.transform = CGAffineTransformIdentity;
            cellAttributes.zIndex = 1.0;
        }
        else
        {
            cellAttributes.transform = CGAffineTransformMakeScale(0.75, 0.75);
        }
    }

    return allAttributesInRect;
}

The swiping to delete animations are working alright, but I'm having trouble creating the "stacked" look, and then dragging just 1 cell up into the view, while keeping the remaining cards stacked, like what you see above.

Community
  • 1
  • 1
STANGMMX
  • 973
  • 7
  • 18
  • 31
  • hey. I'm trying to replicate the same effect, though with not much success. I need the cards to be part of a UICollectionView/UITableView so the user can scroll more than just some cards like google has. But I can assure you that the way google has build that app is not with a collection view. I have check the app in Reveal and they basically did the animation using just views. nevertheless I need a colletionview as well and the only way I can see it being done is by having two layout that you can animate the transition between. it take much more time though – alex Sep 08 '14 at 11:42
  • A video or gif of the effect you're looking for would help you get an answer. – Segev Oct 31 '14 at 21:51

1 Answers1

0

I see two parts to this view. 1. A stack of "cards" & 2. A table of stacks. Breaking it down like that makes it so much easier to handle.

It should be pretty straight forward to subclass UIView to create a "card" (I'll call it UICardView)that you can drag around. Creating a "stack" of these shouldn't be too difficult either. I see the hardest part of this would be efficiently adding a drop shadow.

The second part includes many moving parts: adding these stacks to a table. Really, the table is used for smooth scrolling and consistent spacing and, in effect, is entirely transparent. You'd need to calculate the height for each stack of "cards" for heightForRowAtIndexPath:.

This approach allows for smooth scrolling, a relatively low memory footprint, and a high degree of customization with relative ease. Additionally, these smaller pieces should be easy to maintain and add features to.

Fennelouski
  • 2,411
  • 1
  • 18
  • 26