2016年7月3日日曜日

iOS テーブルビュー・サンプル(2):プレーンスタイル、インデックス付きリスト

今回は前回のポスト「iOS テーブルビュー・サンプル(1)」で作成した4つのストーリーボード参照の1番目(プレーンスタイルのテーブルビュー)と2番目(プレーンスタイルでインデックス付きリスト)のサンプルを作成します。
開発/実行環境:Xcode8_beta, Swift3.0, macOS Sierra 10.12 Beta

モデルの作成:

このサンプルアプリで使用するデータモデルを作成します。これはサンプル03, サンプル04 でも使用します。
  1. 連絡先クラス(Contact)の作成:
    _Model グループ下に、以下の内容の Contact.swift ファイルを作成します。

  2. 連絡先リポジトリクラス(ContactRepo)の作成:
    連絡先クラスを操作するためのクラスを作成します。
    _Model グループ下に、以下の内容の ContactRepo.swift ファイルを作成します。

    • 7-16行:簡単にするために、ContactRepo インスタンスの生成時に、ビューに表示する連絡先データを作成します。
    • 18-20行:イニシャライザで作成した連絡先データ全件を読み順にソートして返します。
    • 22-30行:指定した電子メールアドレスの連絡先データを返します。

画像の登録

このアプリで使用する画像をアセット・カタログに登録します。
登録するイメージは、連絡先の性別("maile1":男性と "femail":女性)を表します。


サンプル01:プレーンスタイルのテーブルビュー・サンプル

テーブルビューには、プレーンとグループの2つの主要なスタイルがあります。プレーンスタイルのテーブルビューは、1つ以上のセクションを持ち、セクショ ンは1つ以上の行を持ちます。また、各セクションは、それぞれ固有のヘッダタイトルやフッタタイトルを持つ事ができます。サンプル01では、このプレーンスタイルのテーブルビューを作成します。
  1. サンプル01用のグループの作成:
    1. プロジェクトナビゲータで、TableViewDemo グループ下に、_Table01 グループを作成します。
    2. 作成したグループを選択して、属性インスペクタでファイルシステムでの実際のフォルダの位置を指定します。
      (*1)位置選択ボタンをクリックすると、”choose a Location ”シートが表示される。
      (*2)"New Folder" ボタンをクリックして、"_Table01" フォルダを作成。
      (*3)”Choose” ボタンを押して、位置を指定。
      グループとファイルシステム上のフォルダを一致させておくとストーリーボードごとの管理が簡単になります。
  2. サンプル01用ストーリーボードを作成:
    グループ _Table01 に新規ファイル Table01.storybord を作成します。
    プロジェクトナビゲータで、_Table01 グループを選択して、command+N を押します。

    注意:上記画面は、Xcode_8_beta3 でのイメージです。
    表示された"新規ファイルのテンプレート選択" シートで iOS/Storyboard を選択して、"Next" ボタンをクリックします。 次のページで、保存ファイル名を ”Table01.storyboard" として作成します。
  3. 作成されたストーリーボードを選択して、オブジェクトライブラリからテーブルビューコントローラをキャンバスへドラッグして追加します。
  4. ナビゲーションコントローラに埋め込む:
    追加したテーブルビューコントローラを選択して、メニューで Editor > Embed In > Navigation Controller を選択して、ナビゲーションコントローラに埋め込みます。
    これにより、キャンバスにナビゲーションコントローラーが追加されます。
  5. ナビゲーションコントローラーをこのストーリーボードの初期ビューとして設定:
    追加されたナビゲーションコントローラを選択して、属性インスペクターで "Is Initial View Controller" をチェックします。
  6. 対応するビューコントローラクラスを作成:
    プロジェクトナビゲータで、_Table01 グループを選択して、command+N を押して、 上記のテーブルビューコントローラに対応する TableViewController01クラス(UITableViewController のサブクラス)を作成します。UITableViewControllerクラスはテーブルビューを管理し、選択の管理、行の編集、テーブルの設定などの標準的なテーブル関連動作に対するサポート機能を追加します。
  7. Table01 ストーリーボードのドキュメントアウトラインで、テーブルービューコントローラを選択します。
    アイデンティティインスペクタで、 選択したシーンの "class" フィールドに TableViewController01 を設定します。
  8. テーブルビューのコンテンツタイプとスタイルを設定:
    テーブルビューを選択して、属性インスペクタで、以下のように設定します。
  9. セルのスタイルと識別子を設定:
    テーブルビューセルを選択して、属性インスペクターでセルのスタイル、識別子を以下のように設定します。

  10. テーブルビューのデータソースを設定:
    TableViewController01 は、UITableViewController のサブクラスです。
    UITableViewController は、UITableViewDelegate, UITableViewDataSource プロトコルを実装します。
    データソース(UITableViewDataSource)は、アプリのデータモデルとテーブルビューを仲介する機能を提供します。
    TableViewController01.swift を開いて、次のように修正します。
    • 20行:連絡先リポジトリの findAll() 関数で、テーブルビューに表示する連絡先データ(よみ順にソート)を取得します。
    • 35-38:UITableViewDataSourceプロトコルの必須のメソッドの1つ。テーブルビューに対して、各セクションに表示する行数を伝えます。このテーブルビューのセクション数は1つなので、これはテーブルに表示する行数を示します。
    • 41-60:UITableViewDataSourceプロトコルの必須のメソッドの1つ。テーブルの各行に表示するセルを組み立てます。
      セルはUITableViewCellクラスを継承しています。
      • 42:ストーリーボードで定義したセル(識別子="TableView01Cell")をロードして再利用します。
        このセルは既成のセルスタイルとして、”Subtitle” を設定しています。
      • 45:対象行に表示する連絡先データを contacts から取得して、contact に代入します。
      • 46-52:"Subtitle" スタイルのセルには、コンテンツ表示用に3つのプロパティ(textLabel, detailTextLabel, imageView)が用意されています。
        これらのプロパティに取得した連絡先データの z氏名、z生年月日、z性別に対応する画像を設定します。
      • 53-58:セルのフォントやカラー、背景色、選択時のカラーなどをカスタマイズします。
  11. メインストーリーボードのサンプル01に対応するストーリーボード参照を選択して、属性インスペクタでストーリーボードとして、Table01 を設定します。

    これにより、マスターシーンのメニューの"サンプル01"を選択すると、Table01 で定義した、テーブルビューが表示されます。
    「iOS テーブルビュー・サンプル(1)」のストーリボード参照を使用するを参照してください。
  12. 実行結果


サンプル02:プレーンスタイル(インデックス付きリスト)のテーブルビュー・サンプル

サンプル02は、サンプル01と同様のプレーンスタイルのテーブルビューですが、インデックス付きリストの例を示します。インデックス付きリストは、特定のデータにすばやくアクセスできるように、セクション にインデックスを関連付けたものです。このサンプルでは"あ", "か", "さ"... ,"わ" のインデックスを表示します。"か"を選択すると、テーブルビューは "か"..<"さ" で始まる氏名の連絡先セクションまでスクロールします。
  1. _Table01 の場合と同様にしてTableViewDemo グループ下に、_Table02 グループを作成します。
  2. サンプル02用ストーリーボードを作成: グループ _Table02 に新規ファイル Table02.storybord を作成します。
  3. 作成されたストーリーボードを選択して、テーブルビューコントローラをキャンバスへ追加して、ナビゲーションコントローラに埋め込みます。
  4. 対応するビューコントローラクラス TableViewController02(UITableViewController のサブクラス)を作成します。
  5. テーブルービューコントローラを選択して、アイデンティティインスペクタで、 "class" フィールドに TableViewController02 を設定します。
  6. テーブルビューのコンテンツタイプとスタイルを設定:
    テーブルビューを選択して、属性インスペクタで、"Content" を "Dynamic Prototype"、"Style" を "Plain" に設定します。
  7. セルのスタイルと識別子を設定:
    テーブルビューセルを選択して、属性インスペクターで "Style" を "Subtitle"、"identifier" を "TableView02Cell" に設定します。

    ここまでは、サンプル01の場合とほとんど同様の操作です。
  8. テーブルビューのデータソースを設定:
    TableViewController02.swift を開いて、次のように修正します。
    • 15行:sections は、セクションのタイトル(title)、セクションに含まれる連絡先データの数(length)、そのセクションの先頭データの contents 配列内でのインデックス(index)を要素に持つタプルの配列です。
    • 32-58:連絡先データの配列(contacts)を zよみプロパティの値でセクションに分割します。
      • 38-57:contacts の全要素(zよみの値で昇順にソートされている)の zよみの値を調べてセクションに分割します。
        具体的には"あいだ", "いのうえ", ... などは、セクションタイトルが"あ"のセクションに、"かねこ", "きのした", ... は”か"のセクションに分割されます。
        実際には、セクションごとの連絡先データの配列に分割するのではなく sections 配列の要素を作成します。
    • 72-83:テーブルビューに表示するセルを返します。
    • 79行:sections の情報を元にして、表示行に対応する連絡先データの contacts 内のインデックス値を計算します。

  9. メインストーリーボードのサンプル02に対応するストーリーボード参照を選択して、属性インスペクタでストーリーボードとして、Table02 を設定します。
  10. サンプル02の実行結果



0 件のコメント:

コメントを投稿