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

Twitterボタン
Twitterブログパーツ

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


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

[Xcode][objective-c]UIScrollViewとUIPageControlを組み合わせてスワイプでページを切り替える方法

カテゴリ:Xcode / objective-c
==<<管理者環境>>==
MacOSX ver.10.7.3
Xcode ver.4.2.1
==============

以前、似たような記事を書きましたが、UIScrollViewのみを使ってページを切り替えるという方法でした。
[注意]前回記事の内容に追加実装する形式で紹介するので、まだご覧になっていない方は前回記事(UIScrollViewを使ってスワイプでページを切り替える方法)からご覧下さい。


今回は、UIPageControlと組み合わせて使用する方法を紹介します。
完成イメージはこんな感じです。
no1.png
画面下に[・・・]←こんな感じでPageControlが見えますね。


さてでは手順です。
手順1 UIScrollViewDelegateを実装する
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIScrollViewDelegate>
@end


手順2 UIPageControlのOutlet宣言をする
#import "ViewController.h"
@implementation ViewController
{
IBOutlet UIScrollView *scrollView;
IBOutlet UIPageControl *pageControl;
}


手順3 UIPageControlをViewに追加するコードを実装する
※これをやらないとStoryboard上でUIPageControlを乗っけても実行すると表示されない
- (void)viewDidLoad {
//↓ここから前回の記事で実装済↓
NSUInteger i;
//(中略)
[self layoutScrollImages];
//↑ここまで前回の記事で実装済↑

[self.view addSubview:pageControl];//←この1行を追加する
}


手順4 「ページスクロールした時にPageControlも併せて表示を切り替える」メソッドを実装する
※丸々コピペでOK
- (void)scrollViewDidScroll:(UIScrollView *)sender {  
CGFloat pageWidth = scrollView.frame.size.width;
if (fmod(scrollView.contentOffset.x , pageWidth) == 0.0) {
pageControl.currentPage = scrollView.contentOffset.x / pageWidth;
}
}
※コードはここまで。実装出来たら一度Build([Command]+[B])しておく。

手順5 Storyboardを開き、UIScrollView上にUIPageControlをドロップする

no2.png

手順6 手順2でOutlet宣言したpageControlをUIPageControlと紐付ける。

no5.png

手順7 UIPageControlの設定をする

no4.png
  • # of Pages : スクロールの総ページ数
  • Current : ViewControllerが表示され時に[・・・]←これの最初に白く表示される位置。一番左を白くしたかったら「0」一番右だったら「2」にする

手順8 UIScrollViewのdelegateをViewControllerに紐付ける
※コード上で、scrollView.delegate = self;としている場合、この手順は不要。

no6.png

手順9 UIScrollViewの「スクロール表示(下画像の青枠)」設定を非表示に変更する

no3.png
※赤枠内の2つのチェックボックスのチェックが外れていればOK


以上です。Runしてみてください。
ちゃんと表示されましたでしょうか。

やっぱりこのUIPageControlがあるとページ感があって良いですよね♪

開発をしていて、Storyboardの作業画面が狭いなとお思いでしたらコチラの記事(Xcode内でタブを使い作業画面を広くする方法)をご覧下さい
関連記事
  1. 2012/03/20(火)|
  2. Xcode / objective-c
  3. | トラックバック:0
  4. | コメント:0
<<iPhoneアプリリリースに必要なアイコンとXcode上の設定方法 | ホーム | [iPhoneアプリ]AppStoreのリンクURL>>

コメント

コメントの投稿


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

トラックバック

トラックバック URL
http://blog.casualappteam.com/tb.php/75-a8ce0672
この記事にトラックバックする(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リンクの表示

自分のための外部リンク