Question

我目前有一个容器视图控制器，它是一个按钮的主页。按下此按钮后，我希望视图翻转和增长，类似于iPad上的iTunes。

主视图控制器布局：

enter image description here

翻转容器：

按下翻页按钮时，我打算使用此代码（在容器视图的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;
                    }
                }];

如果两个视图的大小相同，这很有效，我可以使用代码布局视图。 FrontVC和FlipVC是UIView的子类。

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

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

我的目标是什么：

理想情况下，我希望能够在故事板中设计翻转视图，并使'tile'增长，类似于iTunes：

iTunes Flip

在我的例子中，我希望它看起来像这样：

My Desired Outcome

我如何在故事板中设计它？如果我尝试制作视图控制器，我无法将其调整为我希望翻转大小视图控制器的大小

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

编辑：使用实际控件调整实际视图大小的一种方法可能是拍摄该视图的快照，在缩放/翻转时使用快照，并在最终完成块中切换图像真实的看法。那就是：

在用户点按图片时创建当前小视图的UIImage
创建最终视图的UIImage，以其自然大小呈现为上下文
在容器视图中使用两个图像，用于动画
在最终完成块中，从视图中删除imageView并将第二个视图现在放在self.view子视图中

Answer 2

我做了一个粗略的代码（完全不完美）（希望这是你正在寻找的）。看看吧。我创建了一个baseView和两个翻转视图，在第一次翻转之后，我增加了baseView的帧大小并在其上添加了第二个翻转视图。我不是Story Board的专家，所以我没有在这里使用它。

FlipTest

-anoop

在故事板中为“tile”创建更大的翻转侧视图

2 个答案: