Disabling Vertical movement of UIAttachmnetBehavior in UICollectionView

Question

Im trying mimic messages app spring animation in a horizontal UICollectionView

I have used UIAttachmentBehavior in my UICollectionViewFlowLayout subclass. but the problem is that as I scrolls horizontally, cells also move vertically and horizontally somehow a rotational movement!

I have followed this tutorial:
implementing a bouncy uicollectionviewlayout with uikitdynamics

and used in my collectionView. I also followed WWDC 2013 session 217-Exploring Scroll Views on iOS 7. but still the problem persists!
does anyone have any idea how should I solve this?

-(id)initWithCoder:(NSCoder *)aDecoder{
self = [super initWithCoder:aDecoder];
if (self){
    _dynamicAnimator = [[UIDynamicAnimator alloc] initWithCollectionViewLayout:self];
}
return self;
}

- (void)prepareLayout{

    [super prepareLayout];

    CGSize contentSize = [self collectionViewContentSize];
    NSArray *items = [super layoutAttributesForElementsInRect:CGRectMake(0, 0, contentSize.width, 500)];

    if (items.count != _dynamicAnimator.behaviors.count) {
        [_dynamicAnimator removeAllBehaviors];

        for (UICollectionViewLayoutAttributes *item in items) {
            UIAttachmentBehavior *springBehavior = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:item.center];
            springBehavior.length = 0.f;
            springBehavior.damping = 0.5f;
            springBehavior.frequency = 0.8f;

            [_dynamicAnimator addBehavior:springBehavior];
        }
    }
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
    return [_dynamicAnimator itemsInRect:rect];
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    return [_dynamicAnimator layoutAttributesForCellAtIndexPath:indexPath];
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
    CGFloat scrollDelta = newBounds.origin.x - self.collectionView.bounds.origin.x;
    CGPoint touchLocation = [self.collectionView.panGestureRecognizer locationInView:self.collectionView];

for (UIAttachmentBehavior *springBehavior in _dynamicAnimator.behaviors) {
    CGPoint anchorPoint = springBehavior.anchorPoint;
    CGFloat touchDistance = fabsf(touchLocation.x - anchorPoint.x);
    CGFloat resistanceFactor = 0.002;

    UICollectionViewLayoutAttributes *attributes = springBehavior.items.firstObject;

    CGPoint center = attributes.center;

    float resistedScroll = scrollDelta * touchDistance * resistanceFactor;
    float simpleScroll = scrollDelta;

    float actualScroll = MIN(abs(simpleScroll), abs(resistedScroll));
    if(simpleScroll < 0){
        actualScroll *= -1;
    }

    center.x += actualScroll;
    attributes.center = center;

    [_dynamicAnimator updateItemUsingCurrentState:attributes];
}

    return NO;
}

Answer 1

Well I had this problem - iOS8.

Now it's gone thanks to this post.

I was adding supplementaryViews to a UICollectionView that already had UIDynamics working quite well. Then I added some supplementaryViews that were framed based on the regular cells. The calculation would return a float for the height (not 0 decimals). And I guess like Pauls said, iOS then must do some rounding which now creates a y-delta that I didn't want. This is what sets off the oscillating movement.
By rounding my supplementaryView height the problem went away. I am getting consistent centers of 7.5 so my height is not divisible by 2 but it's still working.

Here how my supplementaryViews are now calculated

UICollectionViewLayoutAttributes *attributes = [self.dynamicAnimator layoutAttributesForCellAtIndexPath:indexPath];
// put supp view at beginning of cell
// round off height or wierd oscillations will begin as iOS must round also
CGRect suppViewFrame = CGRectMake(attributes.frame.origin.x - 44.0 / 2,
                                  attributes.frame.origin.y - 44.0,
                                  44.0,
                                  roundf(44.0 + attributes.frame.size.height / 2));

All I added was the roundf to the height part of the CGRect calculation.
And voila - it is working.
Hope this helps someone - happy coding

Answer 2

I see the exact same issue in iOS 8 - it seems that while UICollisionBehavior permits the creation of boundaries, the same does not exist for UIAttachmentBehavior (although the class documentation makes mention of it for UIAttachmentBehavior). I think that the short term solution might be to just move to a UIDynamicItemBehavior, which appears to be more flexible. Interested to know what changed from iOS 7 to iOS 8, however.

Answer 3

I had the same issue in my app. The problem is this line: UIAttachmentBehavior *springBehavior = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:item.center];

The issue is that the center of the item is returning a float numbers with decimals. iOS then rounds them to be a float number with 0 decimals causing the anchor point to not be centered well, so the item bounces.

The solution is to make sure the frame of your item is divisible by two for the height and for the width before anchoring it. Then verify that item.center is returning X and Y values that are floats with no decimals and the animation would work fine.

NOTE: Even tho in iOS7 works perfect I am seeing issues in iOS8 similar to this one and this solution doesn't work.