[iOS]StoryboardでTODOリストアプリを作ろう(2/3) TODO項目の入力画面とカスタムクラスの作成編

「Storyboardで始めるiPhoneアプリ開発シリーズ」の第四回目になります。
前回の「[iOS]StoryboardでTODOリストアプリを作ろう(1/3) 準備編 MasterDetailApplicationとUITableViewについて」に引き続き、TODOリストアプリの開発を進めていきます。今回はアプリに必要なオブジェクトを追加するところからはじめていきます。

必要なオブジェクトを追加する

追加ボタンを追加する

Xcode画面左側のファイル一覧からMainStoryboard.storyboardファイルを選択してMainStoryboard.storyboardファイルを表示させます。

Storyboard上で追加ボタンを追加します。
右側のオブジェクト一覧からBar Burron ItemをMasterシーンのNavigationBarに追加します。

追加したボタンを選択した状態で、画面右にattributes inspectorを表示させ、ボタンの種類を変更します。identifier項目をクリックし、Addを選択します。

追加ボタンに変更されました。ついでにNavigationBarのタイトルを、MasterからTODOへ変更します。(タイトルをダブルクリックすると編集できます)
今後、この画面をメイン画面と呼ぶことにします。

入力画面用のTableViewControllerを追加する

次に入力画面を追加します。入力画面はTableViewを使い、CellはStaticCellを選択することにします。
StaticCellを使うにはTableViewControllerを使わなければならないので、TableViewControllerを追加します。
TableViewControllerはUIViewControllerの機能を継承し、UITableViewを元から持っているViewControllerです。

画面右のオブジェクト一覧から、TableViewControllerを追加します。

次にメイン画面の追加ボタンを押すとmodalセグエで入力画面へ遷移するように設定します。
controlキーを押しながら追加ボタンをTableViewControllerまでドラッグし、ドロップします。メニューが出てくるのでmodalを選択します。

次に追加したTableViewControllerにNavigationControllerを追加します。
TableViewControllerを選択した状態で、Xcodeメニューの「Editer」→「Embed In」→「NavigationController」を選択し、NavigationControllerを追加します。

NavigationControllerが追加されました。

入力画面の要素を作成

TableViewのContentを変更する

入力画面を作っていきます。
先ほど追加したTableViewControllerのTableViewをクリックしてTableViewを選択状態にします。

attributes inspectorのContent項目をクリックし、Static Cellsを選択します。

StaticCellに変更されました。
TableView部分の表示もPrototype ContentからStatic Contentに変わりました。

TableViewのスタイルを変更とCellの内容の調整を行う

次にTableViewのスタイルをGroupedに変更します。
attributes inspectorのStyle項目をクリックし、Groupedを選択します。

スタイルがGroupedに変更されました。
今回作る入力画面では、セルを１つだけ使うので、不要なセルを削除します。
2行目のセルをクリックして選択した後にdeleteキーを押してセルを削除します。
同様にあとひとつセルを削除してセルが１つになるようにします。

セルが１つになりました。
文字入力用のUI部品を追加します。
右側のオブジェクト一覧からText Fieldを、Cellのところまでドラッグします。

追加したTextFieldの幅を調整します。
下の画像くらいのサイズに変更します。

次にTextFieldの見た目を変更します。デフォルトではシャドウのついたTextFieldになっていますが、何もついていないタイプのTextFieldに変更します。
BorderStyle項目の中の一番左のタイプを選択します。

NavigatinBarにボタンを追加する

次にNavigatinBarにcancelボタンとsaveボタンを追加します。
右側のオブジェクト一覧からBar Button Itemを、NavigationBarへドラッグします。左端と右端に１つずつ追加します。

Bar Button Itemが２つ追加されました。cancelとsaveボタンは用意されているので、それに変更します。

右側のボタンを選択した状態でattributes inspectorのIdentifer項目のコンボボックスの中からSaveを選択します。
左側のボタンも同様の操作でタイトルをcancelに変更します。

変更できました。

カスタムクラスの作成

cancelとsaveボタンの追加は完了しましたが、このままではボタンを押しても何も起きません。

saveボタンとcancelボタンそれぞれ押した時の動作は以下のようになるようにします。

1. saveボタンを押すと、TextFieldに入力された文字列をメイン画面に渡す。入力画面を閉じてメイン画面に戻る。メイン画面に戻るとメイン画面にTODO項目が追加されている。
2. cancelボタンを押すと、入力画面を閉じてメイン画面に戻る。メイン画面に戻ってもメイン画面に変化はない。

入力画面を選択した状態でIdentity inspectorを見ると、UITableViewControllerクラスが割り当ててあります。
ボタンを押したことを検知し、それをメイン画面に伝えためのコードを追加したいので、UITableViewControllerを継承したクラスを作成します。

クラスファイルの作成

左側のファイル一覧のTodoListSampleグループを右クリックしてNew File…を選択します。

Objective-C classを選択してNextをクリックします。

ClassはAddItemViewControllerSubclass ofはUITableViewControllerにします。
また、その下の項目にはチェックを入れず、「Next」をクリックします。

保存場所を選択しCreateをクリックします。

AddItemViewController.hとAddItemViewController.mファイルが作成されました。

作成したクラスを入力画面へ割り当てる

次にStoryboard上で入力画面にAddItemViewControllerを割り当てます。
Storyboardを表示し、入力画面を選択し、Identity inspectorのClass項目にAddItemViewControllerと入力します。

入力画面にAddItemViewControllerを割り当てることができました。

TableViewまわりのコードを修正

画面右上のViewの右端のボタンを押してユーティリティエリアを非表示にします。

入力画面を選択した状態で、Editorの真ん中のボタンを押してアシスタントエディタを表示します。

AddItemViewController.hが表示されるので、AddItemViewController.mファイルの方を選択します。

AddItemViewController.mファイルが表示されました。これからコードを編集していきます。

warningが2箇所出ているかと思います。
この二箇所はTableViewのセクション数や行数を指定するメソッドですが、数の指定が0になっているのでwarningが出ています。

#pragma mark - Table view data source行より下の３つのメソッドの役割は以下のようになっています。

メソッド名	内容
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView	TableViewのセクション数を指定する
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section	セクション内の行数を指定する
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath	セルの内容を指定する

入力画面の行数／セクション数／セルの内容はStoryboard側で指定しているので、これらのメソッドは不要です。

下の画像のように3つのメソッドを選択して、commandキーを押しながら/キーを押し、コメントアウトします。

コメントアウトされwarningが消えました。

ボタンのアクションハンドラの追加とTextFieldの登録

AddItemViewController.mファイルにアクションハンドラを追加する

ボタンが押された等のイベント発生時に呼ばれるメソッドであるアクションハンドラを実装していきます。SaveボタンとCancelボタンそれぞれに対して１つずつ作ります。
Saveボタンをcontrolキーを押しながらクリックし- (void)viewDidLoadの上までドラッグし、ドロップします。

入力画面が出てくるので、Name項目にclickedSaveButtonと入力しConnectをクリックします。
ここで入力した名前がsaveボタンが押された時に呼ばれるメソッド(アクションハンドラ)の名前になります。

追加できました。

Cancelボタン用のアクションハンドラも同様のやり方で追加します。
メソッド名はclickedCancelButtonにし、- (IBAction)clickedSaveButton:メソッドの下に追加します。
追加後は下のようになります。

また、今追加したメソッドが呼ばれた時にログが出力されるようにします。
以下のようにNSLog()関数を追加します。NSLog()関数はプログラムの実行結果を確認するために使います。
@"と"で囲まれた部分が、ログ出力用の画面に出力されます。

- (IBAction)clickedSaveButton:(id)sender
{
    NSLog(@"clickedSaveButton");
}

- (IBAction)clickedCancelButton:(id)sender
{
    NSLog(@"clickedCancelButton");
}

追加したメソッドの動きを確認する

ここでRunボタンをクリックしてアプリを実行してみます。
メイン画面で追加ボタンをタップして、入力画面に遷移させ、saveボタンとcancelボタンを押してみます。

saveボタンを押せばclickedSaveButtonがcancelボタンを押せばclickedCancelButtonというログが、画面下部のデバッグエリアに表示されると思います。

(デバッグエリアが表示されない場合はXcode画面右上のViewの真ん中のボタンを押してデバッグエリアを表示してください。)

ボタンを押した際に、先ほど追加したclickedSaveButtonメソッドやclickedCancelButtonメソッドが呼ばれることが確認できました。
Stopボタンを押してアプリの実行を止めて、編集に戻ります。

AddItemViewControllerにTextFieldを登録する。

Storyboard上で入力画面に追加したTextFieldに入力された文字列を取得して、メイン画面に渡す必要がありますが、
そのためにはAddItemViewControllerクラスにTextFieldを登録する必要があります。

MainStoryboard.storyboardファイルを表示させ、
ボタンのアクションハンドラを追加した時と同様に、TextFieldをcontrolキーを押しながらAddItemViewController.mファイルまでドラッグしてドロップします。
下の図のように@interface AddItemViewController ()行と@endの間に追加します。

メニューが出てくるので、NameはtextLabelと入力します。

追加できました。

まとめ

今回はTODO項目を入力する画面を作りました。次回は入力した文字列をメイン画面に渡す処理を実装し、TODOアプリを完成させます。