Page Controlの実装 - 米国で働く技術系サラリーマンのボヤキ on はてブロ

前回がScrollViewであったのには訳がある。
実はiPhoneらしいフリックすかすかでViewを切り替えるアプリを書きたかったのだ。
そして、それはScrollViewのプロパティとPageControlで実現するのだ。

スケルトンプロジェクトを作成

View-based Applicationで、プロジェクト名は「PageControlEX」。

Interface Builderで使用する参照を"PageControlEXViewController.h"に追加



@interface PageControlEXViewController : UIViewController {

    IBOutlet UIScrollView *scrollView;  

    IBOutlet UIPageControl *pageControl;

}

ScrollViewとPageControlをUIViewControllerに追加する

"PageControlEXViewController.xib"を(Interface Builderで)開く
ScrollViewとPageControlを配置する、ScrollViewは左上を(0,0)にサイズを(320, 400)ぐらいにして、PageControlはその下にして配置するとそれっぽい
PageControlのAttribute Inspectorを開き、"Pages"を"3"に、"Current"を"0"にする
"scrollView"、"pageControl"を各オブジェクトと接続する

scrollViewの初期化を追加

"PageControlEXViewController"のloadViewを以下のようにオーバーライドする。



 - (void)loadView {

    [super loadView];

    //

    scrollView.pagingEnabled = YES;

    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * NUM_OF_PAGES, scrollView.frame.size.height);

    scrollView.showsHorizontalScrollIndicator = NO;

    scrollView.showsVerticalScrollIndicator = NO;

    scrollView.delegate = self;

}

ここで分かる通り、UIScrollViewのpagingEnabledプロパティをセットすると、ページ単位でスクロールする様になるのだ。

"PageControlEXViewController"にUIScrollViewをデリゲートする

interfaceの定義を以下のようにする。



@interface PageControlEXViewController : UIViewController  {

     IBOutlet UIScrollView *scrollView;  

     IBOutlet UIPageControl *pageControl;

}

UIScrollViewDelegateのメソッドである、"scrollViewDidScroll"を実装する



 - (void)scrollViewDidScroll:(UIScrollView *)sender {

	CGFloat pageWidth = scrollView.frame.size.width;

	pageControl.currentPage = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;

}

これでスクロールが起こると、pageControlのcurrentPageが変わる。
これでビルドすれば、左右にフリックすると、下のページインジケータが変わるので動作しているのは分かると思う。
しかしこれでは面白くないので