[iOS]StoryboardでTODOリストアプリを作ろう(1/3) 準備編 MasterDetailApplicationとUITableViewについて

はじめに

「Storyboardで始めるiPhoneアプリ開発」シリーズの第三回目になります。
第一回目の「[iOS]Storyboardで始めるiPhoneアプリ開発 #1 – pushセグエを使う」と、第二回目の「[iOS]Storyboardで始めるiPhoneアプリ開発 #2 – modalセグエを使う」ではStoryboardの２種類のセグエについて説明しましたが、今回はもう少し実用的なアプリを作っていきたいと思います。

今回はStoryboardを使って簡易的なTODOリストアプリを作っていきます。

第一回目や第二回目と比べてコードを書く場面が増えてきますが、ささっと動くものを作ってしまいましょう。
開発ツールXcodeの操作や書き加えるコードはすべて書いてありますので、この記事を読みながら手を動かしていけば完成させるこどができるはずです。
作ったアプリが動く楽しさを感じていただければ幸いです。

開発に使う環境

今回もXcode4.6.2を使用します。
その他の設定は以下の通りとします(デフォルトで以下のようになっているかと思います)

• iOS SDK 6.1
• Apple LLVM compiler 4.2
• Storyboard使用
• ARC使用

Xcodeの概要とインストール手順等は以下の記事などを参考にしてみてください。
iOSアプリ開発初心者に捧ぐ開発環境Xcodeの概要とインストール

プロジェクト作成

今回はMaster-Detail Applicationテンプレートからプロジェクトを作成し、手を加えていきます。
Xcodeを起動し、Welcome to Xcode画面のCreate a new Xcode projectを選択するか、
Xcodeのメニューの「File」→「New」→「Project」を選択して、プロジェクト作成画面を開きます。

Master-Detail Applicationを選択して、Nextをクリックします。

以下のようにアプリの情報を入力し、Nextをクリックします。

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

テンプレートからプロジェクトが作成されました。

Master-Detail Applicationについて

今回はMaster-Detail Applicationテンプレートからプロジェクトを作成しましたが、まずはMaster-Detail Applicationがどのようなアプリなのかを見てみます。
画面左上のRunボタンを押してアプリを実行します。

各部の名称

実行すると以下の画面が出ると思いますが、この画面をMaster画面と呼ぶことにします。
Master画面は大きくわけて３つの部分から成り立っています。
上から順にStatusBarNavigationBarTableViewと呼びます。

StatusBarは時刻や電池残量、電波状況等を表示する部分で、非表示にすることもできます。
NavigationBarの管理は本連載第一回目で使用したNavigation Controllerが担当し、ボタン等を設定できます。
TableViewはiOS標準の「設定」アプリなどで使われるオブジェクトです。単一の列のみの表を作ることができ、リストの表示や、階層構造になっているデータの表示に向いています。このアプリを起動した直後は、行が０行の状態になっています。

機能の確認

追加(Add)ボタンを押すことで、行を追加できます。
現在時刻(標準時)のラベルが付いた行が追加されました。

追加ボタンを押すたびに現在時刻が書かれた行が追加されます。
それぞれの行をタップすると、詳細画面に遷移します。
この画面遷移では本シリーズの第一回目で使用したPushセグエが使われています。

Masterボタンを押すとMaster画面に戻ることができます。

Editボタンを押すとボタンのタイトルがDoneに変わり、Master画面のTableViewは編集モードになります。
削除したい行の左端の赤いアイコンを押し、右端のDeleteボタンを押すと削除されます。
編集モードを終了するにはDoneボタンを押します。

画面左上のStopボタンを押してアプリの実行を終了させます。

Master-Detail Applicationの全体像

Master-Detail Applicationの全体像は下の図のようになっています。
画面関連はオレンジ色に、データの流れは黄緑にしてあります。

TODOリストアプリの全体像

そこで、Master-Detail Applicationに手を加えてTODOリストアプリを作成します。
機能はTODO項目の作成／削除／表示の３つで、画面は２つのみというシンプルなアプリを作ります。

画面遷移と、データの流れをまとめると以下のようになります。

TableViewについて

TableViewのスタイルは２種類

ここでTableViewについてもう少し詳しく見ていきましょう。
TableViewは２種類のスタイルから見た目を選ぶことが出来ます。

下の図の画面にはどちらもTableViewが使われています。
左の画面は設定アプリの画面でこちらはGroupedスタイルになります。
右の画面はMaster-Detail Applicationに使われているTableViewでPlaneスタイルのTableViewになります。
また、それぞれの行はUITableViewCellと呼ばれるオブジェクトになります。

Storyboard上でのUITableViewCellの作り方は2種類

UITableViewCellはそのTableViewに必要な行数の分だけ作りますが、作りかたによって、StaticCellとDynamicCellの２種類に分類できます。

StaticCellはStoryboardで直感的にデザインでき、ほぼすべての設定をStoryboardで完結することができます。
しかし、アプリ実行中にCell(行)の数を変えられないといった制約があります。
また、行数が５行なら５個のCellをStoryboardで作ることになるので、行数が多い場合には不利です。

DynamicCellはStoryboard上でプロトタイプのCellを作り、行数などはソースコード内で指定します。
少し敷居が高くなりますが、柔軟にCellを作ることができます。
Master-Detail ApplicationのMaster画面のTableViewは、アプリの実行中にCellの数が増減するので、StaticCellでは実現出来ません。アプリ実行中に動的に変更が行われる場合にはDynamicCellを使います。
また、大量のCellをつくる場合に有利です。

これから作っていくTODOリストアプリですが、動的にCell数を増減させる必要のあるメイン画面ではDynamicCellを、
Cell数が固定で大丈夫な入力画面ではStaticCellを使ってみたいと思います。

テンプレートの不要な部分を削除する

それではTODOリストアプリを作っていきましょう。
まずは先ほど作成したMaster-Detail Applicationの中の使わない部分を削除していきます。

Detail View Controller - Detailシーンを削除する

左側のファイル一覧からMainStoryboard.storyboardファイルを選択して、MainStoryboard.storyboardファイルを表示させて、Detail View Controller - Detailシーンを選択してdeleteキーを押し、削除します。

追加ボタンを削除する

次に追加ボタンを１度削除します。

Storyboard上には表示されていませんが、どこで設定しているのでしょうか？
この追加ボタンを表示する設定はMaster画面に割り当てられたクラスのソースコード内に書かれています。

ファイル一覧からMasterViewController.mファイルを表示させます。
viewDidLoadメソッドを見ると、以下のようになっていますが、

- (void)viewDidLoad
{
    [superviewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    self.navigationItem.leftBarButtonItem = self.editButtonItem;

    UIBarButtonItem *addButton = [[UIBarButtonItemalloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAddtarget:selfaction:@selector(insertNewObject:)];
    self.navigationItem.rightBarButtonItem = addButton;
}

UIBarButtonItem…から addButton;まで(追加ボタンに関する記述部分)を削除して以下のようなるように編集します。

- (void)viewDidLoad
{
    [superviewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    self.navigationItem.leftBarButtonItem = self.editButtonItem;
}

これで追加ボタンは表示されなくなりました。

まとめ

今回の「準備編」はプロジェクトを作成して、使用するテンプレートやオブジェクトについて見ていき、TODOリストアプリを作る準備を行いました。
次回からはさっそくアプリの開発にがっつり入っていきたいと思います。