[10] UITabBar での view の切り替え

今回は、UITabBar と UITabBarItem の使い方についてです。 UITabBar を使い、UITabBarItems や view を追加する方法です。

1. UITabBar テンプレート を使ってプロジェクトを作成

まず、タイトルの通りに XCode の UITabBar テンプレートを使って、プロジェクトを作成します。 その状態で、ビルド＆実行してみると以下の画像のようになります。

2. Interface Builderを起動し UITabBar items を追加します。

UITabBarItems を追加するには、単純に、ライブラリから、UITabBar 上にドラッグするだけです。追加したitemの名前は「item」となっているので、「third」など、適当に変更してください。 追加したitemには、itemがクリックされた時に表示するviewの名前を特定する必要があります。 まず、Interface Builder を起動するために、MainWindow.xib をダブルクリックします。 Tools > atributes inspector を開き、“Nib Name” と書かれた項目に、view を指定します。これがクリックされた時にロードされ、表示されます。今回は、テンプレートに沿って、”ThirdView” とします。 これだけでは、”ThirdView” は、表示されません。当たり前ですが、まだ、ThirdView.xibを作成していないので。。。 新しくview を追加するには、Interface Builder から File > New をクリックし、viewを追加します。 上記のような画面が出た後、新しく真っ白の viewが表示されると思いますので、適当に背景色などを変更して、”ThirdView”として保存します。 保存の途中で以下のような画面が出てきますので、viewを追加するプロジェクト名の横のチェックボックスをチェックして、「Add」ボタンで追加します。 これで、”ThirdView”は、完成ですが、このままXCode上からビルド＆実行し、最初に設定した「third」のタブitemをクリックすると以下のようなエラーが発生します。

reason: ‘-[UIViewController _loadViewFromNibNamed:bundle:] loaded the “ThirdView” nib but the view outlet was not set.‘

これは、「”ThirdView”をロードしたけど、viewアウトレットが設定されていないよ！」ということなので、先ほど作成した”ThirdView.xib”をダブルクリックし、「File’s Owner」をクリックし、Identity Inspector を開きます。表示されたinspectorの上部にある「Class」という箇所に「FirstViewController」を設定します。 この状態で　File’s Owner を右クリックすると、Outlets の中に view というのがありますので、それと、File’s Owner というオブジェクトが入っているウインドウ内のview とを接続します。 ここまで出来たら、保存します。 XCode上から、ビルド＆実行してみてください。以下の画像のように、３つ目のviewが表示されると思います。