iPad用のSplitViewを利用する part2

XCODE

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


SplitViewとは & SplitViewの作り方

SplitViewとは何？や、作り方は、こちらの記事（SplitViewの作り方）を参考にしてみて下さい。
なお、今回は、以下のようなSplitViewを使います。左側がTableViewで、右側がToolBarを持つUIViewで構成されています。



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を使えるようになれれば良いなぁ。
以下は関連サイトです。参考になれば幸いです。