このページは「iPhoneプログラミング入門」(工学社刊、ISBN 978-4-7775-1541-7)を読んで、もっと先へ進んでみたいと思った人への説明です。

次へ->
「次の一歩」一覧へ

最も簡単なモーダルビューの作り方1

本記事で作成するモーダルビュー

モーダルビューとは

モーダルビューの「モーダル」は流行などを示す「mode」の形容詞なんですが、今これっきゃないっていうかぁー。他はダメっていうかぁー。つまり、特定の操作により現れ、「OK」ボタンなどでそのビューを閉じない限り、先へ進めないようなビューが「モーダルビュー」です。
モーダルビューを作成するには、モーダルビュー用に適当なビューコントローラを作成します。
そしたら、そのモーダルビューを使いたい他のビューコントローラで、presentModalViewControllerというそのまんまの名前のメソッドを使うだけです。
正確には、アニメーション化するかどうか指定するので、presentModalViewController:animated:というメソッドです。

本記事のミソ「ナビゲーションボタンでモーダルビューを出す」

モーダルビューは、他のビューからボタンを押すなどで出現させればいいことになります。でもせっかくナビゲーションベースのアプリケーションが作れるようになったのですから、「灰色のナビゲーションバー」上にある「info」ボタンを押(シミュレータなのでクリック)したらモーダルビューが出てくるように作りましょう。
図1 infoボタンを押す
図2 ニョロっと出てくるモーダルビュー。「OK」クリックでニュルっと戻る


それには、ナビゲーションコントローラからモーダルビューを出すことになります。
問題なくできます。UINavigationControllerクラスという名前にViewという文字はありませんが、やっぱりUIViewControllerクラスを継承していますから、presentModalViewController:animated:が使えるのです。

なお、図2では「ナビゲーションバーからモーダルビューを出すということは、アプリケーション全体に共通に使えるような内容の表示であることが適当」と考え、「モーダルとは何か」を説明する内容にしてあります。「OK」で引っ込めない限りいつまでも操作を独占するわけですから、操作を進めるためには消えるべき運命(mortal)なわけです。

これまでの知識と経験でできること

「ナビゲーションコントローラ」を自力で導入

アプリケーションには「モーダルビュー」に関係する部品以外は作りません。ですから、「ナビゲーションコントローラ」は自力で導入します。
そこで、「ビューベース」のテンプレートを使ってアプリケーションを作成します。アプリケーション名(プロジェクト名)は「FirstModal」にしましょう。
この「FirstModal」アプリケーションについて、自分で作るナビゲーションと全く同じように、ナビゲーションコントローラの設定をします。自力での設定はなかなか面倒ですから、いい練習になりますヨ。
ただし、「FirstModalViewController(ZeroNavViewControllerに相当)」は何も編集しなくて構いません。今回は、起動時に現れるビューは、ただのハリボテです。

InfoViewControllerクラスの作成

これも最も簡単なナビゲーションの作り方でNextViewControllerクラスを作成したのと同じ方法で、InfoViewControllerを作成します。
このクラスでは、画面上に「OK」ボタンを置いて、それをクリックすると引っ込むようにプログラムを記述します。でも、それは無事に出てくることを確かめてからにします。今はプログラムの編集は何もしません。

InfoViewController.xibの編集

InfoViewController.xibを編集して、図2のように適当な背景色やラベルを加えます。
ラベルは固定ですから、インターフェイス・ビルダー上で、ラベルの属性「Text」の値として指定します。
OKボタンも、まだ使いませんが、置くだけ置きます。

「info」ボタンの作り方

MainWindow.xibを開く

「info」ボタンはバーの上に置きますから、「MainWindow.xib」を開いて編集します。

灰色のバーの正体

「Navigation Controller」ウィンドウの上部にある灰色のバー。「Root View Controller」と書いてありますね。
この部品、今まであまり注目していませんでしたが、これをクリックして選択し(バーの部分だけが青くなるようにします)、「インスペクタ」を調べると正体がわかります。オブジェクト名は「Navigation Item」、クラスはUINavigationItemです。
「Root View Controller」という文字は属性インスペクタの「Title」項目で設定されていますから、これを「FirstModal App」とでもしておきましょう。

Round Rect Buttonの意外な変身

この「ナビゲーションアイテム」の上にボタンを置きます。
ライブラリを見ると、「ナビゲーション」関係の部品が結構ありますね。青灰色のものがだいたいそれです。でも、今回使うのは、これらじゃないんです。
中に「Navigation Bar」というものもあって、「青灰色のこれはナビゲーションバーじゃなくてナビゲーションアイテムだと言ったが、あれウソだったのか」と思うかも知れませんが、これはホントに「横棒」で、今利用しているようにナビゲーションバーをベースにナビゲーションに必要な情報をひっくるめたものを「ナビゲーションアイテム」と呼ぶのです。Xcodeを利用してナビゲーションのついたアプリケーションを作る場合、ライブラリからは「ナビゲーションアイテム」のついた「ナビゲーションコントローラ」が利用できるのですから、わざわざ自前でナビゲーションバーだけを一本持ってこなければいけない理由はほとんどないと言ってよいでしょう。
今回使うのは、本書でもここでも使った、「Round Rect Button」です。これをドラッグドロップで、ナビゲーションアイテムの上に置きます。ちゃんと置けます。
置いたら、それが選択されていることを確かめます。
これはちょっと難しいかも知れません。というのは、インターフェイス・ビルダーが何かの事情により、「Bar Button Item」というものを選んだと認識してしまいます。図3はダメな例です。インスペクタのウィンドウタイトルが「Bar Button Item Attributes」になっていますね。これでは目的を果たせません。
図3 「Bar Button」ではだめ

図3の状態からもう一度ボタン部分をクリックすると、目的の図4になるようです。ボタンだけが選ばれていることが強調されていて、インスペクタのウィンドウタイトルが「Button Attribute」になっていることが必要です。
図4 「Button」になってほしい
この状態でドキュメント・ウィンドウを見ると、警告が出ているかも知れません。それは図3のほうで「Bar Button」の「Style」欄に「Plain」が選ばれているが、この設定はサポートされていません、というのです。「Bar Button」は我々が望んで導入したものではないので、そんなことを言われても我々のせいではありません。警告のままでも動作に支障はありませんが、あまりいい気がしない場合は「Style」欄から別のスタイル、たとえば「Borderd」を選ぶと警告は消えます。かつ、外観に支障はありません。

さて、インスペクタを見ます。「Button Attributes」すなわちボタンの属性インスペクタが表示されていますね。そこに「Type」という項目があります。
それが「Rounded Rect」になっていますね。実は、だからそれは角丸のボタンなのです。
「Type」の欄はリストになっています。それを開くと、「info Light」あるいは「info Dark」というのが選べるではありませんか(これが図3では選べないのです。だからダメな例)。 今回使うのは「info Light」です。選んでください。
図2のようなinfoボタンになりましたね。そして、このオブジェクトの名前が「Round Rect Button」から「Info Light Button」になりました。

では、これらのビューコントローラやボタンを使うプログラムを編集して行きましょう。
AppDelegateクラスの定義を編集して、モーダルビューを出します