2015年12月1日火曜日

Swift とストーリーボードで iOS アプリを作成(3)テーブルビューにデータを表示する

前回ポストの「Swift とストーリーボードでiOSアプリを作成(2)」ではデータモデルを定義して、リポジトリの作成とテストを行いました。現時点ではテーブルビューには何も表示されません。今回は、テーブルビューに対してデータソースを設定して、リポジトリで取得したデータを表示できるようにします。
今回の作業概要:
  • 製品一覧シーンのテーブルビューに製品リポジトリ(ProductRepo)の findAll() で取得した製品一覧を表示します。
  • 映画前売り券一覧シーンのテーブルビューに映画前売り券リポジトリ(MovieRepo)の findAll() で取得した前売り券一覧を表示します。


新しいブランチを作成

前回と同様に変更を行う前に、新規ブランチ(createTableViewCtrl)を作成します。

1. 製品一覧シーンのテーブルビューにデータを表示

テーブルビューはテーブルビュー・コントローラ (UITableViewController)で管理されます。これは UIViewController のサブクラスで、テーブルビュー関連ロジックの処理に特化されています。このシリーズの最初のポスト「Swift とストーリーボードでiOSアプリを作成(1)」で既に、テーブルビュー・コントローラの"製品一覧シーン"と"映画前売り券一覧シーン"をストーリーボードに追加しました。
メイン・ストーリーボードのアウトラインビューで、製品一覧シーンを選択すると、テーブルビュー・コントローラが1つのセルしか持たないのがわかります:

このセルは他のセルに対するプロトタイプを表します。ここでは製品データを表示するためのカスタムセルを設定します。
  • カスタム・テーブルセルの作成
    テーブルビューの個々の行は、テーブルビュー・セル (UITableViewCell) で管理されます。セルは、コンテンツの描画を担います。
    UITableViewCellのサブクラスの作成:
    1. File > New > File を選択(または Command-N)
    2. 表示されたダイアログで iOS / Source / Cocoa Touch Class を選択して Next をクリック
    3. 表示された次のページで以下のように入力して Next をクリック

    4. 表示された次のページでは、デフォルトのままにして、Create をクリック
    ProductTableViewCell.swift(ProductTableViewCell クラス) が作成されます。
  • テーブルビューに対してカスタムセルを設定
    1. アウトラインビューで製品一覧シーンのテーブルビューセルを選択
    2. アイデンティティ・インスペクタを開き以下のように設定します
      Class:ProductTableViewCell
    3. 属性インスペクタで、次のように設定
      identifier:ProductTableViewCell
    4. サイズ・インスペクタを開いて、次のように設定します:
      Row Height:60
      
このフィールドの次の Custom チェックボックスを選択

    5. 右下部のオブジェクトライブラリから、テーブルセルに4つのラベルをドラッグして以下のように配置します:
このままでは、まだテーブルビューには何も表示されません。作成したテーブルセルのUI(この例では上の4つのラベル)とコードを接続して、コードを通してセルに表示コンテンツを供給する必要があります。
  • ビューと ProductTableViewCell.swift コードを接続する:
    1. テーブルビュー・セルのラベルを選択
    2. アシスタント・エディタを開いて、ストーリーボード(上で選択したラベル)と ProductTableViewCell.swift ソースコードが並んで表示されるようにします:

      Xcode のエリアの名称やエディタ・エリアの切り替えに関してはこちらを参照してください
    3. 上の画面のように、選択したラベルから ProductTableViewCell.swift ソースコードへ Ctrl + ドラッグします。
    4. 表示されたダイアログで Name に nameLabel を入力し、
残りはそのままで、Connect をクリックします:
    5. 同じようにして4つのラベル全てのアウトレットを作成します。その結果 ProductTableViewCell.swift に以下の行が追加されます:
  • これで ProductTableViewCell クラスのプロパティと製品一覧シーンのテーブルビュー・セルのラベルとが接続されました。次はこのプロパティに対して動的にデータをロードするためのデータソースを設定します。
  • デーブルビューに対してデータソースを設定
    1. メニューバーで File > New > File... を選択して、表示されたダイアログで、iOS/Source/Cocoa Touch Class テンプレートを選択して Next をクリックします:

      上記画面のように入力して Next をクリックします。
      次のページではデフォルトのままで、Create をクリックします。
      その結果新規ファイル ProductTableViewController.swift が作成されます。

    2. ストーリーボードで、テーブルビュー・コントローラを選択して、アイデンティティ・インスペクタで Class を ProductTableViewController に設定します:

      注意:ストーリーボードでシーンとカスタムのビューコントローラ・サブクラスを接続するには上記の処理が必要です。
      これにより、アプリ実行時にストーリーボードが作成するテーブルビュー・コントローラーは ProductTableViewController のインスタンスになります。

    3. 製品一覧テーブルビューに製品データを表示できるように、ProductTableViewController.swift を次のように修正します:
      • 6行:製品リポジトリ・インスタンスを生成して、repo 定数に代入
      • 13行:このテーブルビューコントローラがロードされたとき findAll() 関数を呼び、製品データをテーブルビューに表示します。
      • 49-52行:製品リポジトリの findAll() 関数を実行して製品データを RESTサービスから取得して、products にセットします。
      • 33-47行:テーブルの行ごとに表示内容を設定します:
        • 35,36行:識別子 "ProductTableViewCell" で、上述のカスタムセルを取得します。
        • 39行:該当のテーブル行に対応する製品データを puroducts から取得します。
        • 41-44行:製品データの名前、単価、在庫、コメント件数を取得セルのラベルに設定します。
        製品リポジトリ(ProductRepo) についてはこちらを参照してください。
        製品(Product) についてはこちらを参照してください。


2. 映画前売り券一覧シーンのテーブルビューにデータを表示



実行して結果を確認します

0 件のコメント:

コメントを投稿