TabBarControllerと仲良くなりたい

iphone

TabBarControllerと遊んだ際の記録。忙しい人は最後の方のまとめだけどうぞ。

「ファイル - 新規プロジェクト...」から新規プロジェクトを作成、アプリケーションテンプレートには「Tab Bar Application」を選択。名前は適当に「TabBarApp」とでも。

プロジェクト作成後にとりあえずアプリケーションを起動してみる。FirstViewのタブとSecondViewのタブが出てくることをそれとなく確認。ここに新しいタブを追加してゆく。

新しいタブ用にViewControllerをひとつ作成する。「ファイル - 新規ファイル...」から「UIViewController subclass」を選択。Interface Builderで画面を作成するのでオプションの「With XIB for user interface」のチェックを忘れずに(デフォルトでONだけどね)。ファイル名はFirstとSecondの次のタブなので「ThirdViewController.m」とでもしておく。

プロジェクトのルートにファイルが作成されたりするので、*.hと*.mをClassesへ、*.xibはResourcesへ移動しておく。

あと、XIBファイルの名前が「ThridViewController.xib」となっているけど、「ThridView.xib」に名前を変更しておいた方が名が体を表していていい感じなのでこのタイミングで名前変更しておく。

次は、今作成したThirdViewControllerをタブへ追加します。Resources/MainWindow.xibをダブルクリックしてInterface Builderを起動。

ドキュメントウインドウの中の「Tab Bar Controller」下がこんな感じになっているはず。

  • Tab Bar Controller: UITabBarController
    • Tab Bar: UITabBar
    • Selected First View Controller (First): FirstViewController
      • View: UIView
      • Tab Bar Item (First): UITabBarItem
    • Second View Controller (Second): SecondViewController
      • Tab Bar Item (Second): UITabBarItem

ライブラリウインドウから「View Controller」を選択、ドラッグ&ドロップでSecond View Controllerの下に追加する。(TabBarControllerへと置くだけで自動的にUITabBarItemをセットしてくれるのが地味に便利）

ここまでで一度セーブして、Inteface BuilderからXcodeへ戻り、アプリケーションを実行して、3つめのタブができていることを確認する。

この時点ではタブが出来ただけでまだ何も表示されていないので、さきほど作成したThirdViewControllerを表示するようにしてゆく。

  • ViewController(Third)を選択して...
    • Attributesタブ
      • NIB Nameへ「ThirdView」をセット
    • Identityタブ
      • Class Identity - Classへ「ThirdViewController」をセット
  • Tab Bar Itemを選択して...
    • Attributesタブ
      • Bar Item - Titleへ「Third」をセット

これでThirdViewControllerが表示されるようになるのだが、肝心のThirdView.xibが空っぽなため何も表示されない。のでボタンをひとつ追加しThirdViewControllerのメソッドを呼び出してみる。

まずはXcodeのResources/ThirdView.xibをダブルクリックしてInterface Builderを起動する。

Viewへボタンをひとつ追加しボタンのタイトルを「Hello」とする。

次にhelloボタンを押した時のイベントハンドラを定義し、Helloボタンの「Touch Up Inside」イベントへ紐づけてやる。

...
// ThridViewController.h
@interface ThirdViewController : UIViewController {
}
- (IBAction)hello;
@end
...
// ThridViewController.m
@implementation ThirdViewController
- (IBAction)hello {
  NSLog(@"hello");
}
...

アプリケーションを起動し、Thirdタブを開いてHelloボタンを押すとコンソールにHelloが表示されればOK。

まとめ

  • 新規プロジェクトを作成
    • テンプレートは「Tab Bar Application」
  • 新規UIViewControllerファイルを作成
    • テンプレートは「UIViewController subclass」
      • ThirdViewController.h
      • ThirdViewController.m
      • ThirdView.xib（手動で名前を変える)
      • ディレクトリの移動も忘れずに
  • Resouces/MainWindow.xib
    • TabControllerの下にライブラリからUIViewControllerを追加
      • (追加するとUIViewControllerの下に自動的にBarItemが追加されるので便利)
      • NIB Name: 「ThirdView」
      • Class Identity: 「ThirdViewControlelr」
      • Bar ItemのTitle: 「Third（適当な文字でOK)」
  • Resouces/ThirdView.xib
    • 適当にデザインしてください

以上TabBarControllerはこんな感じで使うみたい。

アイコンを変えたりとか、タブの選択可否や、プログラムからのタブの構築なんかはまた後でやりたいな。