スプリットビューによる新しいユーザーインタフェース

スプリットビューによる新しいユーザーインタフェース

前回までに紹介したアプリケーションをiPad向けに移植した結果は以下の図の通りです。 iPad向けのアプリケーションのプロジェクトはこちらからダウンロードしてください。 なお、サーバー側では適切にMySQLとPHPによるバックエンドが稼働している必要があります。 これらは、第3回の記事を参照してください。

ここでは、iPadに特有の「スプリットビュー」を使っています。 ランドスケープ（横長）で表示しているときには、左右に分割してそれぞれのビューが表示されます。 このとき、左側はリストで、右側は左側で選択した項目の詳細を表示するといったユーザーインタフェースを構築します。

ポートレート（縦長）の場合には異なる表示をします。ランドスケープのときにあった左側のビューが見えなくなり、 右側の詳細ビューだけになります。そして、ツールバーにあるボタンをタップすると、 「ポップオーバー」と呼ばれるこれも新しい表示形態で、見えなくなった左側にあった一覧表示ができるようになります。

図2-1：iPadのスプリットビューはランドスケープとポートレートで違う見せ方ができる（クリックで拡大）

これがスプリットビューの特徴であり、画面サイズが広くなったiPadでは標準的に使われるようになるでしょう。 一見すると複雑そうに見えるかもしれませんが、フレームワーク側でかなり多くのことをまかなえるので、 スプリットビュー自体の管理はそれほど大変ではありません。

また、iPhoneと同様にナビゲーションによる遷移するユーザー・インタフェースも作成できますので、 それぞれのビューを切り替える場合には、iPhoneと同様に、ナビゲーションを使うというのも1つの手段です。

サンプル・アプリケーションでは、右側のビューのリストにある項目をタップすると、 ポップオーバーで新規登録のための画面を出します（図2-2）。 結果的に、iPhoneだと遷移する3つの画面が、iPadでは1つの画面でまかなえるようになります。 もちろん、常にこのような構成がベストとは限りませんが、見かけは大いに変わるという結果になります。

スプリットビューの実現方法

スプリットビューを実現するには、UISplitViewControllerというクラスを使います。 これに対応するビューはなく、UIViewControllerと組み合わせたビューや、 UITableViewControllerと組み合わせたリストなどといっしょに稼働させます。

XIBファイル内については、UISplitViewControllerクラスのインスタンスがメインに据えられ、 その中には2つのビューコントローラを設定できます。詳細は実際のプログラムを参照してもらうとして、 もう少しシンプルなサンプルが欲しい方は、プロジェクトを作るときのテンプレートとして 「Split View-based Application」を指定して作ったプログラムを参照すると良いでしょう。

非常に単純に言えば、UISplitViewControllerクラスのインスタンスの中に、 左右のビューに相当するビューコントローラを差し込んでおくことで、自動的に表示されます。

それぞれのビューコントローラは、まずは画面の回転を受け入れるように、 UIViewControllerのメソッド「shouldAutorotateToInterfaceOrientation:」のオーバーライドを行います。 後はそれぞれのビューでの表示作業がきちんとできるように行います。

2つのビューはもともと見えているので、左側を選択したときに右側が更新されるように、何らかの手だては必要です。 右側のビューのコントローラで更新要求を受け付けるためのメソッドなどを定義するというのが1つの方法でしょう。 サンプルプログラムのBookingListViewControllerクラスにある「loadCurrentData」というメソッドはその手法です。

このサンプルプログラムは左側の一覧したデータで選択したレコードなど、 ビューの間で選択したデータがうまく受け渡るようにする作業はもともとRentalDBクラスに組み込んであります。 その仕組みはそのまま使えることになります。