2016年4月2日土曜日

OS X : コレクションビューを使うサンプルアプリケーション

コレクションビュー(NSCollectionView)を使ったサンプル・アプリケーションを作成します。

作業手順は次の通りです:

1.プロジェクト作成

スプリットビューコントローラを使ったテンプレートの作成と同様の手順で、次のような状態まで作業を進めます:


2.コレクションビューの追加

  • ストーリーボードで、
スプリットビューコントローラの左側ビューに、コレクションビューを追加します。
    自動レイアウト(ピンツールで親ビューにフィットするように設定)を設定します。
    
コレクションビューを追加すると同時にコレクションビューアイテムも追加されます。
    このコレクションビューアイテムは削除しておきます。
  • コレクションビューを選択して、属性インスペクタでレイアウトを flow に変更します。
    その他の属性も変更します(青枠で囲った部分)。
  • このコレクションビューを追加したビューコントローラを選択して、アイデンティティインスペクタで、Class に ViewController を設定します。
  • ここまでの作業で、ストーリーボードの状態は次のようになります:


3.モデルの作成

ナビゲーション・ペインの Model グループで 
MovieTicket (NSObject のサブクラス)を作成します。
このクラスは、前売り券のイメージと映画のタイトルを保持します。
/Model/MovieTicket.swift:



4.コレクションビューをコードに接続

  • ストーリーボードでコレクションビューを選択して、ViewController クラスへ CTRL+ドラッグします:
    参照:アシスタントエディタ

  • 表示されたポップアップで次のように入力します:

  • 次のように outlet が作成されます:



5.コレクションビューアイテムの作成

  • Model グループ下に 
CollectionViewItem.swift (NSCollectionViewItem のサブクラス) を作成します。
    このとき、xib も作成します:

    CollectionVIewItem は representedObject として MovieTicket インスタンスを保持します。

  • 同様に Model グループ下に ItemView.swift(NSView のサブクラス)を作成します。

  • CollectionViewItem.xib を選択して、
    • オブジェクトライブラリから、項目のビューにラベルとイメージを追加して、適当なサイズに調整します:
    • ラベルを選択して属性インスペクターで以下のように設定します:

    • オブジェクトライブラリから Object を追加します:

    • ドキュメントアウトラインで上記のオブジェクトを選択して、アイデンティティインスペクタで、Class を CollectionViewItem に設定します:
    • 同じようにドキュメントアウトラインで View を選択して、アイデンティティインスペクタで、Class を ItemView に設定します:
    • ラベルを選択して、バインディングインスペクタで次のように設定します:
    • イメージを選択して、バインディングインスペクタで次のように設定します:
    • Object から view へ CTRL +ドラッグします:
    • 表示されたポップアップで view を選択します:
  • 上記の一連の作業の結果、コレクションビューアイテムオブジェクトのバインディングの状態は次のようになります:


6.サンプル・アプリケーションで使用する画像を追加

参照:アセットカタログへ画像を登録


7.コレクションビューのデータソースを実装

/Controller/ViewController.swift を次のように修正します:

  • 4行:NSCollectionViewDataSource を継承する
  • 29行:ViewController をコレクションビュー・データソースとして設定。
  • 34-48行:データソースとして必要なメソッドを実装する。
    • 34-37行:コレクションビューに表示する項目数を返す。
    • 42-43行:NSCollectionView の makeItemWithIdentifier() メソッドを使って indexPath で指定されたコレクションビューアイテム(CollectionViewItem のインスタンス)を生成して、representedObject として MovieTicket インスタンスを設定する。


8.コレクション項目の選択時の処理を追加

項目の選択時に枠や背景色を変更するために ItemView を次のように修正します:


CollectionViewItem も次のように修正します:


0 件のコメント:

コメントを投稿