いつも忘れるのでCocoa Bindingで設定することをまとめる

  • 27
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Cocoa Bindingあんまり使わないから、つかう度に設定方法を忘れてしまいます。

StoryBoardやnib上でガシガシいじるので、ビルドエラーも起きないしログ読んでも原因すぐわからないし、Bindingについての書籍もなかなかないしっていうことで、未来の自分がまたBindingいじる時の備忘録です。

あと、AppkitにはUICollectionViewDataSourceみたいなDataSourceはないのでNSCollectionViewつかうときは割とBindingはつかうのかなとかって思っています。(もっと簡単でいいやり方あれば知りたいです。)

今回サンプルアプリを作りながらBindの設定を思い出します。

つくるもの

  • OSXアプリ
  • ウィンドウ上に9個のアイコン+タイトルを表示 スクリーンショット 2015-06-14 3.32.39.png

作り方

Storyboardを用意する

スクリーンショット 2015-06-14 0.27.22.png
1. ViewControllerにCollectionViewを貼り付ける
2. CollectionViewItemの中身を用意する
3. CollectionViewItemにStoryboardID振る

画像を用意する

適当に用意する。
スクリーンショット 2015-06-14 3.32.55.png

コーディング

Modelクラス

  • テキストとイメージを持つクラスを作成
hoge.swift
import Cocoa
import Foundation

class Hoge : NSObject {
    var _name: String = ""
    var _image: NSImage

    init(name: String) {
        _name = name
        _image = NSImage(named:name)!

        super.init()
    }
}

ViewControllerクラス

  • WindowにならべるCollectionViewItemをCollectionViewに設定
  • さっきつくったHogeクラスを配列にしてCollectionViewに設定
ViewController.swift
import Cocoa

class ViewController: NSViewController {

    var hogeArray = NSMutableArray()
    var nameArray = ["doctor","girl","hanamiju","madam","boy","UMA","woman","worker","yankee"]

    @IBOutlet weak var hogeCollectionView: NSCollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let itemPrototype = self.storyboard?.instantiateControllerWithIdentifier("collectionViewItem") as! NSCollectionViewItem
        hogeCollectionView.itemPrototype = itemPrototype

        for name in nameArray {
            var hoge = Hoge(name: name)
            hogeArray.addObject(hoge)
        }

        hogeCollectionView.content = hogeArray as [AnyObject]
    }
}

Binding

上記まででコーディングは終わり。
InterfaceBuilderにもどってバインドしていきます。

ArrayControllerの設定

  • ArrayControllerをViewControllerのSceneに追加
  • 追加したArrayControllerを選択し、Attribute InspectorからArrayとして取り込むModelを設定(下図)

スクリーンショット 2015-06-14 3.48.28.png

CollectionViewの設定

CollectionViewのバインド先をArrayControllerに設定
* CollectionViewを選択し、Binding InspectorからContentを設定。(下図)

スクリーンショット 2015-06-14 0.55.01.png

CollectionViewItemの設定

各コントロール(今回はImageとLabel)のBind先をCollectionViewItemに設定する
* CollectionViewの各コントロールを選択
* bind先をCollectionViewItemに設定
* Model Key Pathを「representedObject.プロパティ」に設定

スクリーンショット 2015-06-14 4.04.41.png

これでうまく表示できるかと。

まとめ

上記でやったことを図に起こしてみるとこんな感じ
zu.png

  • Array Controllerにモデルを設定
  • CollectionViewをArray Controllerにバインド
  • CollectionViewItemをCollectionViewのitemProtorypeに設定
  • CollectionViewItemに内包されているControlsをCollectionViewItemにバインド