画像ビューワの作り方 (2) - フリックによる画像の移動

前回に引き続き、画像ビューワの作り方を解説していこう。今日は、画像を表示してフリックによるスクロールに対応するところまでだ。

ビューコントローラの宣言

この画像ビューワでは、画像の読み込みやフリックへの対応といった処理は、ビューコントローラで行っている。まずは、その定義を紹介しよう。次のような宣言にした。

List 1.

@interface ImageViewController : UIViewController
{
    int _index;

    IBOutlet UIScrollView*  _mainScrollView;

    IBOutlet UIView*        _innerView;
    IBOutlet UIScrollView*  _subScrollView;
    IBOutlet UIImageView*   _imageView0;
    IBOutlet UIImageView*   _imageView1;
    IBOutlet UIImageView*   _imageView2;
}

画像ビューワの内部状態を管理するためのインスタンス変数が、1つだけある。_indexという名前の変数だ。この変数は、現在何枚目の画像を表示しているかを表すものだ。従って、中央に表示する画像は_indexにあたるもの。左の画像は_index-1、右の画像は_index+1ということになる。

あとは、Interface Builderで配置したビューに対するアウトレットだ。

また、Interface Builderでの設定も確認しておこう。まず、UIScrollViewのデリゲートとして、このビューコントローラを接続する。フリック操作の入力は、UIScrollViewのデリゲートメソッドとして受け取るからだ。

さらに、前回説明し忘れたちょっとしたテクニックを紹介しよう。この画像ビューワでは横に3枚画像を並べるのだが、それらがぴったりくっついて配置されていると、見づらい。そこで、それぞれの画像の間に余白を挟んで配置した。だが、何も考えずにこのまま動かすと、UIScrolViewによるページングの位置がずれてしまう。ページングでは、UIScrollViewの大きさにあわせてページの大きさを決めるからだ。では、どうすればいいか？こういうときは、UIScrollViewの大きさを、余白分広げてやればいい。今回の場合は余白を20ピクセルにしたので、メインスクロールビューの大きさを、画面より横に20ピクセル大きくしている。これにより、期待通りのページングが行われることになる。

フリック操作の受付

続いて、実装に入る。まず初期化として、画像3枚用のUIImageViewを持っているビューを、メインスクロールビューに設定する。このとき、スクロールビューのコンテントサイズの設定も行っておこう。さらに、インスタンス変数の初期化も行っておく。

List 2.

- (void)viewDidLoad
{
    // innerViewをメインスクロールビューに追加
    [_mainScrollView addSubview:_innerView];

    // メインスクロールビューのコンテントサイズを設定
    _mainScrollView.contentSize = _innerView.frame.size;

    // インデックスの初期値として-1を設定
    _index = -1;
}

次に、UIScrollViewDelegateメソッドを実装する。今回実装するのは、scrollViewDidEndDragging:willDecelerate:と、scrollViewDidEndDecelerating:の2つだ。これらが呼び出されたことによって、ユーザがフリック操作を行ったと判定しているのだ。

これらの中でやっていることは、ただ一つ。画像の更新を行う_renewImagesメソッドを呼び出すことだ。このメソッドについては、次で説明する。

List 3.

- (void)scrollViewDidEndDragging:(UIScrollView*)scrollView
        willDecelerate:(BOOL)decelerate
{
    // メインスクロールビューの場合
    if (scrollView == _mainScrollView) {
        if (!decelerate) {
            // 画像の更新
            [self _renewImages];
        }
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView
{
    // メインスクロールビューの場合
    if (scrollView == _mainScrollView) {
        // 画像の更新
        [self _renewImages];
    }
}

画像の更新

さて、画像ビューワの処理の中心となるのが、これから説明する_renewImagesメソッドだ。

このメソッドで行う処理は、大きく2つに分かれる。まず、ユーザのフリック操作によって、前の画像に移動したか、次の画像に移動したかを判定する。次に、画像が移動した場合は、3枚の画像の更新処理を行うのだ。

まずは画像移動の処理を行うソースコードを紹介しよう。

List 4.

- (void)_renewImages
{
    CGRect      rect;
    NSString*   fileName;
        NSString*   path;
    UIImage*    image;

    // 現在のインデックスを保存
    int oldIndex = _index;

    // コンテントオフセットを取得
    CGPoint offset;
    offset = _mainScrollView.contentOffset;
    if (offset.x == 0) {
        // 前の画像へ移動
        _index--;
    }
    if (offset.x >= _mainScrollView.contentSize.width - CGRectGetWidth(_mainScrollView.frame)) {
        // 次の画像へ移動
        _index++;
    }

    // インデックスの値をチェック
    if (_index < 0) {
        _index = 0;
    }
    if (_index > _maxPage - 1) {
        _index = _maxPage - 1;
    }

    if (_index == oldIndex) {
        return;
    }

    ...

フリックで移動したかどうかは、メインスクロールビューのコンテントオフセットのx座標の値で判定する。xが0であれば、いちばん左までスクロールされたので、前の画像に移動する。xが右側の画像を表示している値であれば、次の画像に移動するのだ。このようにして、_indexの値を更新している。

画像が移動した場合は、3つの画像の更新処理を行う。長くなってしまうので、左側の画像の更新を行うところだけ紹介しよう。

List 5.

    ...

    //
    // 左側のimage viewを更新
    //

    // 最初の画像のとき
    if (_index == 0) {
        // 左側のimage viewは表示しない
        rect = CGRectZero;

        image = nil;
    }
    // 最初の画像以外のとき
    else {
        // 左側のimage viewのframe
        rect.origin = CGPointZero;
        rect.size = self.view.frame.size;

        // 左側のimage viewの画像の読み込み
        fileName = [NSString stringWithFormat:@"%03ds", _index - 1];
        path = [[NSBundle mainBundle] pathForResource:fileName ofType:@"jpg"];
        image = [[UIImage alloc] initWithContentsOfFile:path];
    }

    // 左側のimage viewの設定
    _imageView0.frame = rect;
    _imageView0.image = image;
    [image release];

    ...

_indexの値をもとに、画像とそれを表示するためのフレームの大きさを決定している。_indexが0であれば、左には画像を表示しない。それ以外の場合は、_index-1の画像を表示するのだ。画像の読み込みは、今回は画像のファイル名を「001s.jpg」という感じにしたので、数値を当てはめてファイル名を決定し読み込んでいる。

このような処理を、真ん中と右の画像に対しても行ってやる。

最後に、メインスクロールビューの更新を行う。コンテントサイズとコンテントオフセットを更新してやるのだ。

List 6.

    ...

    //
    // メインスクロールビューの更新
    //

    // コンテントサイズとオフセットの設定
    CGSize  size;
    size.width = CGRectGetMaxX(_imageView2.frame) > 0 ?
            CGRectGetMaxX(_imageView2.frame) + 20.0f :
            CGRectGetMaxX(_subScrollView.frame) + 20.0f;
    size.height = 0;
    _mainScrollView.contentSize = size;
    _mainScrollView.contentOffset = _subScrollView.frame.origin;
}

コンテントサイズは、いちばん最初または最後の画像を表示しているときは画像2枚分、それ以外のときは画像3枚分となる。コンテントオフセットは、サブスクロールビューが表示されるところにあわせてやればいい。

これで、フリックによる画像ビューワは出来上がりだ。次回は、ピンチイン／アウトによる拡大について議論しよう。

ここまでのソースコード: Image-1.zip