2012/05/27更新

[XCODE] UIScrollViewを使ってみた

今日はiPhoneアプリケーションにおいて、スクロールビューを使ったアプリ作成の方法を学んだので、ブログに残しておきたいと思います。
スクロールビューの設定、スクロールについて、ズームについてなどをサンプルプログラム付きで記載しました(*ﾟ▽ﾟ)ﾉ

f:id:yoheiM:20110907184429j:image

スクロールビューとは

スクロールビューとは、iPhoneの画面には収まりきらない内容（画像など）を表示する際に利用すると便利な、Viewの一つです。ドラッグして内容をスクロールしたり、ピンチジェスチャーで内容の拡大縮小を行うことが出来ます。

スクロールビューの構造

スクロールビューは、スクロールを実現するUIScrollViewと、表示する内容を保持したUIViewの2つで構成されます。表示する内容が複数ある場合には、UIScrollView1個と、表示内容複数個の構成もありです。

UIScrollViewのサイズはiPhoneの画面サイズ以内として、表示内容はUIScrollViewのサイズ以上とすることで、スクロールするビューを表現出来ます。ブログトップの画像がそのイメージです。

まずはUIScrollViewを追加する

UIScrollViewをInterface Builderかプログラムから作成します。今回は、Interface Builderから作成してみました。

f:id:yoheiM:20110907184430p:image

この際に、ズーム可能な範囲を指定します。Zoom MinとZoom Maxです。

その他にも、スクロール可能方向や、減速速度の設定など色々と設定が可能です。UIScrollViewの設定内容は、UIScrollView Class Referenceを参照して下さい。

あっもちろん、Interface Builderで設定したUIScrollViewとUIViewControllerのviewまたは、定義した変数との関連付けを行って下さい。

続いてスクロールするコンテンツを設定する

スクロールするコンテンツをプログラムで追加します。以下は、UIViewControllerのviewDidLoadedメソッドで、Viewが読み込まれた時点で、表示するコンテンツを生成して、UIScrollViewに設定しています。

UIImage *aImage = [[UIImage imageNamed:@"sea001.jpg"] autorelease];
scrolledView1 = [[[UIImageView alloc] initWithImage:aImage] autorelease]; // scrolledView1 is a field var.
self.sView.contentSize = scrolledView1.frame.size;
[self.sView addSubview:scrolledView1]; // sView is UIScrollView's instance.

ここでは画像を読み込んで、UIImageViewのインスタンスを作成しています。

そして次に、UIScrollViewにスクロール範囲を指定する必要があるので、読み込んだUIImageViewのサイズをスクロール範囲として設定しています。

最後に、sViewという変数(UIScrollView)に、上で作成したUIImageViewを追加する事で、表示するコンテンツをUIScrollViewに設定しています。

さて起動

上記作業が終わったらもう動きますので、起動してみます。スクロールビュー上でドラッグする事で、コンテンツが動くはずです。

つづいてズーム対応

ピンチジェスチャーでズームを行うには、UIScrollViewのデリゲートを設定する必要があります。デリゲートの以下メソッドで、ズーム対象のコンテンツ（上記ではUIImageView）を指定します。

(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

実装例は以下となります。

ヘッダーファイルでは、デリゲートを指定します。

#import <UIKit/UIKit.h>
@interface ScrollViewController : UIViewController 
  <UIScrollViewDelegate> {
  UIScrollView *sView;
  UIView *scrolledView1;
}
@end

実装ファイルでは、デリゲートのうち、必要なメソッドの振る舞いを記述します。

#pragma mark -
#pragma mark UIScrollViewDelegate implementation
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
  return scrolledView1;
}

ズーム対象のView （ここでは画像表示するView）を返します。

また、Interface Builderでは、設定しているUIScrollViewのデリゲートを設定します。これ忘れると、もちろん動かなーい(*´∇｀*)

さてさてもういっかい起動

起動してピンチジェスチャーをすると、なんとズーム出来るじゃ無いですか。拡大縮小範囲は、最初に設定したZoom Min / Maxです。

その他に、ScrollViewで設定する必要があるかもしれないこと

以下は、必要に応じて設定する必要があるかもです。その場合には、Scroll View Programming Guide for iOSを参照してみて下さい。

縦スクロールのみ / 横スクロールのみにしたい
UIScrollView内で表示するコンテンツで、上下左右に余白を取りたい
スクロール時に表示されるスライダー(indicator)のスクロール可能範囲を調整したい
拡大縮小率を指定したい
拡大縮小を禁止したい

最後に

スクロールビューは、狭いiPhone画面上をより広く使うことが出来る、魅力的なViewですね。活用したアプリを作れると、便利アプリが作れルカも知れません♪(´ε｀ )