MacアプリにNSCollectionViewを追加する
Macアプリ に NSCollectionView を追加します。
参考記事
NSCollectionView
NSCollectionView Tutorial
今回は、 CustomView に CollectionView を追加していますが、もちろん ViewController に直接追加してもかまいません。
CollectionViewを追加
https://gyazo.com/eb540021fbfcef95d9ab3aaf3b2cbcd0
Object Library から CollectionView を追加します。
CollectionView を追加すると、自動的に ScrollView と Clip View も追加されるようです。
https://gyazo.com/9323d3cef5d35abb20784e5e4c8c5461
Bordered Scroll View を選択して、制約を追加します。
今回は、親の View にぴったりになるようにしました。
https://gyazo.com/251ca752df1c1b38367ea379ce225f31
CollectionView を IBOutlet で接続します。
ScrollView や ClipView ではなく CollectionView を選択するように注意します。
https://gyazo.com/dd9415fef5f137ed377b1ce0807f587a
CollectionViewのレイアウトを設定します。
code: Swift
func setupCollectionView() {
let flowLayout = NSCollectionViewFlowLayout()
flowLayout.itemSize = NSSize(width: 100.0, height: 100.0)
flowLayout.sectionInset = NSEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
flowLayout.minimumInteritemSpacing = 20.0
flowLayout.minimumLineSpacing = 20.0
collectionView.collectionViewLayout = flowLayout
}
CollectionViewItem を追加
CollectionViewItem を追加します。
iOS では CollectionViewCell ですが、 Mac では Item だそうです。
https://gyazo.com/128a6aa167dfbc0cc89406a9af14f301
メニューの File -> New -> File…をクリックして、 macOS -> Source -> Cocoa Class を選択して、 Next ボタンをクリックします。
https://gyazo.com/d2b58e4003df5c3375e8a25e1fffe9fc
Class にクラス名を入力して、 Subclass of に NSCollectionViewItem を入力します。
Also create XIB file for user interface にチェックを入れて、 Next ボタンをクリックします。
保存先を選択して、 Create ボタンをクリックします。
https://gyazo.com/c2a803f2fc549b238a5fcb6f08e24b92
CollectionViewItem を選択して、 ImageView を追加します。
表示する肉めないニク画像を選択して、親の View にぴったりになるように制約を追加しました。
CollectionViewItem を Nib に追加して、 Outlet で接続
https://gyazo.com/1f0056328946c9d2be43c6a568a03cdb
CollectionViewItem を Document Outline に追加します。
つぎに、追加した CollectionViewItem を選択して、 Identity Inspector の Class に クラス名を入力します。
https://gyazo.com/6aeba5724c7ab229b488eba7c4a98407
追加した CollectionViewItem と View の部品を Outlet で接続します。
今回は、元からある View と ImageView があるので、それぞれを接続しました。
CollectionView のデータを設定
https://gyazo.com/338e7c80856a9fc821dc9e973cab5a2f
CollectionView の data source を設定します。
NSCollectionViewDataSource のデリゲートメソッド、 collectionView:numberOfItemsInSection: と collectionView(_:itemForRepresentedObjectAt:) を追加します。
code: Swift
extension CustomView: NSCollectionViewDataSource {
func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
guard let item = collectionView.makeItem(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "CollectionViewItem"), for: indexPath) as? CollectionViewItem else {
return NSCollectionViewItem()
}
return item
}
}
https://gyazo.com/d891c85238da227466ecdf7147a65ed3
CollectionView の data source を File's Owner と Outlet で接続します。
ViewContorller で CollectionView を設定
https://gyazo.com/91622c17b48f695feaadb12116158acb
最後に、 CustomView を ViewController と Outlet で接続して、 viewDidLoad で CollectionView を設定する処理を呼び出します。
code: Swift
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
customView.setupCollectionView()
}
シミュレーターで実行
それでは、シミュレーター で実行します。
https://gyazo.com/cefffc99835b17397b4ca004d5feed6e
表示されました。
スクロールするときは、マウスやトラックパッドでスクロールしてください（iOSのときのクセで、ドラッグでスクロールしようとして動かなくて、プログラムが間違っているのかとしばらく悩みんだのはわたしです）。
https://gyazo.com/d792eb81a5fa0678558309b12a46bf1f
ウィンドウサイズを変更すると、自動的に CollectionView も並び変わります。
バッチリですね。