2016年2月21日日曜日

OS X : テーブルビューを使うサンプルアプリケーション

テーブルビュー(NSTableView) を使うサンプルアプリケーション。
  1. プロジェクトの作成
  2. データモデル(C連絡先)の作成
  3. マスターパート(連絡先一覧)の作成
  4. 詳細パートの作成
  5. 選択行の連絡先の詳細情報を表示
  6. 連絡先データの作成/削除アクションの追加
  7. 画像の変更アクションの追加

1.プロジェクトの作成

マスター/ディテール構造のUIテンプレートとして、スプリットビューコントローラを使ったサンプルアプリケーションをベースとして使用します。


2.データモデル(C連絡先)の作成

  1. ナビゲーター・エリアで、App グループ下に新規グループ Model を作成します。
  2. Modelグループを選択して、File > New > File.. を選択して NSObject を継承した、"C連絡先"クラス(Contact.swift)を作成します。



3.マスターパート(連絡先一覧)の作成

マスターパート(スプリットビューコントローラの左側のビューコントローラ)に、連絡先一覧を表示するためのテーブルビューを追加します。
テーブルビューは、UITableViewクラスのインスタンスで、外観(行のデフォルトの高さやヘッダ定義)の指定、選択行へのアクセスや、特定の行やセルにアクセスするメソッドを提供する。
  1. オブジェクト・ライブラリから、テーブルビュー(Table View)を View Controller の View へドラッグします。
  2. ドキュメント・アウトラインで、テーブルビュー(Table View)を選択します。
    テーブルビューの属性を属性インスペクタで次のように設定します。
    コンテンツモードをセルモードに、カラム数を2に設定:
  3. ドキュメント・アウトラインで2つあるテーブルカラム(Table Column)の1つ目を選択して属性インスペクタでタイトルを "氏名" に設定します。
  4. 同じようにドキュメント・アウトラインで2つ目のテーブルカラム(Table Column)を選択して属性インスペクタでタイトルを "よみ" に設定します。
  5. 連絡先データの"追加"と"削除"のためのボタンを追加します。
    • オブジェクトライブラリから2つの "Gradient Button"をマスターパートのビューへ追加します:
    • 属性インスペクターでそれぞれのボタンの Image を "NSAddTemplate" [+] と "NSRemoveTemplate" [-] に設定します。
    • 2つのボタンを同時に選択してスタックツールを使ってスタックビューに入れます。
    • それぞれのボタンにピンツールを使ってサイズ(高さ:24, 幅:24)を設定します。
    • スタックビューを選択してピンツールで親ビューの右下端に固定するように設定します。
    • テーブルビューの上端、右端、左端が親ビューに接し、さらに下端が追加、削除ボタンを含むスタックビューの上端に接するように設定します:
    • 以上の結果、マスターパートは次のようになります:
  6. アシスタントエディタで ViewController.swift ファイルを開きます。
  7. ドキュメント・ライブラリでテーブルビュー(Table View)を選択して、ViewControoller.swift へ CONTROL+ドラッグします。
  8. 表示されたポップアップで次のように入力して Connect をクリッックします:
  9. このアプリで使用するイメージをプロジェクトに追加
  10. ViewController.swift を次のように修正します:
    テーブルビューにデータを表示するには、最低2つのデータソースメソッドを実装する必要があります。
    • 3-5行:このビューコントローラクラスはデータソース(NSTableViewDataSource)とデリゲート(NSTableViewDelegate)を実装します。
      MVCパターンに従い、データソースは、アプリのデータモデル(先に作成した連絡先クラス)とテーブルビューの仲介役をする。デリゲートは外観や動作を管理する。
    • 37-39行:このデータソース・メソッドは、テーブルビューに対して、各セクションに表示する行数を伝えるために、OSから呼ばれます。
    • 41-58行:テーブルビューのすべての行と列に対して、OS から呼ばれ、各行の各列(セル)へデータを表示します:
      • 45-46行:行インデックスがデータソースの配列要素数以下である場合に表示データをデータソースから取得します。
      • 47-54行:列のタイトルから該当列を特定して、Vセルデータ変数に表示データを設定します。


実行結果:


4.詳細パートの作成

  1. 詳細パート(スプリットビューコントローラの右側のビューコントローラ)に、連絡先一覧で選択された連絡先の詳細を表示するためのコントロールを追加します:
    • 氏名ラベル(Label)と氏名テキストフィールド(Text Field)を追加します。
    • よみラベル(Label)とよみテキストフィールド(Text Field)を追加します。
    • 写真イメージビュー(Image View)を追加します。
    • 写真変更のためのボタンを追加します。
    • 以下のようなレイアウトになるように制約を設定します:
  2. 詳細パートのUIとコードを接続:
    • ナビゲータエリアで、Controller グループ下へ DetailViewController.swift(NSViewController のサブクラス) を作成します:
    • ストーリーボードで詳細パートのビューコントローラを選択して、アイデンティティインスペクターで Class に 作成した DetailViewContller クラスを設定します:
    • ストーリーボードのドキュメント・アウトラインで、氏名テキストフィールドを DetailViewController.swift へ CONTROL+ドラッグします:
    • 表示されたポップアップで次のように入力します:
    • 同様にして、よみテキストフィールド、写真イメージビューのアウトレットを作成します。
    最終的に ViewController.swift に以下の行が追加されます:


5.選択行の連絡先の詳細情報を表示

  1. 先に示した ViewController.swift に次のコードを追加します:
    • 4-7行:選択行の変更に対応するためにデリゲートメソッドを実装します:
      • 6行:ヘルパー関数(F選択連絡先())で選択行の連絡先情報を取得し、DetailViewContorller の F詳細情報更新() 関数により、詳細パートに選択行の情報を表示します。
  2. DetailViewController.swift を次のように修正します:

ここまでの結果を実行して確認します:


6.連絡先データの作成/削除アクションの追加

マスターパートの[+]ボタン、[-]ボタンのクリック時の処理を実装します。
  1. ストーリーボードで[+]ボタンを選択して、ViewController.swift へ CTRL+ドラッグを行います:
  2. 表示されたポップアップで次のように入力して Connect をクリックします:
  3. [-]ボタンに対しても同様の操作を行います。
  4. 上記の結果、ViewContoroller.swift には次のコードが追加されます:
  5. ViewController.swift を次のように修正します:


ここまでの結果を実行して確認します。
[+]ボタンをクリックしてダミーの連絡先を追加した状態です:

[-]ボタンをクリックして連絡先を削除します:



7.画像の変更アクションの追加

詳細パートの[画像の変更]ボタンのクリック時の処理を実装します。
  1. 上述の[+]ボタンの場合と同様に、ストリーボードで[画像の変更]ボタンを選択して、DtailViewContoroller.swift へ CTRL+ドラッグして、アクション(changePhoto)を作成します。
    changePhoto 関数を次のように修正します:


結果を確認します:
ファイルから画像を選択します:

画像データを更新します:


参照:iOS Table View プログラミングガイド(PDF)

0 件のコメント:

コメントを投稿