NSCollectionViewのCocoa Bindingで躓いたのでメモ

NSCollectionViewをBindするのに少しつまづいたのでメモ。(新しめの記事もなかったので)

# 環境
* macOS 10.14.4
* Xcode 10.2.1
* Swift 5

# やり方
## InterfaceBuilderに必要なものを設置
1. ViewControllerにCollectionViewとArrayControllerを設置
<img width="998" alt="スクリーンショット 2019-05-08 20.40.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/52f5ae7a-6af5-41f9-8183-bab9369592b6.png">


2.CollectionViewItemのNibを作成する
<img width="978" alt="スクリーンショット 2019-05-08 20.15.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/3fe1f09c-e73d-f0ab-f89d-14ac4ff39715.png">


3.先ほど作成したNibをカスタマイズする
今回は、LabelとImageViewを設置しました。
<img width="633" alt="スクリーンショット 2019-05-08 20.18.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/3131e4e1-ca85-94b1-5a5d-02e4095676d9.png">


4.　Objectを設置し、CollectionViewItemを追加する
<img width="560" alt="スクリーンショット 2019-05-08 20.55.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/554a19df-77eb-ce52-2bb8-70560e754dbb.png">

5. CollectionViewItemのViewを先ほど作成したNibに繋ぐ
<img width="609" alt="スクリーンショット 2019-05-08 21.50.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/658a0819-aba3-84b5-52bc-fd63fe8832c0.png">


## ViewController
以下のようにViewControllerを記述します。
BindするModelとその配列をViewControllerに書きます。

~~~Swift
class Item: NSObject{
    @objc dynamic var name: String? = ""
    @objc dynamic var image: NSImage? = nil
    init(name :String?, image: NSImage?){
        self.name = name
        self.image = image
    }
}

class ViewController: NSViewController {
    // Model配列
    @objc dynamic var items = [Item]()
    // ArrayController
    @IBOutlet var itemsArrayController: NSArrayController!
    // CollectionView
    @IBOutlet weak var collectionView: NSCollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Contentを追加
        items.append(.init(name: "1", image: NSImage.init(named: NSImage.actionTemplateName)))
        items.append(.init(name: "2", image: NSImage.init(named: NSImage.addTemplateName)))
        items.append(.init(name: "3", image: NSImage.init(named: NSImage.advancedName)))
       
        // CollectionItemを登録する
        self.collectionView.register(NSNib.init(nibNamed: "CustomCollectionViewItem", bundle: nil), forItemWithIdentifier: NSUserInterfaceItemIdentifier.init("CustomCollectionViewItem") )
        
        // contentに設定する
        self.collectionView.content = items
    }
}
~~~

## Bindを設定する
### ArrayContoroller
Content ArrayにViewContorollerに作成したItem配列を指定します。
<img width="940" alt="スクリーンショット 2019-05-08 21.04.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/1a90be3d-97c3-83c9-1875-19e001204f36.png">

### CollectionView
CollectionView->Content のBind先をArrayControllerに設定します。
※ControllerKeyをarrangeObjectsにします。
<img width="872" alt="スクリーンショット 2019-05-08 21.08.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/2ece0018-4720-c8d3-7b33-394dea01a806.png">

### CollectionViewItem
各コントロールを選択し、Bind先をCollectionViewItemに指定します。
ModelKeyPathを　「representedObject.ItemClassのプロパティ」に設定
<img width="585" alt="スクリーンショット 2019-05-08 21.26.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/29bf9ad0-1998-123f-59b8-f7ce8a9f70ac.png">

## 最後に
CollectionViewのプロパティや、AutoLayoutの設定をして完成。
<img width="898" alt="スクリーンショット 2019-05-08 21.55.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/61c6c828-c0f0-f983-9ab4-20d84092ade1.png">

## 完成
あとはitems配列をいじるだけで勝手にCollectionViewに反映されます。
<img width="613" alt="スクリーンショット 2019-05-08 21.57.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351187/f37d1b90-2864-9992-c8ef-30861b2dfd5b.png">

[こちらにも同じ内容で記載しています。](https://infoaholic.com/2019/05/08/%E3%80%90swift%E3%80%91nscollectionview%E3%81%AEbinding%E6%96%B9%E6%B3%95/)