ナビゲーションコントローラーを導入する

　「ナビゲーション」機能というのは、iOSアプリのプログラミングに関する用語なので、あまり一般的ではないかもしれません。簡単に言えば、アプリの画面を切り替えるに関する、ユーザーインターフェースを含む機能のことです。よく見かけるのは、テーブルビューの中の1つの行をタップすると画面全体を左側にスクロールしながら、その項目に関する詳しい情報、設定を変更するためのコントロール類を配置した画面に切り替えるというものです。その切り替え後の画面では、左上角にあるボタンにタップすることで今度は全体が右側にスクロールして元の画面に戻るのが普通です。テーブルビューの項目が階層的になっている場合には、1つの項目の選択によって、より深いレベルの選択肢を表示する場合もあります。

　いずれにしても、ナビゲーション機能が働いている場合には、画面の上部にナビゲーションバーと呼ばれるバーが表示されるのが普通です。このバーの中央には、表示中の画面のタイトルが配置されます。今回は、テーブルビュー画面から別の画面への切り替え、さらにそこから戻ってくる機能、ナビゲーションバーへのタイトルの表示を実現します。

　今回も前回同様、第32回に作成した果物の画像と名前を表示するテーブルビューからスタートします。前回は、テーブル中の項目をタップするとアラートを使って、情報を表示していましたが、今回はそこでナビゲーション機能を利用して別画面に切り替えるというわけです。

　その果物のテーブルビューを画面に表示するプログラムでは、テーブルビューのコントローラーを定義したPGTVControllerクラスのオブジェクトを作成し、それをプレイグラウンド右側のグラフィック画面、つまりライブビューに張り付けるというかたちになっていました。その部分は次の2行で実現していました。

　この部分にわずか2行を加えるだけで、ナビゲーション機能を導入し、テーブビューのタイトルを表示することができます。

　まず、上と同じようにテーブルビューのコントローラーオブジェクトを作成したあと、それをrootViewControllerという引数に指定して一般的なナビゲーション機能を担うUINavigationControllerクラスのオブジェクトを作成します。その後、テーブルビューコントローラーのtitleというプロパティに名前を設定し、テーブルビューに代えてナビゲーションのコントローラーのほうをライブビューに張り付けています。

　とりあえず、ここまでの結果を確認しましょう。

テーブルビューにナビゲーション機能を加え、タイトル入りのナビゲーションバーを表示しました。この状態では、まだ画面の切り替えはできません

　以前の果物のテーブルビューと比べると、「好きな果物」というタイトルのナビゲーションバーが加わりiOSアプリっぽさが出てきました。

選択したセルの内容を表示するビューに切り替える

　次に、テーブビューの1つの項目がタップされたら、ナビゲーション機能を使って別のビューに切り替える機能を実装しましょう。手を加える部分は、前回も使ったテーブビューのdidSelectRowAtのメソッドです。前回はそこでアラートを作成し、そこに選択された果物の名前と画像を表示しました。今回は、果物の名前はナビゲーションバーに表示し、切り替えたあとのビューには画像だけを表示することにします。

　表示する画像はUIImageオブジェクトとして作成し、UIImageViewのオブジェクトに貼り付けます。そこまでは前回とほとんど同じです。ただし、画像を表示する位置は適当に調整します。

　今回は独立した画面にそのイメージビューを配置することになるので、そのための一般的なビューコントローラー（UIViewContoller）のオブジェクトを用意します。前回はアラートのビューに重ねて配置していたものを、今回はそのビューコントローラーのビューの上に配置します。そして、そのビューコントローラーのタイトルとして選択された果物の名前を設定したあと、ナビゲーションコントローラーのpushViewControllerメソッドを使って、画像を配置したビューコントローラーに表示を切り替えます。

　以上の処理を含むコードを画面ショットとして示します。

新たなビューコントローラーを用意し、そこに選択された果物の画像を張り付け、さらにナビゲーション機能を使って、そのビューコントローラーに画面表示を切り替えるためのプログラムです

　多くの部分が前回と共通ですし、特にわかりにくい部分はないでしょう。これを実行すると、まずナビゲーションバー付きのテーブルビューが表示されます。

上のプログラムを実行すると、まずナビゲーションバーが付いたテーブビューが表示されます。ここまでは、まだ画面の切り替えのためのナビゲーション機能は働いていません

　そこからどれかの項目にタップして果物を選ぶとナビゲーション機能が働き、その果物の画像を表示する画面に切り替わります。

テーブルビューの項目にタップして選択すると、その位置にあった果物の画像を大きく表示する画面に切り替わります。ナビゲーションバーには、その果物の名前が表示され、左端のボタンで元の画面に戻ることができます

　もし、選択された果物に関する詳しい情報を内部データとして持たせれば、ここに表示することもできるでしょう。この状態ではナビゲーションバーの左端に「＜好きな果物」と表示されています。もちろん、そこをタップすれば元の画面に戻れます。これはナビゲーションコントローラーが自動的に表示してくれるボタンです。そこに表示されるタイトルは、今表示している画面に切り替わる前に表示していた画面のタイトルということになります。

選択したセルの内容に関するウェブページを表示する

　おまけ的な内容になりますが、最初に表示したテーブルビューから選んだ果物に関するウェブページを表示するように手を加えてみましょう。ここでは、その果物についてのウィキペディアのページを表示することにします。上の例との違いをひと言で表せば、イメージビューをウェブビューに置き換えるだけです。

　そのウェブビューは、ウィキペディアのURLに果物の名前を付け加えたものを使って表示します。その際、日本語のページを表示するには果物の名前も日本語（カタカナ）で表記してURLに付け加える必要があります。しかしiOSでは、日本語を含む文字列はそのままでは正しいURLオブジェクトに変換できません。日本語の部分をよく見るような「%」を使ってエンコードした英数字の文字列に変換する必要があるのです。とはいえ、そのためのメソッドも用意されているので難しいことはありません。

　URLを指定してウェブビューを表示する部分は、以前に説明したとおりです。また、そのウェブビューを含むビューコントローラーに、ナビゲーション機能で切り替える部分は上と同じなので、これ以上の説明は割愛して、コードを画面ショットとして示します。画面には出ていませんが、プログラムの先頭部分に「import WebKit」を加えるのを忘れないでください。

選択した果物の名前から、ウィキペディアのページをウェブビューで開くためのプログラムです。上の例との大きな違いは、イメージビューをウェブビューに置き換えたことだけです

　これを実行すると、まず果物のテーブルビューが表示されます。

ウェブビューを表示するように変更したプログラムを実行しても、最初の画面はこれまでと変わらず、果物の画像と名前がテーブルビューに表示されるだけです

　ここまでは前の例と何も変わりません。しかし、どれかの果物の行をタップすると、今度はウィキペディアのページが表示されるようになりました。読み込みのための少し時間はかかるかもしれません。

テーブルビューから選んだ果物に関するウィキペディアのページが表示されるようになりました。果物の名前とウィキペディアのページの組み合わせに限らず、さまざまな応用が考えられるでしょう

次回の予定

　今回は、以前に作った果物のテーブルビューを、ナビゲーション機能によって展開する例を2つほど示しました。ここまでできれば、果物に限らずさまざまな内容のテーブルビューを使って、いろいろな応用が考えられるでしょう。次回もテーブルビューを扱います。次は、やはりナビゲーション機能を使って多段階に掘り下げていくものを実現する方法を考えてみることにしましょう。