How to copy messages, bouncing bubbles in iOS 7

Question

When you are in a conversation in the Messages application in iOS 7, if you scroll up or down, you will notice that the bubbles and, moreover, the text that says when sending messages will bounce.

I am trying to replicate this in my own table view, but I cannot find a way to do this.

I assume it uses UIDynamics, but I'm not sure how to link this by scrolling and bouncing the content.

Any help would be appreciated

Answer 1

If you want to reproduce this effect yourself, you will need UIKit Dynamics. I was interested in this, and it was explained at WWDC this year.

Take a look at WWDC Session 217: Exploring Scrolling on iOS 7

Also readable is the use of components on the Internet such as THSpringyCollectionView

Answer 2

I was also interested in this effect, and during my research on the Internet I found this tutorial - http://www.objc.io/issue-5/collection-views-and-uidynamics.html It implements the same idea.

Answer 3

You can add a spring bounce to the content in your scroll, for example:

• Customize the UIScrollview view and add it to the view.

  mainScroller = [UIScrollView new]; mainScroller.frame = CGRectMake(0, 0, w, h); mainScroller.bounces = true; mainScroller.pagingEnabled = false; mainScroller.delegate = self; [self.view addSubview:mainScroller]; 

• Place a UIView and add it to your scrollview.

   contentView = [UIView new]; contentView.frame = CGRectZero; [mainScroller addSubview:contentView]; 

• Add subviews of your "contentView".

   UIView * unitView = [UIView new]; unitView.frame = CGRectMake(0, yOff, w, 280); [contentView addSubview:unitView]; 

• Resize both the contentView and scrollview to fit the content. Below w is the width of the view, and yOff is the total cumulative height of the content.

   contentView.frame = CGRectMake(0, 0, w, yOff); mainScroller.contentSize = CGSizeMake(w, yOff); 

• In your scrollViewDidScroll method add the following code:

    float y = mainScroller.contentOffset.y; contentView.transform = CGAffineTransformMakeTranslation(0, y); for (UIView * sub in contentView.subviews){ int index = (int)[contentView.subviews indexOfObject:sub]; float delay = index * 0.03; float duration = 1.0f - delay; [UIView animateWithDuration:duration delay:delay usingSpringWithDamping:0.8 initialSpringVelocity:0.7 options:UIViewAnimationOptionCurveEaseInOut| UIViewAnimationOptionAllowUserInteraction animations:^{ sub.transform = CGAffineTransformMakeTranslation(0, -y); } completion:^(BOOL finished){ }]; } 

The UIViewAnimationOptionAllowUserInteraction parameter allows you to interact with the content immediately. Change the delay, duration, spring humidification and spring speed variables to suit your needs.

The code can be further adapted to provide sensory detection; as it stands, a springy rebound occurs at the top of the scrollView and goes down through the views, which for shorter scrollViews are hardly noticeable.

EDIT: touch detection

If you want to enable touch detection, replace these lines with your scrollViewDidScroll method:

 int index = (int)[contentView.subviews indexOfObject:sub]; int deviation = abs(touchIndex - index); float delay = deviation * 0.03; float duration = 1.0f - delay; 

Where the new touchIndex variable is defined as follows:

 -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { //grab the location of the touch event CGPoint location = [scrollView.panGestureRecognizer locationInView:scrollView]; int yTouch = location.y; //grab y coordinate touchIndex = (yTouch - 100) / 100; //calculate the index of the cell, where 100 is the height of the cell } 

If you have dynamic cell heights, store them in an array, for example. 'selectedHeights'. Then update your scrollViewWillBeginDragging method to below, where the 'tally' float parameter is set to 70 to enable the title.

 -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { //grab the location of the touch event CGPoint location = [scrollView.panGestureRecognizer locationInView:scrollView]; int yTouch = location.y; //grab y coordinate float tally = 70.0f; for (int n = 0; n < selectedHeights.count; n++){ float cellHeight = [selectedHeights[n] floatValue]; tally += cellHeight; if (tally > yTouch){ touchIndex = n; break; } } }