奈良iPhoneアプリ開発基礎講座

奈良iPhoneアプリ開発基礎講座
第４回
前回やったこと
・画面遷移について
・配列クラス（NSMutableArray，NSArray)を用いたデー
タ保持の方法について
・クイズアプリの作成
今回の流れ
  テーブルビューについて
  ビュー間のデータの受け渡しについて
  カタログアプリの作成
  本講座のおさらい
テーブルビューとは
このように，一つの画面に複数の情報を整列し
て表示できるようにしたビューのことです．デー
タがたくさんあれば，スクロールして全体を見る
ことが可能です．
早速，テーブルビューがどのようなものか実装して試してみます
いつものように，
Simple View Application
で作成します
プロジェクト名はTableViewTestとでもしておきましょう
いつものxib編集画面です．ここからこの画面にテーブルビューを載せていきます．
この画面にテーブルビューを載せる方法はいくつもありますが，今回は前回同様，
もとのビューに，テーブル用のビューを載せるという方法を採用します．
前回同様左ペインのプログラムが入っているフォルダを右クリックして，New File...を
選択します．その後，以下の画面でObjective-C classを選択してNextをクリック．
追加するClassの名前はMyTestViewControllerとしておきましょう．
そして，Subclass ofの部分は，UITableViewControllerを選択します．
ここのチェックも忘れずに
こんな感じでテーブルビューが置かれたxibファイル，MyTableViewController.xibと，そ
れをコントロールするためのプログラムファイルMyTableViewController.h，
MyTableViewController.hファイルができあがります．
ただし，このままでは実行してもテーブルビューは表示されません．元となるメインビュー
（ViewController)の上に載っけられて，初めてこのビューはユーザの目に触れることに
なります．
実行してももとのビューのままです
ViewController.hに以下の記述を追加します．
これで，テーブルビューのプログラム，MyTableViewControllerをこのプログラムから
利用できるようになります．
<ViewController.h>
追加
つぎにテーブルビューを追加します．今回はアプリケーション起動とともにテーブルビュー
を表示させたいので，ViewDidLoadの中にテーブルビュー追加処理を書きます．
追加の仕方は前回の普通のビューの追加と同じ要領です．
<ViewConroller.h>
追加
<ViewController.m>
追加
この時点で実行すると，ちゃんとテーブルが表示されているのがわかります．
これからこのテーブルにデータを載せていきます．
テーブルビューには「セクション」という概念と，「行数」という概念があります．
セクションの設定は，MyTableViewController.mの以下の部分を操作します．
<MyTableViewController.m>
ここでセクションの数を決めています．
今回はセクション数１です．
次に行数を指定します．行数は，テーブルビューに並べたいデータの個数と考えてくだ
さい．
<MyTableViewController.m>
行数は５に指定
この時点で実行しても，見た目は特に変更ありません．
ここから実際にデータをいれていきます．
とりあえずまずは適当にデータをいれてみます．
用意した各行（これをセルといいます）にデータを設定するのは以下の部分です．
<MyTableViewController.m>
この部分にセルのデータを入れます
ためしにこのように入力して実行してみましょう
すると，このように５つのセルにhelloという文字列が表示されているのが確認できます．
ただしこれだとあまり意味がありません．
そこでここで意味のあるデータを作って，それを表示させてみましょう．
配列にご登場願いましょう
今回使う配列も，プログラム全体で使えるようにしたいので，まずはヘッダファイルで
宣言しておきます．
<MyTableViewController.m>
NSArrayとNSMutableArrayの違いを覚えていますか？
NSArrayは一度作成したら変更できない配列，
NSMutableArrayは何度でも中身を変更できる配列です．
viewDidLoadで配列の中身を作成しておきます．
<MyTableViewController.m>
これで配列が完成しました．これをセルに表示させます．
先ほどのhelloと記入した部分を書き換えます．
<MyTableViewController.m>
これで実行してみます．
作った配列の内容がセルに反映されています
現在の状態から，今度は任意の行をタッチすると，画面が遷移するようにしていきましょう．
まずは，遷移先の画面を作ります．
テーブルビューを追加したときと同じ要領で，プログラムが入っているフォルダを右クリック
して，「New File…」→「Objective-C class」を選択します．
Class名はNextViewControllerにします．
Subclass ofは，普通のビューなのでViewControllerです．
これで遷移先に用いるビューのセットができました．
ただ，これだと元に戻れませんので，戻るボタンを追加しましょう．
今回は，ツールバーに戻るボタンを埋め込んでみます．Toolbarを選んで配置します．
ボタンの関連付けとかは後ほど行うことにして，ここまでできたらMyTableViewに戻りま
しょう．
わかりやすくViewに
色をつけてもいいです．
今追加した遷移先のビューがMyTableViewControllerから利用できるようにします．
<MyTableViewController.h>
NextViewControllerを使えるようにしておきます．
viewDidLoadの中で行なっておきましょう．
<MyTableViewController.m>
MyTableController.mには，行がタッチされたときに実行される部分（メソッド）があらかじ
め用意されているので，そこに処理を記述していきます．
<MyTableViewController.m>
このメソッドです．ここにタッチされた時の処理を記述します．
まずは余計なコメントを削除してしまいます．
<MyTableViewController.m>
遷移はaddSubviewというメソッドを利用して，上に乗っけることで実現するのでした．
<MyTableViewController.m>
実行してみましょう．
※追加したビューのサイズがRetina 4 Full Screenだとツールバーが表示されませんので
注意してください．
演習
前回の事を思い出して，遷移先からツールバーのボタンを押すと
元のテーブルビューに戻れるようにしてください．
さて，今度はテーブルのタッチされたセルによって，遷移先に表示されるデータが
異なるという仕組みを実装していきます．
現在の状態では，「どのセルがタッチされたか」という情報を取得していません．そ
れがないと，セル毎のデータを遷移先に表示することができません．
まずは，この情報を取得しましょう．
どのセルがタッチされたかの情報は，実は先ほどaddSubviewをしたメソッドの中に
入っています．
<MyTableViewController.m>
この部分を試しに
このようにして実行してみてください．以下のような出力が得られるはずです．
というわけで，このindexPath.rowという変数に，どのセルがタッチされたかという
情報が入っていることがわかりました．
この情報と，配列をうまくつかって，遷移先のビューにデータを渡してあげましょう．
もう一度itemArrayを見ると，itemArrayの部屋番号（要素番号）と，indexPath.row
の番号が対応しているのがわかるはずです．
itemArrayの
部屋番号
itemArrayの中身
indexPath.rowの値
0
1番目のセルです
1
2番目のセルです
1
2
3番目のセルです
2
3
4番目のセルです
3
4
5番目のセルです
4
一致
0
以上のことから，itemArrayから，indexArray.row番の部屋番号の要素を遷移先に
渡してあげれば，遷移先のビューは無事にデータを表示できるようになるはずです．
データを渡すために，NextViewController側に，受け取る変数を用意します．
今回はitemArrayに入っている文字データだけなので，受け取る変数はNSStringで
OKです．
<NextViewController.h>
さらに，MyTableViewからデータを受け渡すためのメソッドを用意します．
<NextViewController.h>
<NextViewController.m>
MyTableViewController側から，今作ったメソッドを呼び出して，データを渡します．
<MyTableViewController.m>
追加
NextViewController側は，受け取ったデータを表示させましょう．
データ表示用のラベルを配置
showLabelという変数名でプログラムに登録
しましょう
この作業はだいぶ慣れてきたのではないでしょうか．
<NextViewController.h>
<NextViewController.m>
さて，MyTableView側から渡されたデータはどの時点で表示させましょうか．
実はこのタイミングが少し難しかったりします．
この遷移ビューが表示された瞬間に表示させるのがベストです．
そして，「ビューが表示された瞬間」に実行されるメソッドというのが存在します．
それが，viewDidAppearというメソッドです．
これはviewDidLoadのように最初からプログラムに書いていないので，自分で追加します．
追加
さて，これで実行してみましょう．
データを渡すことができていることが確認できます

Download Report