StoryBoardを使ってNavigationController+TableViewController(XCode4.2/iOS5)

Objective-C

StoryBoardを使って、NavigationController+TableViewControllerでサンプルアプリをつくります。

  • つくるもの

ナビゲーションバーつきのTableViewController
セルは動的に生成、クリックするとViewControllerに遷移

  • 手順
    • プロジェクトの作成

Single View Applicationを選択。

今回Product Name(プロジェクトの名前)は「sotryBoardSample」にしました。
下部の"Use StoryBoard"と"Use Automatic Reference Counting"にチェック。

Nextを押し保存して、プロジェクトを作成します。

    • TableViewControllerの配置

右ペインが出ていなければ開き、右下からTable View ControllerをすでにあるViewControllerの左へドラッグしてきます。

ぽい。

右ペインの"Is Initial View Controller"にチェックを入れます。

アプリを起動すると、このTableViewControllerが先に表示されるようになります。

    • NavigationControllerの挿入

フォーカスはTableViewControllerに合わせたまま、上部メニューの"Editor"から"Embed In"→"Navigation Controller"を選択。

TableViewControllerの更に左側に、NavigationControllerが挿入されました。

    • TableViewController→ViewControllerへ紐付け

中央ペインのセル部分をクリック。

control+ドラッグして、右のViewControllerではなす。

ビューの遷移方法を聞かれるので、pushを選択。

じゃん。segueができました。
ちゃんとナビゲーションバーも出てきます。

わかりやすいように、ナビゲーションバーにタイトルをつけます。
バー中央をダブルクリックするか、右ペインのTitleにそれぞれ"List View" "Detail View"と入力。

先ほど作成したsegueをクリックし、右ペインのIdentifierに"rowNumber"と入力。

デバッグ用に、ViewControllerにLabelを置いておきます。
ここでは"row number"と変えてありますが、そのままでも大丈夫です。

    • TableViewControllerのクラスを作成

左ペインのStoryBoardSampleフォルダを右クリックして、New File...を選択。

UIViewController subClassを選び、

クラス名を"ListViewController"に。
ドロップダウンからUITableViewControllerを選択、下ふたつのチェックは外して、作成。

    • storyboardと紐付け

いったんstoryboardに戻り、TableViewControllerを選択。
右ペインの「Identity Inspector」で、ListViewControllerクラスを紐付け。

    • コードの書き換え

まず、ListViewController.mから。

生成するセクションとセルの個数を変更します。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
#warning Potentially incomplete method implementation.
    // Return the number of sections.
    return 0;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
#warning Incomplete method implementation.
    // Return the number of rows in the section.
    return 0;
}

この戻り値を、1セクション、3セルに変更。
#warning〜も取ってしまいます。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return 3;
}

セル内には、何番目かを表示させるようにします。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    
    return cell;
}

これを、

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row];

    return cell;
}

一行追加。
indexPath.rowで、いま作っているセルが何番目かを取得できます。

デリゲートメソッドも変更。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Navigation logic may go here. Create and push another view controller.
    /*
     <#DetailViewController#> *detailViewController = [[<#DetailViewController#> alloc] initWithNibName:@"<#Nib name#>" bundle:nil];
     // ...
     // Pass the selected object to the new view controller.
     [self.navigationController pushViewController:detailViewController animated:YES];
     */
}

ViewControllerに遷移するように書き換えます。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
    [ud setValue:[NSString stringWithFormat:@"%d", indexPath.row] forKey:@"num"];

    [self performSegueWithIdentifier:@"rowNumber" sender:self];
}

上の二行は、NSUserDefaultsという便利箱に今何番目が選択されたのかを収納しています。
performSegueWithIdentifierメソッドは、引数のIdentifierをもつsegueでつながっているControllerに遷移しますよ、というもの。

ここまででいったん起動すると、こんな感じ。


ちゃんと行き来はできますが、どのセルが選択されたかわからないため、細工を加えます。

    • Labelの紐付け

editorの分割をAssistant editorにして、左側にstoryboard、右側にViewController.hを表示します。

storyboardのラベルをクリック、右までcontrol+ドラッグして、"@interface ViewController : UIViewController"の下ではなします。

名前は"numberLabel"として、OK。

次に、ViewController.mを一箇所書き換えます。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

ここに、二行追加。

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
    numberLabel.text = [ud valueForKey:@"num"];
}

先ほど収納した便利箱から値を取り出して、ラベルのテキストに入れています。


実行してみます。

    • 完成


表示されました。


次回はこれとLocal Notification(通知センター)を組み合わせて、自分用ユーティリティアプリをつくります。