iPhone用タブ付ページめくりコントロール

iOSには標準でページめくり用のコンポーネントが用意されています。iPhoneのホーム画面のようにページコントロールがあって、左右スワイプでページめくりができるアレです。

この機能を実装するためにはUIPageViewControllerなどを使います。ところが実装がめちゃくちゃ面倒くさいんですよ。以前作ったときはいろいろ調べてみつけた英語の記事を参考に実装したんだけど、もう全然覚えていません。リンクだけは残してあったりして。

How To Create UIPageViewController in Storyboard | iOS Programming

で、嫌気がさしてCocoaControlsを漁っていたらページコントロール系のPodを見つけたので試してみました。実装方法は標準のUIPageViewControllerに近いところもあるのですが、わりといい感じかもしれないのでレポります。

ICViewPager

monsieurje/ICViewPager

サンプルプロジェクトをSingle View Applicationとして作成しICViewPagerを使ってみます。最初にSingle View Applicationを作っておきます。

インストール

CocoaPodsでインストールし、xcworkspaceを開きます。

$ vi Podfile
pod 'ICViewPager'

$ pod install

### Controllerクラスを追加

ページ全体を管理するPageControllerクラスと、各ページのViewを担当するContentViewControllerを用意します。

PageController

PageControllerはICViewPagerのViewPagerControllerのサブクラスにし、デリゲートとデータソースを実装するようにプロトコルを継承しておきます。

#import "ViewPagerController.h"

@interface PageController : ViewPagerController<ViewPagerDataSource,ViewPagerDelegate]]>

@end

ContentViewController

こいつは普通のViewControllerで良いです。

storyboardでやること

最初からあるViewControllerのカスタムクラスをPageControllerに、新しく追加したUIViewControllerのカスタムクラスをContentViewControllerにします。

また、後でコードから呼び出すためにContentViewControllerのほうはStoryboard IDにも同じ名前を付けておきます。

ページめくりを確認するために申し訳程度にラベルを置いておきました。このラベルをソースから変更できるようにIBOutletとしてContentViewControllerと紐付けておきます。また、ラベルに描画するテキストを一時的に置いておくためのNSStringのプロパティも一つ用意しておきます。

#import <UIKit/UIKit.h>

@interface ContentViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *label;
@property NSString* labelText;

@end

あとはコードで

データソース、デリゲートに自分自身を設定します。必須なのはデータソースのメソッドのみですのでそれを実装します。

// PageController.m
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.dataSource = self;
    self.delegate = self;

}


- (NSUInteger)numberOfTabsForViewPager:(ViewPagerController *)viewPager
{
    // タブの数
    return 5;
}

- (UIView *)viewPager:(ViewPagerController *)viewPager viewForTabAtIndex:(NSUInteger)index
{
    // タブに表示するView、今回はUILabelを使用
    UILabel* label = [UILabel new];
    label.text = [NSString stringWithFormat:@"Tab #%i", index];
    [label sizeToFit];
    return label;
}

- (UIViewController *)viewPager:(ViewPagerController *)viewPager contentViewControllerForTabAtIndex:(NSUInteger)index
{
    // タブ番号に対応するUIViewControllerを返す
    ContentViewController* contentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"ContentViewController"];
    contentViewController.labelText = [NSString stringWithFormat:@"Tab #%i", index];
    return contentViewController;

}

最後に ContentViewControllerのviewDidLoadでラベルのテキストを更新してあげれば完了です。

- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view.
    
    self.label.text = self.labelText;

}

最初に紹介したアニメーション画像が完成したサンプルにあたります。

ソースコードはここ→xoyip/icviewpager-sample

その他にできること

タブを画面下に
選択中のタブの色
タブの背景色
タブの大きさ

などなど、いくつかカスタマイズも可能です。

ぴよログ

↓に移転したのでこっちは更新されません、多分。