【iOS開発】横にスクロールするページの作り方
はじめに
こんにちは 中西です。
UIScrollViewは縦にスクロールするために主に使いますが、
こいつのpagingEnabledをYESにすると、ページの概念のある横スクロールを作ることが可能になります。
どうやるの？
では、どうやるのか！？
UIScrollViewをIB(Interface Builder)で作って
pagingScrollViewなんて名前をつけてIBOutletで結んでおきましょう。
viewDidLoadでこんな感じに書けばいいんじゃないかな
作り方なんてさまざまあると思いますけども、viewDidLoadにこんな風に書けばよいかもしれません。
簡単に説明すると、UIScrollViewにどんどんx軸をずらしてaddSubViewしていけばOK!
最後の行のコンテンツサイズを指定するところも忘れないで！！
忘れるとハマりますよ。
- (void)viewDidLoad { [super viewDidLoad]; // ページごとのスクロールにする self.pagingScrollView.pagingEnabled = YES; self.pagingScrollView.bounces = NO; for (int i=0; i<PAGE_NUMBER; i++) { // x座標をページ幅分だけずらしながらaddSubview UIViewController *hogeViewController = [[UIViewController alloc] initWithNibName:@"UIViewController" bundle:nil]; hogeViewController.view.frame = CGRectMake(PAGE_WIDTH * i, 0, PAGE_WIDTH, PAGE_HEIGHT); [self.pagingScrollView addSubview:hogeViewController.view]; } self.pagingScrollView.contentSize = CGSizeMake(PAGE_WIDTH * PAGE_NUMBER, PAGE_HEIGHT); }
self.pagingScrollView.bounces = NO;
はあってもなくてもよいですが、あったほうが引き締まると思います。ビシッとしたページになりますね。
とはいえこれ、ARCだとhogeViewControllerが任意のタイミングでリリースされるので、
hogeViewControllerでごにょごにょしたいときは、インスタンス変数か何かで保持しておいたほうがよいかもですね。
1ページずつの横幅・縦幅 ページ数は定数で持つ
さて上記のコードには定数が入っていて
#define PAGE_WIDTH 320 #define PAGE_NUMBER 5 #define PAGE_HEIGHT 300
こんな感じに定義しています。いや別に定数でなくてもよいとは思いますが。
以上で基本形は完成
あら不思議、指を左右にフリックすると、ページ遷移します！！
アメイジング！
ページ遷移したことを知りたい！！！
フリックを検知するところに関しては、何も自分で書いてないわけでして、
いったいどこでページ遷移したことを検知したらいいのか皆目検討がつかないわけですが、
(void)scrollViewDidScroll:(UIScrollView *)scrollViewメソッドでできます。
デリゲートしておきましょう。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { static NSInteger previousPage = 0; CGFloat pageWidth = scrollView.frame.size.width; float fractionalPage = scrollView.contentOffset.x / pageWidth; NSInteger page = lround(fractionalPage); if (previousPage != page) { // Page has changed // Do your thing! NSLog(@"CHANGE PAGE NOW:%d", page); previousPage = page; switch (page) { case 0:{ // 0ページ目にきたときにしたい処理 break; } case 1:{ // 1ページ目にきたときにしたい処理 break; } case 2:{ // 2ページ目にきたときにしたい処理 break; } case 3:{ // 3ページ目にきたときにしたい処理 break; } case 4:{ // 4ページ目にきたときにしたい処理 break; } default: break; } } }
さいごに
これで、ページ遷移したことも検知するUIScrollViewが作れました。
