MacアプリにNSCollectionViewを追加する
参考記事
CollectionViewを追加
https://gyazo.com/eb540021fbfcef95d9ab3aaf3b2cbcd0
https://gyazo.com/9323d3cef5d35abb20784e5e4c8c5461
今回は、親の View にぴったりになるようにしました。 https://gyazo.com/251ca752df1c1b38367ea379ce225f31
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 を追加
https://gyazo.com/128a6aa167dfbc0cc89406a9af14f301
メニューの File -> New -> File…をクリックして、 macOS -> Source -> Cocoa Class を選択して、 Next ボタンをクリックします。
https://gyazo.com/d2b58e4003df5c3375e8a25e1fffe9fc
保存先を選択して、 Create ボタンをクリックします。
https://gyazo.com/c2a803f2fc549b238a5fcb6f08e24b92
表示する肉めないニク画像を選択して、親の View にぴったりになるように制約を追加しました。
CollectionViewItem を Nib に追加して、 Outlet で接続
https://gyazo.com/1f0056328946c9d2be43c6a568a03cdb
https://gyazo.com/6aeba5724c7ab229b488eba7c4a98407
追加した CollectionViewItem と View の部品を Outlet で接続します。
今回は、元からある View と ImageView があるので、それぞれを接続しました。
CollectionView のデータを設定
https://gyazo.com/338e7c80856a9fc821dc9e973cab5a2f
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
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 も並び変わります。
バッチリですね。