如何在 iOS 7 中复制弹跳气泡的消息

Question

当您在 iOS 7 中的消息应用程序中进行对话时，如果您向上或向下滚动，您会注意到气泡以及更多说明消息发送时间的文字会弹回原位。

我正在尝试在我自己的表格视图中复制它，但没有找到方法。

我假设它使用的是 UIDynamics，但我不确定如何将其与滚动和内容弹跳联系起来。

任何帮助将不胜感激

Answer 1

如果您想自己复制该效果，则需要 UIKit Dynamics。 我本人对这种效果很感兴趣，并在今年的 WWDC 上对此进行了解释。

看看 WWDC Session 217: Exploring Scroll Views on iOS 7

网上也有阅读使用组件，如THSpringyCollectionView

Answer 2

我也对这种效果很感兴趣，在我对网络的研究过程中，我发现了这个教程 - http://www.objc.io/issue-5/collection-views-and-uidynamics.html 它正在实现相同的想法。

Answer 3

您可以像这样为滚动视图中的内容添加弹性反弹：

1. 设置 UIScrollview 并添加到您的视图中。

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

2. 布局 UIView 并将其添加到您的滚动视图中。

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

3. 为您的“contentView”添加子视图。

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

4. 调整 contentView 和 scrollview 的大小以适应内容。 w 下方是视图宽度，yOff 是内容的总累积高度。

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

5. 在您的 scrollViewDidScroll 方法中，添加以下代码：

    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){
                    }]; 
    }
   

UIViewAnimationOptionAllowUserInteraction 动画选项允许您立即与内容进行交互。调整延迟、持续时间、弹簧阻尼和弹簧速度变量以满足您的需求。

代码可以进一步调整以允许触摸检测；就目前而言，弹性反弹起源于 scrollView 的顶部并向下穿过视图，这对于较短的 scrollViews 几乎不明显。

编辑：触摸检测

如果您想允许触摸检测，请在您的 scrollViewDidScroll 方法中替换为这些行：

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

新变量 touchIndex 的定义如下：

-(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

}

如果您有动态单元格高度，请将它们存储在数组中，例如'选定的高度'。然后更新下面的 scrollViewWillBeginDragging 方法，其中“tally”浮动设置为 70 以允许标题。

-(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;
        }
    }
}