iPhone UIScrollViewで画面サイズより小さい領域でPagingする

新しいiMac買いました。メモリも安いので買いました。
でも雪豹のまま使うことにしますw

さて、UIScrollViewは便利で良く使っています。
UIScrollView.pagingEnabled = YESにすれば、ページ毎にきちっとスナップしてスクロールしてくれます。でも、画面サイズ(W:320px)より小さい要素、例えば画像(W:150px)などをページングするところでハマりました。iPhoneのサファリのタブのようにしたいのです。

ポイントは、ページングはframeのサイズではなくてboundsのサイズということ。
それと、scroll.clipsToBounds = NOにすること。NOにしないと、1枚しか見えない。
なるほど!

例えば、横は150pxの画像とマージンを取ったサイズを1ページとした場合。

UIScrollView *scroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0.0, 0.0, 320.0, 200.0)];

scroll.bounds = CGRectMake(0.0, 0.0, 150.0 + margin, 200.0);

scroll.contentSize = CGSizeMake(150.0*3 + margin*3, 200.0);

scroll.pagingEnabled = YES;

scroll.showsVerticalScrollIndicator = NO;

scroll.showsHorizontalScrollIndicator = YES;

scroll.clipsToBounds = NO;

scroll.delegate = self;

[self.view addSubview:scroll];

これだと、ユーザのタッチ受付の領域が狭いので、hitTestとかで広げるとよいかも。
以下、参照記事。
UIScrollView horizontal paging like Mobile Safari tabs - Stack Overflow

あと、はじめてUIPageControl使ったので、メモ。
UIPageControlはユーザタッチを受け取るのでタッチすると、ドットが1つ移動します。
プロパティのcurrentPageで左右どちらへ移動したか分かります。
また、タッチがあったことを受け取るには、

[UIPageControl addTarget:self 

   action:@selector(pageControlDidChange:) 

   forControlEvents:UIControlEventValueChanged];

をセットしておいて、メソッド内で、currentPageの位置へ下記のようにscrollViewを移動すればOK。
[scrollView setContentOffset:point animated:YES];

Tweet