要理解我要解释的内容，最好的方法是打开 Google+ 应用程序，然后点按主流帖子中显示的帖子背景中的任意位置。

当您点击它时，整个帖子会以漂亮的动画自动移动到屏幕中央，并在其下方加载帖子的评论。

我认为这是一个常见的 UIViewController 包含场景，其中一个 UIViewController 在另一个里面。但是帖子如何动态地移动它并在包含的 View Controller 中“转移”自己呢？

我已经尝试创建一个简单的按钮并将 UIViewController 显示为彼此的弹出窗口，但不知道如何执行 Google+ 应用程序(和其他应用程序)的操作。

更新

这是屏幕截图。

正如您在点击帖子时看到的那样，帖子向上滑动并成为一个新的包含 UIViewController。

最佳答案

正如已经指出的那样，实现此 UI 的方法有很多，但一种方法是将 View 从 tableview 单元格中取出，将其移动到某个新的背景上，然后更改其框架。当你把它放回去时，只需颠倒这个过程。

更详细一点，可能如下:

1. 在单元格中，我有一个容器 View ，它是一个 ScrollView (通常禁用其用户交互)。

2. 当用户点击它时，

   • 创建一个占据整个屏幕的透明背景 View ；

   • 为该背景提供一个点击手势识别器，可以在以后反转该过程；

   • 将单元格的容器 View 从单元格移动到这个新的背景 View (使用 convertRect 所以它还没有移动)；

   • 通过转换为容器的轻微收缩设置动画(一种微妙的效果，让您产生在 View 上“下推”的效果)；

   • 在该动画的完成 block 中，启动一个新动画:

     • 恢复身份转换；

     • 将背景色设置为基本不透明(但并非完全不透明)的颜色；

     • 动画显示容器 View 的大小以占据更多屏​​幕

     • 继续并在该容器 View 上启用用户交互，以便您可以四处滚动；

3. 在我们的背景上为点击手势设置一个处理程序来反转该过程。

因此:

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:NO];

    PostCell *cell = (id)[tableView cellForRowAtIndexPath:indexPath];

    // create subview to obscure the table view behind us

    UIView *backdropView = [[UIView alloc] initWithFrame:self.view.bounds];
    backdropView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:backdropView];
    self.backdropView = backdropView;

    // add a tap gesture so we can reverse the process

    [backdropView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self
                                                                              action:@selector(handleTapGesture:)]];

    // move the cell's container view to the backdrop view, preserving its location on the screen
    // (so it doesn't look like it moved)

    self.viewToMove = cell.containerView;
    self.viewToMoveOriginalCell = cell;
    self.viewToMoveOriginalFrame = cell.containerView.frame;

    // figure out where this goes on the backdrop

    CGRect frame = [self.viewToMoveOriginalCell convertRect:self.viewToMoveOriginalFrame
                                                     toView:self.backdropView];

    // move it there (though it won't appear to move yet, we're just changing its superview)

    [self.backdropView addSubview:self.viewToMove];
    self.viewToMove.frame = frame;

    // now do the animation

    [UIView animateWithDuration:0.25
                          delay:0.0
                        options:0.0
                     animations:^{

                         // first shrinking it a bit

                         self.viewToMove.transform = CGAffineTransformMakeScale(0.95, 0.95);
                     }
                     completion:^(BOOL finished) {

                         // finally restoring the size and making it bigger
                         // (and reveal the backdrop that obscures the tableview)

                         [UIView animateWithDuration:0.5 animations:^{
                             CGFloat horizontalMargin = (self.view.bounds.size.width - frame.size.width) / 2.0;
                             backdropView.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
                             self.viewToMove.transform = CGAffineTransformIdentity;
                             self.viewToMove.frame = CGRectMake(horizontalMargin, kVerticalMargin, self.view.bounds.size.width - 2.0 * horizontalMargin, self.view.bounds.size.height - 2.0 * kVerticalMargin);
                         }];

                         self.viewToMove.userInteractionEnabled = YES;
                     }];
}

- (void)handleTapGesture:(UITapGestureRecognizer *)gesture
{
    [UIView animateWithDuration:0.5
                          delay:0.0
                        options:0
                     animations:^{

                         // in case user scrolled in content view, scroll back

                         [self.viewToMove setContentOffset:CGPointZero animated:YES];

                         // figure out where to resize view on container view so it's
                         // going to end up where it will end up in the cell

                         CGRect frame = [self.viewToMoveOriginalCell convertRect:self.viewToMoveOriginalFrame
                                                                          toView:self.backdropView];
                         self.viewToMove.frame = frame;

                         // make the back drop appear to gracefully disappear

                         self.backdropView.backgroundColor = [UIColor clearColor];

                         // shrink content view a tad in the process

                         self.viewToMove.transform = CGAffineTransformMakeScale(0.95, 0.95);
                     }
                     completion:^(BOOL finished) {

                         // when done with that animation ...

                         [UIView animateWithDuration:0.25
                                               delay:0.0
                                             options:0
                                          animations:^{

                                              // restore the size of the content view

                                              self.viewToMove.transform = CGAffineTransformIdentity;
                                          }
                                          completion:^(BOOL finished) {

                                              // when all done, put the content view back
                                              // in the cell

                                              [self.viewToMoveOriginalCell addSubview:self.viewToMove];
                                              self.viewToMove.frame = self.viewToMoveOriginalFrame;

                                              // turn off its user interaction again 

                                              self.viewToMove.userInteractionEnabled = NO;

                                              // and now safely discard the backdrop

                                              [self.backdropView removeFromSuperview];
                                          }];
                    }];
}

如您所知，这都是标准的表格 View 等。如果你想使用 View Controller 包含(例如，如果 View 有重要的用户交互)，你也可以这样做。它不会影响单元格容器 View 的增大/缩小方面的用户体验。

此外，这一切都是非自动布局。您可以使用自动布局来做到这一点，但更麻烦，恕我直言，因为您可能必须删除和添加约束，但肯定可以做到。

关于iphone - UIViewController 包含动画，如 Google+，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16989516/