ios - 在 Storyboard中为 'tile' 创建更大的翻转 View

Question

我目前有一个容器 View Controller ，它是一个按钮的所在地。当按下此按钮时，我希望 View 翻转并放大，类似于 iPad 上的 iTunes。

主视图 Controller 布局:

翻转容器:

当按下翻转按钮时，我打算使用此代码(在容器 View 的 View Controller 内部)来翻转容器:

FrontVC *cb = [[FrontVC alloc]initWithFrame:CGRectMake(0, 0, 92, 65)];
FlipVC *cf = [[FlipVC alloc]initWithFrame:CGRectMake(0, 0, 92, 65)];

 [UIView transitionWithView:self.view
                  duration:1
                   options:UIViewAnimationOptionTransitionFlipFromLeft
                animations:^{

                    // Remove last view
                    for (UIView *subview in self.view.subviews) {
                        [subview removeFromSuperview];
                    }
                    [self.view addSubview:(displayingPrimary ? cb: cf)];

                }
                completion:^(BOOL finished) {
                    if (finished) {
                        displayingPrimary = !displayingPrimary;
                    }
                }];

如果两个 View 大小相同，则效果很好，并且我可以使用代码布局 View 。 FrontVC 和 FlipVC 是 UIView 的子类。

我正在考虑做这样的事情来将 View 移动到屏幕中心，但我被困在那里。嘿，我什至不知道这是否有效! 有更好的方法吗？

if (!displayingPrimary) {
                        self.view.center = CGPointMake(320.0f, 480.0f);
                        cb.center = CGPointMake(320.0f, 480.0f);
                    }
                    else
                    {
                        self.view.center = CGPointMake(59, 324);
                    }

我的目标:

理想情况下，我希望能够在 Storyboard 中设计翻转 View ，并使“图 block ”增长，类似于 iTunes:

而在我的示例中，我希望它看起来像这样:

我怎样才能在 Storyboard中设计这个？如果我尝试制作一个 View Controller ，我无法将其大小调整为我希望翻转大小 View Controller 的大小.

Answer 1

FlipView项目非常精致，看起来和 iTunes 翻页一模一样。我在演示项目中使用了两个 imageView。实际翻转代码如下:

- (IBAction)flip
{
    UIView *fromView, *toView;
    CGPoint pt;
    CGSize size;
    CGFloat sense;

    if(showingView == a) {
        fromView = a;
        toView = b;
        pt = BORIGIN;
        size = BRECT.size;
        sense = -1;
    } else {
        fromView = b;
        toView = a;
        pt = AORIGIN;
        size = ARECT.size;
        sense = 1;
    }

 [UIView animateWithDuration:TIME/2 animations:^
    {
        CATransform3D t = CATransform3DIdentity;
        t.m34 = M34;
        t = CATransform3DRotate(t, M_PI_2*sense, 0, 1, 0);

        containerView.layer.transform = t;
        containerView.frame = CRECT; // midpoint
        NSLog(@"Container MID Frame %@", NSStringFromCGRect(containerView.frame));
    }
    completion:^(BOOL isFinished)
    {
        toView.layer.transform = CATransform3DMakeRotation(M_PI*sense, 0, 1, 0);
        [UIView animateWithDuration:TIME/2 animations:^
            {
                [fromView removeFromSuperview];
                [containerView addSubview:toView];

                CATransform3D t = CATransform3DIdentity;
                t.m34 = M34;
                t = CATransform3DRotate(t, M_PI*sense, 0, 1, 0);

                containerView.layer.transform = t; //finish the flip
                containerView.frame = (CGRect){ pt, size};
            } completion:^(BOOL isFinished)
            {
                    NSLog(@"Container Frame %@", NSStringFromCGRect(containerView.frame));
                    NSLog(@"A Frame %@", NSStringFromCGRect(b.frame));
                    NSLog(@"B Frame %@", NSStringFromCGRect(b.frame));

                    toView.layer.transform = CATransform3DIdentity;
                    containerView.layer.transform = CATransform3DIdentity;
                    showingView = showingView == a ? b : a;
            }];
    }];

}

http://dl.dropbox.com/u/60414145/FlipView.zip

编辑:解决调整具有实际控件的实际 View 大小的一种方法是拍摄该 View 的快照，在缩放/翻转时使用快照，并在最终完成 block 中切换图像真实的景色。即:

• 当用户点击图像时创建当前小 View 的 UIImage
• 创建最终 View 的 UIImage，以其自然大小渲染到上下文中
• 使用容器 View 中的两个图像来制作动画
• 在最后的完成 block 中，从 View 中删除 imageView 并将第二个 View 放在 self.view subview 中