Storyboardから始めるiPhoneアプリ開発

Twitterボタン
Twitterブログパーツ

Xcodeやobjective-c、Storyboardについて得た知識などiPhoneアプリ開発の体験記を配信


草刈りパニック 海軍王アカデミー シンプルゆめ日記 シンプル表計算CelLion 魔球スラッガー 地頭を鍛えるでんしゃ算数 Don't 100
2012/02/27(月)

[Xcode][objective-c]UIScrollViewを使ってスワイプでページを切り替える方法

カテゴリ:Xcode / objective-c
==<<管理者環境>>==
MacOSX ver.10.7.3
Xcode ver.4.2.1
iOSシミュレータ ver.5.0
==============

スワイプでページをめくるように切り替える方法を紹介します。
まずは完成イメージから。

paging.png

左から1(ピンク)→2(みどり?)→3(黄色)と3枚の画像を「1枚=1ページ」として切り替えています。
キャプチャが難しくて分かりにくいですが、真ん中の2枚はそれぞれ1→2、2→3へ切り替え中です。下の方にスクロールバーが見えていますね。

では手順です。
手順0(準備)
  1. Storyboard上にViewControllerを配置しておきます
    ※新規プロジェクト作成(SingleView)した状態
    ※ViewController.h & 〜.mを使用します
  2. 縦460px横320pxの画像を3枚、プロジェクトに放り込んでおきます
    ※ファイル名は「img1.png」「img2.png」「img3.png」とします

スクリーンショット 2012-02-27 22.38.46


手順1 ViewController.mにScrollViewに表示させる画像を設定するコードを書く
@implementation ViewController
{
IBOutlet UIScrollView *scrollView;
}

const CGFloat kScrollObjHeight = 460.0;//(※1)1pageの高さ
const CGFloat kScrollObjWidth = 320.0;//(※2)1pageの幅
const NSUInteger kNumImages = 3; //(※3)総page数

//ScrollViewの設定
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView subviews];

CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;

curXLoc += (kScrollObjWidth);
}
}

//スクロールの総範囲
[scrollView setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), kScrollObjHeight)];
}

//画像のサイズ取得とScrollViewへ追加
- (void)viewDidLoad {
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:@"img%d.png", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
[scrollView addSubview:imageView];
}

[self layoutScrollImages];
}
//…その他メソッドなど
@end

※上記コードの、(※1)〜(※3)の数値を自分の環境に沿うように設定してしまえば、あとの部分は気にせずコピペしてもちゃんと動いちゃうと思います。


手順2 StoryboardでViewControllerにUIScrollViewオブジェクトを乗せる

スクリーンショット 2012-02-27 22.27.23


手順3 メソッドファイルで定義したscrollViewのアウトレットを行う

スクリーンショット 2012-02-27 23.23.11


手順4 UIScrollViewの設定を行う
  1. スクロールバー(水平、垂直)を表示するかどうか
  2. スクロールを「ページ単位」とするかどうか
  3. スワイプでスクロール範囲の端まで来た時、その先の余白まで表示させるか(ビヨーンって)

スクリーンショット 2012-02-27 22.39.47_2
正直「2」以外はどうでもいいです。
2にしっかりチェックを入れないと「ページ単位」でスクロールしてくれません。
他の項目もいろいろ設定出来るみたいなので、試してみて下さい。


以上で終了です。
案外簡単に出来るものですね。
実は私も今日初めてこのScrollViewという文化に触れたので、実際良くわかっていません。

今回は、ScrollViewだけでページングを実装しましたが、iPhoneの待ち受け画面等で使われているPageControl(・・・←みたいなの)を使って実装する方法もあります。
しかし、今のところ私はお手上げなので、調査完了次第ご紹介する事にします。

[2012/03/20追記]
PageControl(・・・←みたいなの)を使って実装する方法を記事にしました。
UIScrollViewとUIPageControlを組み合わせてスワイプでページを切り替える方法


ちなみに今回はAppleのサンプルコード「Scrolling」を参考(パクった)にしました
関連記事
  1. 2012/02/27(月)|
  2. Xcode / objective-c
  3. | トラックバック:0
  4. | コメント:4
<<iPhoneアプリ『Akinator』 | ホーム | GIMPにスクリプトを追加する方法@mac>>

コメント

非常に助かりました。
ありがとうございます。
  1. 2012/06/28(木) 02:48:39 |
  2. URL |
  3. 名前はまだない #-
  4. [ 編集 ]

動きました。感動です!
  1. 2012/08/31(金) 20:09:17 |
  2. URL |
  3. 我輩は猫である #aAhTum3g
  4. [ 編集 ]

>我輩は猫であるさん

>我輩は猫であるさん

ブログ訪問ありがとうございます。
ちゃんと動作したみたいで良かったです。
  1. 2012/08/31(金) 20:57:56 |
  2. URL |
  3. Casual App Team #-
  4. [ 編集 ]

助かりました

ScrollViewの使い方を色々と思案していたのですが、すごく解りやすいく書かれているので いや〜 本当に助かりました。
  1. 2012/12/16(日) 22:28:10 |
  2. URL |
  3. いいですねぇ #-
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://blog.casualappteam.com/tb.php/47-087bd80b
この記事にトラックバックする(FC2ブログユーザー)

検索フォーム

アプリ紹介記事

おすすめ書籍

入門者向けおすすめサービス

iPhoneアプリ開発やリリースに必須と思われるサービスです。開発と並行してリリースの環境を整える必要があります。

    シティバンク
    アプリから得られる収入やアプリ製作関連の支出を管理する口座が必要です。アプリから得られる収入は日本円だけではなく米ドル等の外貨の場合がありますので、グローバルで貨幣の両替が簡易な銀行口座を選択します。一旦はここで無難です。

    FC2ブログ
    アプリをリリースする際、サポートサイトが必須です。無料で使い勝手の良いFC2ブログがおすすめです。

    リンクシェア
    アプリの下によくある広告のあれです。ここと提携してアプリ内に広告を設置することで、広告収入を得ることができます。少しでも下心があるなら必須です。

    三井住友VISAカード
    デベロッパー登録やその他経費をクレジット払いにしておけば支払いの履歴も残りますし、一々振り込む手間が省けます。三井住友VISAカードならcitiバンクを支払い口座に指定できますし、なにかと便利です。

中級者向けおすすめサービス

iPhoneアプリをリリースしても、ダウンロードされなければ意味がありません。さらに集客力・発信力を向上させましょう。

    お名前.com
    格安で独自ドメインを取得することができます。自社サイト・個人サイトを作成する際にご利用ください。

    さくらのレンタルサーバ
    レンタルサーバーです。webサイト用もしくはアプリのデーターサーバー用にどうぞ。

    ロリポップ!レンタルサーバー
    レンタルサーバーです。webサイト用もしくはアプリのデーターサーバー用にどうぞ。

その他のおすすめサービス

私のオススメのサービスです。
参考なれば幸いです。


1位   リクナビNEXT

iPhoneアプリエンジニアは求人市場で需要があります。一般企業はアプリを広告として使うケースがありますから。私自身もリクナビNEXTを利用しています。


2位   随時更新していきます。

QRコード

QR

全記事表示リンク

全ての記事を表示する

カテゴリ

最新記事

月別アーカイブ

プロフィール

CasualAppTeam

Author:CasualAppTeam
初めまして。
iPhoneアプリ開発についてブログを綴っていきます。
xcodeやobjective-c,storyboardなどについて詳しく書いていきます。

最新コメント

最新トラックバック

RSSリンクの表示

自分のための外部リンク