Cocoaの日々

画像を横に並べて指でスクロールできるちょっとしたビューアを作ってみる。
こんなイメージ。

実装イメージ

実装イメージはこんな感じ。表示したい画像が横１列に並んでいて、それを UIScrollViewで一部だけ表示してスクロールできるようにする。


指で左方向へドラッグすると画像が左へ動きスクロールしているように見える。左端の画像は一部が隠れ、右端に隠れていた画像が少しづつ見えてくる。

実装方法

一番簡単なのは表示する画像を横一列に並べて、その一部だけを UIScrollViewで表示する方法がある。この方法はあらかじめ画像数が分かっていて少数の場合は十分動作する。ただ画像が多い場合はその分メモリを使用するので現実的ではない。このため一工夫が必要となる。

そこで今回は UIImageView を下記のように並べて、スクロールの度に再配置する方法を考えてみた。

画面上に表示可能な画像数が４つだとすると、両側の２つを加えて計６つの UIImageView があれば良い。

これを起点にして実際の動作を考えてみる。まず左へスクロールしてみる。

すると [1] の左側が隠れはじめ、隠れていた[5]の一部がみえはじめる。

続けてスクロールするとやがて [1]は完全に画面の外側に隠れる。この時点をプログラムで検出する。

[1]が隠れたのが検出できたら、一番左側にある [0] を今度は一番右側へ配置しなおす。

最後に表示上の左端を表すマーカー（図上の<LEFT>）を更新する。すると表示４つ、両側２つの最初の形に戻る。


ビューの座標系視点でこのアイディアを確認するとこんな感じ。
左へスクロールするということは UIScrollViewの可視領域が右へ移動するということなので、図のように UIScrollView はだんだんと右へづれて行く。UIViewImageの再配置とは、表示位置(origin)を変更するということに他ならない（例：[0]の座標が最初のスクロールの後、x5に変更される）。


- - - -
このアイディアを元に次回から実装に入っていく。