Xcode 5のStoryboardでUItable Viewを使用

iOSプログラミングコースを最初に開始すると、UItableViewに関するチュートリアルを書き、UItableViewを使用して簡単なテーブルアプリケーションを作成する方法を示しました.これは私たちが最も人気のあるチュートリアルの一つです.しかし、このチュートリアルはXcode 5では適用されないことに気づくかもしれません.最新版のXcodeはインタフェースジェネレータ(Interface Builder)におけるStoryboardの使用を促進した.Storyboardは開発プロジェクトの候補ではなく、デフォルトです.これは、そのチュートリアルが適用されない理由の一つです.
いずれにしても、Xcode 5とiOS 7のテーブルビュー(Table View)を完全に更新するチュートリアルに行くことにしました.今から始めましょう.
UItableViewチュートリアルに進む
まず、iPhoneアプリの中のテーブルビュー(Table View)とは何ですか?表ビューはiOSアプリケーションの基本的なUI要素です.ある意味では、多くのアプリケーションはテーブルビューを利用して一連のデータを表示します.最良の例は、内蔵された電話(Phone)アプリケーションです.あなたの連絡先はテーブルビューに表示されます.もう1つの例はメール(Mail)アプリケーションです.テーブルビューを使用して、メールボックスとメールを表示します.文字データを表示するだけでなく、表ビューでも画像形式のデータを表示できます.YouTubeとAirbnbの2つのアプリケーションが最高の例です.
単純な表項目の作成
表ビューの概念を持って、簡単な応用を開発しましょう.もしあなたが本当にiOSのプログラミングを学びたいなら、このチュートリアルを読むだけではありません.あなたのXcodeを開けてコードを書き始めましょう!これはプログラミングを学ぶ最善の方法です.
Xcodeを開くと、「Single Viewアプリケーション」テンプレートを選択し、新しいプロジェクトを作成します.
「Next」をクリックして続行します.次に、Xcodeプロジェクトの作成に必要なすべてのオプションを入力します.プロジェクト名(Product Name):SimpleTable--これはあなたのアプリケーションの名前です.会社識別子(Company Identifier):com.appcoda--これは実際に別の形式のドメイン名を書きます.もし自分のドメイン名があれば、自分のドメイン名を使うことができます.そうでなければ、私のドメイン名を使用するか、「edu.self」クラス接頭辞(Class Prefix):SimpleTable--Xcodeはクラス接頭辞を使用して自動的にクラス名を付けることができます.将来的には、自分のクラスの接頭辞を選択したり、いっそ空にしたりすることができます.しかし、現在のこのプロジェクトは、やはり簡単で、それを「SimpleTable」に設定しています.デバイスシリーズ(Device Family):iPhone--このプロジェクトのために「iPhone」を選択するだけです.
次に「Next」をクリックして次へ.Xcodeは、この「SimpleTable」プロジェクトを保存する場所を尋ねます.Desktopなどのフォルダを選択して、プロジェクトを保存します.バージョン管理(Source Control)のオプションを選択せずに、「作成」(Create)をクリックして続行します.フォルダを選択してプロジェクトを保存します.あなたが確認した後、Xcodeは自動的にあなたの選択に基づいて「SimpleTable」プロジェクトを作成します.完成した画面は次のようになります.
デザインビュー
まず、ユーザーインタフェースを作成し、テーブルビューを追加します.Main.storyboardを選択してStoryboardインタフェースに変換します.
SimpleTableプロジェクトのStoryBoard
オブジェクトライブラリ(Object Library)で「Table View」オブジェクトを選択し、ビューにドラッグします.
高さに少し挑戦すると、ステータスバー(status bar)を隠すことができません.表ビューを挿入すると、画面が下のように見えるはずです.
あなたのアプリケーションを初めて実行
深く進む前に、シミュレータを使ってアプリケーションを実行してみましょう.「Run」ボタンをクリックしてアプリケーションを構築し、テストします.シミュレータの画面には次のように見えます.
簡単ですか?あなたのアプリケーションのためにテーブルビューを設計しました.しかし、これまでビューには何もありませんでした.次に、テーブルデータを追加するコードを書きます.
テーブルデータの追加
プロジェクトナビゲーションに戻り、「SimpleTableViewController.h」を選択します.「UIViewController」の後に「」を付ける

#import 

@interface SimpleTableViewController : UIViewController 

@end

UITableViewDelegateおよびUITableViewDataSourceは、Objective−Cにおけるプロトコルである.基本的に、テーブルビューにデータを表示するには、プロトコルに定義された要件を受け入れ、実装する必要があるすべての方法を実装する必要があります.
次に、アプリケーションのコードを書き始めます.「SimpleTableViewController.m」を選択し、テーブルデータを処理するインスタンス変数を定義します.

@implementation SimpleTableViewController
{
    NSArray *recipes;
}

viewDidLoad:メソッドでは、次のコードを追加して「recipes」配列を宣言します.一連のメニュー(recipes)でデータを初期化した.

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Initialize table data
    recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

最後に,datasourceとtableView:numberOfRowsInSectionの2つの方法を追加しなければならない.この2つの方法はtableView:cellForRowAtIndexPathプロトコルの一部である.最初の方法は、テーブルビューがこのセグメント(section)にどれだけの行があるかを通知することです.次のコードを追加します.UITableViewDataSourceメソッドは、count:データのエントリの数を返すだけです.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [recipes count];
}

次に、他の必要な方法を実現し続けます.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    return cell;
}

tableDataメソッドは、テーブルの各行が表示されるときに呼び出されます.cellForRowAtIndexPath:とUITableViewがどのように働くかについての概念を以下に説明し、見終わったらもっとよく理解できるはずです.
今、Runボタンをクリックして、最後のプログラムをテストします.ああ!あなたが見ているのはまだ空のアプリケーションです.それは前のようです.
どうしてまだ空いてるの?テーブルデータを生成するコードをとっくに書いており,必要な方法も実現している.しかし、なぜテーブルビューが私たちが予想したように表示されなかったのですか?
もう一つやることがある.
DataSourceとDelegateの接続
チュートリアルの最初の「Hello World」ボタンのように、作成した2つの方法とテーブルビューの間に接続を確立する必要があります.UITableDataSourceに戻り、テーブルビューを選択します.キーボードのControlキーを押しながら、テーブルビューをクリックし、dockの「Simple Table View Control」にドラッグします.あなたのスクリーンは次のようになります.
2つのボタンを離すと、1つのスプリング(pop-up)にMain.storyboardとdataSourceが表示されます.テーブルビューをもう一度選択できます.Utility領域の上には、delegate(右端のtab)でプロジェクトに存在する接続が表示されます.
あなたのアプリケーションをテスト
最後に、あなたのアプリケーションをテストすることができます.「Run」ボタンをクリックし、シミュレータにアプリケーションをロードします.
Thumbnailをテーブルビューに追加
この表のビューは地味に見えますよね?各行に図を1枚加えるとしたら?iOS SDKは、これを簡単に行うことができます.行ごとにConnection Inspectorのコードを挿入する必要があります.まず、サンプル画像をダウンロードします.自分の画像も使用できますが、「thumbnail」と命名する必要があります.プロジェクトナビゲーションで「SimplyTable」フォルダを右クリックし、「Add Files to SimpleTable...」を選択します.
ダウンロードした画像ファイルを選択し、チェックボックス(checkbox)で「Copy items to destinationグループs folder」を選択します.このオプションを選択すると、画像はプロジェクトフォルダの下にコピーされます.
次に、creme_brulee.jpgファイルを編集し、次の行のコードをSimpleTableViewController.mメソッドに追加し、「tableView:cellForRowAtIndexPath」の前に置きます.

cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

編集後、あなたのコードは次のように見えます.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

    return cell;
}

テーブルビューのグリッドには、ピクチャを表示するデフォルトのプロパティがあります.上の行のコードは画像をロードして、表の格子の画像領域に表示します.今、再び「Run」ボタンをクリックすると、SimpleTableアプリケーションが各行に画像を表示するはずです.
まとめ
実はテーブルビューを作成するのは簡単ですか?表ビューはiOSプログラミングで最も一般的な要素の一つです.このチュートリアルを読んで、私たちと一緒にこのアプリケーションを作成すると、テーブルビューの作成方法について基本的な理解があるはずです.私はできるだけここの内容を簡単に話します.実際には、テーブルのデータは上記のようにコードに直接存在しません.一般的には、ファイル、データベース、または他の場所からロードされます.次のチュートリアルでは、ファイルからテーブルデータを格納およびロードする方法を学習します.さらに深く進む前に、テーブルビューがどのように動作しているかを完全に理解できるようにしてください.そうでなければ、このチュートリアルをもう一度読み直す必要があります.
参考までに、ここから上のXcodeプロジェクトをダウンロードすることができます.
原文:Working with UItable View in Xcode 5 Using Storyboard翻訳:Segmentfault