0

我目前有一个容器视图控制器，它是一个按钮的所在地。当按下它时，我希望视图翻转和增长，类似于 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：

iTunes 翻转

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

我想要的结果

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

4

2 回答 2

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 子视图中
于 2012-09-02T17:32:32.923 回答
0

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

翻转测试

-anoop

于 2012-09-02T16:31:30.263 回答