0

現在、ボタンのホームである Container View Controller があります。これを押すと、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;
                    }
                }];

これは、2 つのビューが同じサイズである場合にうまく機能し、コードを使用してビューをレイアウトできます。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 フリップとまったく同じように見えます。デモ プロジェクトには 2 つの 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

編集：実際のコントロールを含む実際のビューのサイズ変更を回避する1つの方法は、そのビューのスナップショットを撮り、ズーム/反転中にスナップショットを使用し、最終的な完了ブロックで実際のビューの画像を切り替えることです. あれは：

  • ユーザーが画像をタップしたときに、現在の小さなビューの UIImage を作成します
  • 自然なサイズとしてコンテキストにレンダリングされた、最終的なビューの UIImage を作成します
  • コンテナ ビューで 2 つの画像を使用して、アニメーションを作成します。
  • 最後の完了ブロックで、imageViewをビューから削除し、2番目のビューをself.viewサブビューに入れます
于 2012-09-02T17:32:32.923 に答える
0

これについて大まかなコードを作成しました（まったく完璧ではありません）（それがあなたが探しているものであることを願っています）。それを見てください。baseView と 2 つのフリップ ビューを作成し、最初のフリップの後、baseView のフレーム サイズを大きくし、その上に 2 つ目のフリップ ビューを追加しました。私はストーリー ボードの専門家ではないので、ここでは使用していません。

フリップテスト

-アヌープ

于 2012-09-02T16:31:30.263 に答える