Cocoaの日々

[前回] Cocoaの日々: 画像を横に並べたスクロールビューアの作成 [2] サンプル

前回の続き。今回は循環スクロールを実装する。

循環スクロール

「循環スクロール」とは画像を円環のようにつなげ合わせて、その一部を表示させ、スクロールできることを指す。

イメージ：

左右の端がなくどちらの方向にも延々とスクロールすることができるので無限スクロールと言っていいかもしれない。

実装

前回までの実装をベースに循環スクロールを実装する。ポイントは次の２点。
1. スクロール対象のエリアを大きく取る
2. 画像を循環表示させる

1. は具体的には UIScrollView.contentSize で設定する。今回はこれを非常に大きな数（10,000 x 80ピクセル程度）に設定することで擬似的に無限スクロールできるようにした。
2. は、例えば８枚の画像がある場合、９枚目の表示には１枚目の画像を使うといった処理。

基本的に前回のコードへ上記実装を加えれば循環スクロールが実現できる。実装はここで説明するよりもソースコードを見てもらった方が（言葉よりも）分かりやすいと思うのでそちらを参照のこと。

サンプル

静止画では分かりづらいが、サンプルをビルドして実行すると延々とスクロールできる動作が確認できる。


ソースコードは GitHub からどうぞ。
CirculationScroll at 2010-08-18 from xcatsan's iOS-Sample-Code - GitHub

- - - -

次回はこれに自動スクロールを加える。


2011-01-10 補足説明

ビューの配置イメージはこんな感じ。可視領域の両隣にもViewを配置しておく。
左へスワイプするとスクロールが始まる。右に隠れていたビューが画面に出てくる。
スクロール中は UIScrollViewDelegate の scrollViewDidScroll: が呼ばれる。１画像分の移動したらビューの再配置処理を開始する（CirculationScrollViewController.mの221行あたり）。
まず一番左のビューのX位置を右端へ変更する。ビューは配列で管理しているので、その配列内で左端、右端のビューがどこかを保持しておくために rightViewIndex_, leftViewIndex_ を使う。これらはビューの再配置に伴い変わっていく。
そして画像のリストから次に表示すべき画像を取得して右端のビューに割り当てる。180行あたりの scrollWithDirection: がこの処理を行っている。すべての画像が一巡して表示されているなら、一番最初の画像を右端へ割り当てることになる。こうすると画像のリストが循環してするようにみえる。

上記を左にしろ右にしろ繰り返すことで最終的に循環スクロールが完成する。


さらに画像を表示しているViewを格納している配列 viewList の扱いを実際の動きと合わせてみてみる。
viewList は一種の循環配列で、左端ビューの配列内の位置を leftViewIndex_, 右端ビューの配列内位置を rightViewIndex_ で管理している。初期状態は上記のようにわかりやすい対応となっている。
 左にスワイプすると右スクロールが発生。１画像分のスクロールが完了した時点でscrollWithDirection: が呼び出される。右スクロールの場合、左端のビューを表示上は右端へ移動する。leftViewIndex_ で左端のビューを取得した後、frame.origin.x を補正する。そして最後に leftViewIndex_, rightViewIndex_ の位置を補正する。右スクロールなのでそれぞれの値に+1を加える。rightViewIndex_ は配列の最大サイズをオーバーするので、剰余をとって０に戻す。それらが終わると下の状態になる。