Cocoaの日々

[前回] Cocoaの日々: UIScrollView - ページスクロールで空白を挟む

前回のブログのコメントで KatokichiSoft さんから面白い情報をいただいた。

iPhone/iPad – AppStore like UIScrollView with paging and preview | blog.sallarp.com

UIScrollView を使って AppStore のような画像表示をする方法について書かれている。サンプルをダウンロードして実行するとこんな感じ。


これはなかなかいい。真似してみよう。

clipsToBounds = NO

ソースコードを読んでわかったポイントは次の２つ。

1. UIScrollView を画面より小さくする
2. UIScrollView.clipsToBounds = NO とする

1. は例えば 320x460 の画面の場合、この領域いっぱいにするのではなく 240x380 などと小さくする。その上で clipsToBounds=NO すると本来表示されない UIScrollView.frame の外側にサブビューが描画される。

なるほど。その手があったか。前回のサンプルに組み込んでみよう。

サンプル実装

前回まではこんな感じ。
scrollView.frame と画面の大きさが一致していた（青い点線）。
これを下の様に変える。

scrollView.frame はそのままだが、画面の大きさ（赤い点線）よりも小さくする。

変更したのは先に上げたポイントの２つだけ。

まず Interface Builder で UIScrollView の大きさを小さくした。

以前は画面いっぱいに広げていたのを CGRect(40,40,240,380)とした。

次にコードを１文追加。

self.scrollView.clipsToBounds = NO;

これで終わり（※実際にはピクセル数値を直接記述したところがあったのでそれは直した）。

実行してみよう。

隣が表示された。スクロールしても問題なし。

ソースコード

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


- - - -
紹介してもらったソースコードはその他、ライブラリ化するにあたっての方法についても参考になった（デリゲートの導入と、UIViewController ではなく カスタムUIViewをベースとするなど）。なおそのソースでは画像間の隙間はプログラム的に作っているのではなく、単にビューよりも小さな画像を表示させていることによる。この為、大きな画像を表示させると表示が崩れる（サンプルだから別にいいのだが、隙間を入れる処理は入っていないということで）。