簡易スライドビューア [4] 画面回転のサポート

[前回] Cocoaの日々: 簡易スライドビューア [3] ダブルタップで拡大

今回は画面回転をサポートしてみる。

回転処理後の位置と大きさ

お約束として（？）まずは shouldAutorotateInterfaceOrientation: をオーバライドして YESを返してみる。

-(BOOL)shouldAutorotateInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

するとこうなる。

これは画像が載っている UIScrollViewの位置と大きさが縦向き（Landscape）のままだから。

使っている UIScrollView を描いてみるとわかりやすい。
まずこれが最初の状態。オレンジの枠がベースとなる UIScrollView。青い点線の領域が実際に表示される部分になる。

その状態で横へ傾けるとこうなる。

オートローテーションでやってくれるのはベースとなる UIScrollViewの表示領域（青点線=frame）のみ。その中にある画像表示用の UIScrollViewや、contentSize（オレンジ枠線）は変更されない。これらオートローテーションの対象外となる部分は自前で調整してやる必要がある。こんな感じ。

リファクタリング

回転処理を入れるにあたって前回までのコードを少し変えた。具体的には３つの画像用 UIScrollViewを個別のメンバ変数で保持していたのをやめて配列で管理するようにした。

UIScrollView* previouScrollView_;
UIScrollView* currentScrollView_;
UIScrollView* nextScrollView_;

　　↓

NSMutableArray* imageScrollViews_;

理由は全ての UIScrollView に処理を施す場合、配列の方が扱いやすいから。また回転処理を入れる時にビューの左から並び順を考慮する必要がある為、配列には左のビューから順番に入っている状態とした。

画面回転処理

画面回転に対応するには UIViewController のいくつかのメソッドをオーバライドさせる。

shouldAutorotateToInterfaceOrientation:

どの向きに対応するかどうかを決めるメソッド。

（例）標準の縦と左横のみ対応する場合
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
 if (interfaceOrientation == UIInterfaceOrientationPortrait ||
            interfaceOrientation == UIInterfaceOrientationLandscapeLeft) {
            return YES;
        }
        return NO;
}

今回はすべての向きに対応させてみた。すなわち無条件に YES を返す。

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
 return YES;
}

次に最初に説明したように各ビューの位置と大きさを調整擦る必要がある。先程の図に位置と寸法を入れてみたのがこれ。
縦（Portrait）

横（Landscape）。

回転時に再計算するものは次の通り。
(1) 画像表示用 UIScrollView の位置と大きさ（図中、黄色い箇所）
配列 self.imageScrollViews に格納されている UIScrollView の frame を変更する。またcontentSizeも変える。

(2) ベースとなる UIScrollView の contentSize および contentOffset
内包する imageScrollView の大きさが変わるのでそれに合わせて contentSize を変更する。また表示位置 contentOffset も一緒に変えておく。

これらを行うメソッドを１つ用意した。

- (void)layoutScrollViews
{
 CGSize newSize = self.view.bounds.size;
 
 CGFloat x = (self.contentOffsetIndex-1) * newSize.width;
 for (UIScrollView* scrollView in self.imageScrollViews) {
  scrollView.frame = CGRectMake(x, 0, newSize.width, newSize.height);
  scrollView.contentSize = newSize;
  x += newSize.width;
 }
 
 self.scrollView.contentSize = CGSizeMake(
            [self.imageFiles count]*newSize.width, newSize.height);
 self.scrollView.contentOffset = CGPointMake(self.contentOffsetIndex*newSize.width, 0);
}

このメソッドは縦・横どちらでもうまく動作する。

回転中(*1)は回転対称の UIView の frame と bounds は連携しない。前者は回転前の位置と大きさを表し、後者は回転後の大きさを表す。layoutScrollViews は回転中の処理で呼び出すので、計算に利用する回転後の大きさは bounds から取得している。
(*1) willRotateToInterfaceOrientation:duration: 利用時

なお x が負の値（-1）から始まるのは、初期状態では左端の imageScrollViewはベースとなる UIScrollView の左にはみ出した状態になっているため。こんな感じ。

willRotateToInterfaceOrientation:duration

さて、layoutScrollView をいつ呼び出すべきか？

UIViewController を使った画面回転には２種類存在する。"one-step rotation" と "two-step rotation"。

詳しくはリファレンスを参照（英語だが図があってわかりやすい）。
View Controller Programming Guide for iOS: Custom View Controllers

今回は扱いが簡単な "one-step rotation" を使う。この場合、willRotateToInterfaceOrientation:duration: をオーバライドする。ここで layoutScrollViews を呼び出す。

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation 
 duration:(NSTimeInterval)duration
{
 [self layoutScrollViews];
}

これで終わり。

最後に imageScrollView に載せている UIImageView の autoresizingMask を設定しておく。

imageView.autoresizingMask =
   UIViewAutoresizingFlexibleLeftMargin  |
   UIViewAutoresizingFlexibleWidth       |
   UIViewAutoresizingFlexibleRightMargin |
   UIViewAutoresizingFlexibleTopMargin   |
   UIViewAutoresizingFlexibleHeight      |
   UIViewAutoresizingFlexibleBottomMargin;

こうすると親ビューの imageScrollViewの大きさが変わった場合でもレイアウトが崩れない。

サンプル実行

さて動かしてみよう。初期状態。

横に倒す。問題なし。

全方向回転させてもちゃんと表示される。何回・どの方向へ回してもちゃんと追随する。


ソースコード

GitHubからどうぞ。
EasyGallery at 2010-09-12 from xcatsan's iOS-Sample-Code - GitHub


- - - -
おくばせながら回転をやってみた。面白いなこれ。