2012/06/09更新

[XCODE] iPad用のSplitViewを利用する part2

今日は、iPad用インターフェースのSplitViewの使い方を学んだので、ブログに残しておきたいと思います。

SplitViewとは & SplitViewの作り方

SplitViewとは何？や、作り方は、こちらの記事（SplitViewの作り方＠YoheiM.NET）を参考にしてみて下さい。

なお、今回は、以下のようなSplitViewを使います。左側がTableViewで、右側がToolBarを持つUIViewで構成されています。

f:id:yoheiM:20110917182519p:image

SplitViewで2つのViewの動きを制御する

左側のViewで選択された文字が、右側のViewに表示される実装に取組みました。

SplitView内の2つのViewのやり取りは、全て実装者任せとなっているようです。

まずはSplitViewを作成する際に、左側のTableViewを持つViewControllerの変数に、右側のViewへの参照を設定します。

(UIWindowのDelegateでの実装例)
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   
  SplitLeftViewController *vc1 = [[SplitLeftViewController alloc] initWithNibName:@"SplitLeftView" bundle:nil];
  SplitDetailViewController *vc2 = [[SplitDetailViewController alloc] initWithNibName:@"SplitDetailView" bundle:nil];

  // 左側ViewControllerのdetailViewControllerという変数に、右側ViewControllerの参照を追加する
  vc1.detailViewController = vc2;

  UISplitViewController *spVc = [[UISplitViewController alloc] init];
  spVc.viewControllers = [NSArray arrayWithObjects:vc1, vc2, nil];

  [self.window addSubview:spVc.view];
  [self.window makeKeyAndVisible];

  return YES;
}

そして、左側のViewControllerにて、テーブルセルがクリックされた際に、選択されたセルの文字列を、detailViewのラベルに設定するという処理を実装します。

(SplitLeftViewControllerにて)
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  NSString *info = [datas objectAtIndex:[indexPath row]]; // datas変数は、テーブルView用のデータソースでNSArray
  self.detailView.infoLabel.text = info; // infoLabelは、UILabelのインスタンス
}

このメソッドは、UITableViewDelegateプロトコルが提供しており、SplitLeftViewControllerで実装しています。

左側のTableViewのdelegateに、SplitLeftViewControllerを指定する事で、テーブルのセルが選択されたときに、上記のメソッドが呼び出されます。

デバイスの縦横の回転に対応する

SplitViewは標準で、横状態では左のViewが表示、縦状態では左のViewが非表示となります。

縦状態の際に、左Viewを表示したい場合には、SplitViewのdelegate（UISplitViewControllerDelegate）を設定して、以下の実装を行います。

iPadが縦表示になった場合に、Toolbarにボタンを追加し、そのボタンを押下時に、PopoverViewを表示するように設定
iPadが横表示になった場合に、縦表示になった場合に追加したボタンを削除

上記の処理を、右側ViewControllerに実装します。

(SplitDetailViewControllerでの実装例)

// 縦表示になる場合の処理
- (void)splitViewController:(UISplitViewController*)svc 
 willHideViewController:(UIViewController *)aViewController 
  withBarButtonItem:(UIBarButtonItem*)barButtonItem 
   forPopoverController:(UIPopoverController*)pc {

  barButtonItem.title = @"List";
  NSMutableArray *items = [[toolbar items] mutableCopy];
  [items insertObject:barButtonItem atIndex:0]; // ボタンを追加
  [[self toolbar] setItems:items animated:YES];
  [items release];
}

// 横表示になる場合の処理
- (void)splitViewController:(UISplitViewController*)svc 
 willShowViewController:(UIViewController *)aViewController 
  invalidatingBarButtonItem:(UIBarButtonItem *)button {

  NSMutableArray *items = [[toolbar items] mutableCopy];
  [items removeObjectAtIndex:0]; // ボタンを削除
  [[self toolbar] setItems:items animated:YES];
  [items release];
}

また、SplitViewControllerのdelegateに上記2つのメソッドを実装したインスタンスを設定する必要があります。

参考サイト

以下を参考に、実装しました。

View Controller Programming Guide for iOS

最後に

iPad用のViewを一つ使えるようになれました(*ﾟ▽ﾟ)ﾉ次は、PopOverを使えるようになれれば良いなぁ。