A Day In The Life

とあるプログラマの備忘録

ナビゲーションバーに次へ戻るボタンを追加する方法

iPhone/iPod Touchのメールアプリ(Mail.app)で使用されている「次へ」ボタンと「戻る」ボタンの実装方法です。
ボタンのサンプル画像
ナビゲーションバーにUISegmentedControlを追加するのが基本的な実装方法です。

@implementation SampleViewController
- (void)viewDidLoad {
  NSArray *array= [NSArray arrayWithObjects:
      [UIImage imageNamed:@"UIBarButtonPrev.png"],
      [UIImage imageNamed:@"UIBarButtonNext.png"], nil];
  UISegmentedControl *segment = [[[UISegmentedControl alloc] initWithItems:array] autorelease];
  [segment addTarget:self
              action:@selector(respondToPageControlClick:)
    forControlEvents:UIControlEventValueChanged];
  segment.segmentedControlStyle = UISegmentedControlStyleBar;
  // momentaryをYESにすると押しっぱなし状態にならない
  segment.momentary = YES;
  UIBarButtonItem *rightItem = [[UIBarButtonItem alloc]initWithCustomView:segment];
  [[self navigationItem] setRightBarButtonItem:rightItem];
}

- (IBAction)respondToPageControlClick:(id)sender {
  if ([sender selectedSegmentIndex] == 0) {
    // 戻るボタン押下時の処理
  } else {
    // 次へボタン押下時の処理
  }
}
@end

「次へ」「戻る」ボタンの画像

「次へ」と「戻る」のアイコンは標準で提供されてません。というわけでInkscapeを使ってアイコンを自作しました。白色の三角形つくって背景を透過にした簡単なものです。
画像はCreative Commonsライセンスで公開しておきます(黒い背景の画像は背景が透過になっています)。

updown
prev buttonnext button
Creative Commons License
次へ戻るボタンアイコン by glass-_-onion is licensed under a Creative Commons 表示 2.1 日本 License.
Based on a work at d.hatena.ne.jp/glass-_-onion/.