NASA Checkerの「画像をタップする事で拡大させる機能」の実装方法

iPhone

NASA Checkerのver 1.0.2で、写真をダブルタップする事で拡大出来るという機能を追加したのだが、その実装方法を以下に記載したいと思う。

基本的な仕掛けとしては以下。

  • オリジナルと拡大した画像を表示するための二つのUIImageViewを事前に用意しておく
  • 拡大した画像のUIImageViewはalphaを0にして見えないようにしておく
  • オリジナル画像がダブルタップされたら、拡大した画像のUIImageViewのalphaを1にして見えるようにする

具体的には、まず以下のようにInterface Builderを使って、拡大した画像を表示するためのUIImageViewも配置しておく。
このとき"User Interaction Enabled"はチェックを外しておく。



以下がユーザのタップに応じて、拡大した画像の表示・非表示を切り替えるための実装。

// クラス定義
@interface FlickrDetailViewController : UIViewController {
    IBOutlet UIImageView *imageView;  // オリジナル画像用
    IBOutlet UIImageView *bigImageView; // 拡大画像用
    BOOL isBigImageVisible;  // 拡大画像の表示・非表示用フラグ
        ……
}

// タッチイベント補足用メソッド
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    if (isBigImageVisible) {
        // 拡大画像が表示されているので、拡大画像を非表示する
        UITouch *touch = [[event touchesForView:bigImageView] anyObject];
        if ([touch tapCount] == 1) {
            [self fadeInOutBigImage];
        }
    } else {
        // 拡大画像が非表示なので、拡大画像を表示する
        UITouch *touch = [[event touchesForView:imageView] anyObject];
        if ([touch tapCount] == 2) {  // ダブルタップのみを捕捉
            [self fadeInOutBigImage];
            // bigImageViewを全面に持って来る
            [self.view bringSubviewToFront:bigImageView];
        }
    }
}

// 拡大画像の表示を切り替えるメソッド
- (void)fadeInOutBigImage {
    // 表示・非表示のフラグを先に更新
    isBigImageVisible = !isBigImageVisible;
    
    // アニメーションを付けて画像を切り替える
    CGContextRef context = UIGraphicsGetCurrentContext();
    [UIView beginAnimations:nil context:context];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:1.0];
    // 拡大画像の表示・非表示処理
    [bigImageView setAlpha:(float)isBigImageVisible];
    [UIView commitAnimations];
    
    // User Interaction EnabledをON or OFFにする
    [bigImageView setUserInteractionEnabled:isBigImageVisible];
}

なお、このやり方はThe iPhone Developers CookbookのRecipe 2-5 (Using UIView Animations with Transparency Changes)を参考にしており、そのサンプルソースはコチラから入手可能である。

また、元の画像データをUIImageViewの大きさに合わせて適切に拡大・縮小する処理は、「アスペクト比（縦横比）を保ったまま、画像を拡大縮小する。 - 24/7 twenty-four seven」が参考になる。