UIScrollView でページの間に空白を挟む : Objective-C プログラミング

PROGRAM

UIScrollView では pagingEnabled を YES に設定することで、ページ単位でスクロールさせることができます。

UIScrollView でいう「ページ単位」とは bounds に設定されている描画領域のことなので、UIScrollView のページスクロールは、表示されている範囲ごとに切り替えて表示して行く感じになります。

そのため、たとえば画面いっぱいに UIScrollView を配置して、そこにめいいっぱいの画像を表示したりする場合、それぞれの画像の隙間に余白を設定したい場合には、UIScrollView の bounds の大きさを、目に見える画面よりも大きくする必要がでてきます。

親ビューでクリッピング (clipsToBounds) しているような場合も、画面サイズが親ビューのサイズになるだけで、考え方は同じです。

たとえば、UIViewController の viewDidLoad メソッド内で、コンテンツを画面いっぱいに表示させても余白が持てる UIScrollView を配置してみます。

今回は、UIViewController に配置されている view のサイズが画面いっぱいであるとして、それを基準に UIScrollView を組み立てます。

UIScrollView* scrollView;

CGRect scrollFrame;

CGRect scrollBounds;

// まず、親のビューの描画領域を取得します。（これを「画面いっぱい」とします。）

scrollFrame = self.view.bounds;

// ひとまずこの大きさで UIScrollView を作成し、親のビューに追加します。（追加は最後でも大丈夫です）

scrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];

[self.view addSubview:scrollView];

// それでは、UIScrollView の描画領域を、画面より大きく拡張して行きます。

// 設定する bounds を、画面サイズを元に変更して行きます。

scrollBounds = self.view.bounds;

// 取得した画面サイズの幅を横に、例えば 20 ピクセル拡張します。

scrollbounds.size.width += 20.0f;

// 拡張したサイズを、UIScrollView の frame として設定します。

// このようにすると scrollView の bounds も、座標 (0,0) をを維持ながら右下方向に拡張されます。

scrollView.frame = scrollBounds;

// 後は表示領域の設定です。

// スクロール範囲を、たとえば 3 ページに設定します。

// 設定するコンテンツ領域の大きさは、余白を含む画面サイズを基準に計算します。

scrollView.contentSize = CGSizeMake(scrollBounds.size.width * 3.0f, scrollBounds.size.height);

// ページ単位でのスクロールを有効にします。

scrollView.pagingEnabled = YES;

// フレームを拡張した都合、スクロールバーの末端が切れてしまうので、非表示にしておきました。

// 代わりに UIPageControl など、何か別の方法で、スクロールできることと範囲を表示する必要があるかもしれません。

scrollView.showHorizontalScrollIndicator = NO;

これで、受け皿となる UIScrollView の用意ができました。

あとはこの UIScrollView を使ってコンテンツを表示して行くことになります。

ここで作成した UIScrollView は画面サイズよりも大きい表示領域を持つようになっていますが、表示されている左上の座標が (0, 0) になっているので、それほど扱いに気をつけなければいけないことはないと思います。

画面よりも大きいサイズのものを配置しないようにさえ気をつければ、余白もきれいに表示されます。

ただし UIScrollView が広く取られている都合、UIScrollView にスクロールバーを表示させると、右隅が完全には表示されないので注意しましょう。

ちなみに、上記では UIScrollView を拡張するのに frame を使って行っています。

UIScrollView のページ単位は bounds のサイズが基準になるのですが、bounds と frame は連動して変更されるため、ここでは frame の方を使って拡張しました。

frame と bounds での拡張のされ方の違いは、今回のような回転されていないビューの場合には、frame を拡張すると左上の座標を固定して bounds が拡張されるのに対し、bounds を拡張すると中心座標を固定して frame が拡張される感じになります。

今回は余白を右に取りたかったので frame を拡張しましたけど、左右に半分ずつ取りたいときには bounds を拡張するのが便利です。