FC2ブログ

--
--/--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2011
04/23

UIPageControlの使い方

iPhone開発

最近始めて知りました。

そうです。UIPageControlの使い方です。

【今までの勘違い】
・UIPageControlだけでページングは実装できる
・UIPageControlに数枚のviewを乗せることによってページングが可能となる

【今回わかったこと】
・ページングはUIScrollViewにて実装する
・UIPageControlは各ページviewとは別物で、ただのページ(ページ数・現在ページ)である
・UIScrollViewとUIPageControlを紐付けてあげることで、わかりやすいページングが実装できる

iPhoneのホーム画面を見ていると、どうしても各ページとその下のページを示す点はもともと関連があるものだと思えてしまうのですが、そうではなかったようです。


以下、試しに書いたサンプルソース。

PageControlBaseView.h


#import <UIKit/UIKit.h>

#define kNibNameBaseView @"BaseView"
#define kNibNamePage1 @"Page1"
#define kNibNamePage2 @"Page2"
#define kNibNamePage3 @"Page3"

#define kPagingScrollViewHeight 440 // スクロールビューのheight(ページコントロールは除外)
#define kPageViewWidth 320 // 各ページビューのwidth
#define kPagerHeight 20 // UIPageControlのheight
#define kNumberOfPages 3 // ページ数

@interface PageControlBaseView : UIView <UIScrollViewDelegate> {

UIScrollView *pagingScrollView; // ページング用スクロールビュー(960 * 440)
UIPageControl *pager; // ページコントロール
}

@end



PageControlBaseView.m


#import "PageControlBaseView.h"

@implementation PageControlBaseView

- (void)dealloc {

[super dealloc];
}

- (id)initWithFrame:(CGRect)frame {

if ((self = [super initWithFrame:frame])) {
// ベースの画面を生成(BaseView.xib)
UIViewController *pageViewController = [[[UIViewController alloc] initWithNibName:kNibNameBaseView bundle:nil] autorelease];
UIView *pageView = pageViewController.view;
[self addSubview:pageView];

// ページングスクロールビューを生成
pagingScrollView = [[[UIScrollView alloc] init] autorelease];
pagingScrollView.frame = self.bounds;
pagingScrollView.contentSize = CGSizeMake(kPageViewWidth * kNumberOfPages, kPagingScrollViewHeight);
pagingScrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
// ページごとのスクロールにする
pagingScrollView.pagingEnabled = YES;
// スクロールバーを非表示にする
pagingScrollView.showsHorizontalScrollIndicator = NO;
pagingScrollView.showsVerticalScrollIndicator = NO;
// ステータスバータップでトップにスクロールする機能をOFFにする
pagingScrollView.scrollsToTop = NO;

// ページングスクロールビューのdelegateメソッドを使えるように設定
pagingScrollView.delegate = self;

// 各ページをページングスクロールビューに貼り付ける
NSArray *pageNibNameArray = [NSArray arrayWithObjects:kNibNamePage1, kNibNamePage2, kNibNamePage3, nil];
for (int i=0; i<kNumberOfPages; i++) {
// 各ページビューのコントローラをxibから生成
UIViewController *pageViewController = [[[UIViewController alloc] initWithNibName:[pageNibNameArray objectAtIndex:i] bundle:nil] autorelease];
// x座標をページ幅分だけずらしながらaddSubview
pageViewController.view.frame = CGRectMake(kPageViewWidth * i, 0, kPageViewWidth, kPagingScrollViewHeight);
[pagingScrollView addSubview:pageViewController.view];
}
// ページングスクロールビューをaddSubview
[self addSubview:pagingScrollView];

// ページコントロール
// ページングスクロールビューの下にページコントロールを配置
pager = [[[UIPageControl alloc] initWithFrame:CGRectMake(0, kPagingScrollViewHeight, kPageViewWidth, kPagerHeight)] autorelease];
// 現在ページを示す点は白なので、見えやすいように背景を黒に設定
pager.backgroundColor = [UIColor blackColor];
// ページ数を指定
pager.numberOfPages = kNumberOfPages;
// ページ番号は0ページを指定(1にするとこの場合真ん中のページが指定される)
pager.currentPage = 0;
// ページが1ページのみの場合は現在ページを示す点を表示しない
pager.hidesForSinglePage = NO;
[self addSubview:pager];

// ページコントロールの値が変わったときのアクションを登録
[pager addTarget:self action:@selector(changePageControl:) forControlEvents:UIControlEventValueChanged];
}
return self;
}

/**
* ページコントロール変更時処理
*/
- (void)changePageControl:(id)sender {

// ページコントロールが変更された場合、それに合わせてページングスクロールビューを該当ページまでスクロールさせる
CGRect frame = pagingScrollView.frame;
frame.origin.x = frame.size.width * pager.currentPage;
frame.origin.y = 0;
// 可視領域まで移動
[pagingScrollView scrollRectToVisible:frame animated:YES];
}

/**
* ページングスクロールビュー変更時処理(UIScrollViewのdelegateメソッド)
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

// UIScrollViewのページ切替時イベント:UIPageControlの現在ページを切り替える処理
pager.currentPage = pagingScrollView.contentOffset.x / kPageViewWidth;
}

@end



xibファイルを用意して実行したらこんな感じで表示されます。

・Page1
Page1

・Page2
Page2

・Page3
Page3


【重要】
・UIScrollViewDelegateのscrollViewDidScrollメソッドで数字の書かれたscrollViewが切り替わった際に、下のページコントロールを切り替えること
・下のページコントロールの値が変わった際に、数字の書かれたscrollViewの表示を切り替えること

上の二つの動作によって、ページングが実装できるってワケですね。



大事なことなので忘れないように書きました。



CM

NAME
TITLE
MAIL
URL
PASS (削除時に必要)
SECRET 管理者にだけ表示を許可する
COMMENT&
DECORATION

TB

トラックバック

http://sonsofbasil.blog55.fc2.com/tb.php/9-945a5235

この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Taku Sasahara

Author:Taku Sasahara
Hello world!!

バジルの息子。
法学部法律学科卒。
バリバリの文系プログラマです。
ペーペーです。

Facebook

My faborite books
僕のお気に入り書籍の本棚

最新トラックバック

スポンサーリンク

検索フォーム

ブロとも申請フォーム

QRコード
QR

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。