在情节提要中为“平铺”创建更大的反面视图答案

【问题标题】：Creating a larger flip-side view for 'tile' in storyboard在情节提要中为“平铺”创建更大的反面视图
【发布时间】：2012-08-19 23:48:25
【问题描述】：

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

主视图控制器布局：

翻转容器：

当按下翻转按钮时，我打算使用这段代码（在容器视图的视图控制器内）来翻转容器：

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

我的目标：

理想情况下，我希望能够在故事板中设计翻转视图，并让“磁贴”增长，类似于 iTunes：

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

我怎样才能在故事板中设计这个？如果我尝试制作一个视图控制器，我无法将其调整为我希望翻转大小的视图控制器的大小.

【问题讨论】：

您能否澄清情节提要的答案是否是您请求的一部分？我不知道或不使用 Storyboard，所以不可能回复这个问题，但是然后代码来做动画，这是一个不同的问题。
@DavidH 如果您添加一个通用回复，我会看看我是否可以调整它以与故事板一起使用。如果是这样，我会将您的答案标记为正确。
太棒了 - 完成另一个赏金项目，所以会在一两天内完成 :-)
谢谢，非常感谢。

标签： ios uiviewcontroller core-animation core-graphics storyboard

【解决方案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 子视图中

【讨论】：

只是一个快速的...随着视图调整大小，可以看到图像缩放。有没有办法用块颜色来调整框架的大小，然后淡入图像？
您必须使用 autoResizeMask 和/或图像 contentMode 选项。我也看到了这个，但不确定你想要的内容是什么——如果它的图片我可以调整我上传的内容。您也应该能够淡入图像。设置 contentView.backgroundColor，然后将 imageView alpha 设置为 0 开始，并使其在动画块中为 1。如果您无法按照自己的意愿获得它，请给我具体说明您想要的方式，我会看看我能做什么。
谢谢，我什至可以选择一个弹出视图控制器。您提供的代码和我当前的布局出现了很多剪辑错误。可能与图层的排列有关，但我对它的了解还不够多。
“问题”很可能是由于 containerView 经历的扩展，因此是您的视图。在我的编辑中查看建议。相信我，您可以完成这项工作，并且看起来很棒！
这是一个绝妙的主意。在添加任何新功能之前，我有一些新发现的错误需要修复，但是一旦这些错误被排序，我就会尝试一下。非常感谢您的帮助。

【解决方案2】：

我对此做了一个粗略的代码（一点也不完美）（希望它是你要找的）。看看它。我创建了一个baseView和两个flip view，在第一次flip之后，我增加了baseView的frame size，并在其上添加了第二个flip view。我不是Story Board的专家，所以我没有在这里使用它。

FlipTest

-anoop

【讨论】：