UIScrollViewの使い方(スクロール編1)

このエントリーを含むはてなブックマークはてなブックマーク - UIScrollViewの使い方(スクロール編1)

書籍などでも、なぜかはしょられてしまう、UIScrollViewの項目。

ちゃんとした説明がなかなか見つからなかったので、
覚え書きがてらに、ぼちぼち書いていこうと思います。

まずは、とりあえず動くサンプルを作りましょう。

Xcodeの「新規作成」-> 「ファイル」->「新規プロジェクト」を選択。
プロジェクトの種類「Application」でテンプレート「View-based Application」を選択。
プロジェクト名は「Sample」ぐらいにしておきましょうか。

エディタが起動したら、まずはIBでGUIを設計します。
左カラムから「グループとファイル」->「Resources」-> SampleViewController.xib
をダブルクリックするとIBが立ち上がりますので、
ViewのウインドウにライブラリからUIScrollViewをドラックしてきて
ベッタリと貼りつけてください。

UIScrollView1

Xcodeに戻って、コーディングします。
まずは、SampleViewController.h に UIScrollViewのアウトレットを設定します。

SampleViewController.h

@interface SampleViewController : UIViewController
{
	IBOutlet UIScrollView *scrollView;
	UIImageView *imageView;
}

つぎにmファイル。viewDidLoad関数のコメントアウトを外して
次のコードを追加します。読み込む画像ファイル(test.jpg)は適当に用意してください。

SampleViewController.m

- (void)viewDidLoad {
        [super viewDidLoad];
	imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test.jpg"]];
        scrollView.contentSize = imageView.frame.size;
	[scrollView addSubview:imageView];
	[imageView release];
}

さて、最後にIBでUIScrollViewのアウトレットを接続します。
IBのプロパティ画面にあるscrollViewからView画面のUIScrollViewにむけて
ドラックして、両者を接続します。

UIScrollView3

これで準備完了です。
コンパイル&実行してみましょう。

UIScrollView4_

指定した写真が表示されたでしょうか?
画面より大きな画像の場合にはスクロールすることが出来ます。
(注!)まだ拡大縮小は出来ません。
写真が表示されなかった場合にはコード部分や、
アウトレットの接続をもう一度確認してみてください。

ここまでのコードをココにおいておきます。
参考にしてみてください。
scroll1.zip

次回は、コードの説明をします。
UIScrollViewの使い方 その2

3 Responses to “UIScrollViewの使い方(スクロール編1)”

  1. [...] UIScrollViewの使い方 その1 UIScrollViewの使い方 その2 UIScrollViewの使い方 その3 [...]

  2. [...] 前回のプログラムUIScrollViewの使い方(スクロール編1)までで、UIScrollViewを使って画像をスクロールするところまで出来るようになりました。 [...]

  3. [...] コンテンツへ移動 ホーム紹介 ← UIScrollViewの使い方(スクロール編1) UIScrollViewの使い方(拡大縮小編) [...]

Leave a Reply

You must be logged in to post a comment.