Xcode
Cocoa
collectionView
Swift
Swift3.0

[swift3] macOSアプリでCollectionViewを使おうとして躓いた

概要

iOSアプリ開発のノリでmacOSアプリを開発しようとしたら、NSCollectionViewで躓いたのでメモ。
UICollectionViewを使うときに加えて一手間必要でした。
途中までiOSの場合と変わらないので読み飛ばして大丈夫です。

実装

まずは適当なプロジェクトを新規で作ってみます。

new.png
スクリーンショット 2017-08-17 16.46.42.png

以下は作成したプロジェクトの初期状態です。

スクリーンショット 2017-08-17 15.32.59.png

CollectionViewの配置とDelegate等の設定

NSCollectionViewを配置します。

スクリーンショット 2017-08-17 15.33.17.png

スクリーンショット 2017-08-17 15.34.12.png

NSCollectionViewのOutlet接続をします。

スクリーンショット 2017-08-17 15.50.21.png

iOSの場合と違って、CollectionViewの要素はCellではなく、Itemとなっています。
要素を設定する際にも、dequeueReusableCell(withReuseIdentifier:, for:)メソッドではなく、makeItem(withIdentifier:, for:)メソッドを使います。
また、DataSourceのメソッドも名前が結構違ってるので、実装すべきものはリファレンスで確認するといいと思います。下みたいな感じで確認できます。

  1. NSCollectionViewDataSourceを選択して三本指タップ
    スクリーンショット 2017-08-17 17.09.13.png

  2. Protocol Referenceをクリック

  3. 検索窓で"required"を検索
    スクリーンショット 2017-08-17 17.09.35.png

Item(NSCollectionViewの要素)の作成

Cocoaフレームワークのクラスを作成します。

スクリーンショット 2017-08-17 15.39.08.png

NSCollectionViewItemを継承したクラスを作成します。このとき、XIBを同時に作っておきます。

スクリーンショット 2017-08-17 15.39.40.png

今回はLabelのみのItemを作りました。

スクリーンショット 2017-08-17 17.31.53.png

Itemを作成したので、ViewControllerで使えるように編集します。

スクリーンショット 2017-08-17 17.33.29.png

ここから一手間

iOSアプリの場合は以上の工程で終わりでしたが、macOSの場合はエラーを吐きます。
そこで、最後に一手間加えてやります。ItemのXIBで操作をします。

  1. CollectionViewItemを追加
    スクリーンショット 2017-08-17 17.41.59.png

  2. 追加したItemのCustom Classを作成したItemファイルの名前に変更

スクリーンショット 2017-08-17 17.57.25.png

これでCollectionViewが使えるようになります。最後の一手間に気づかず、手間取ってしまいました...

実行

このまま実行するとこんな感じになります。

スクリーンショット 2017-08-17 17.30.16.png

最後にCollectionViewのレイアウトでItemのサイズを変更します。これはiOSの場合と同じです。ItemのViewの大きさに応じて値を変えてください。

スクリーンショット 2017-08-17 16.33.37.png

最終結果はこんな感じです。

スクリーンショット 2017-08-17 17.28.35.png

まとめ

macOSアプリ開発について書いてある記事って以外と少ないので、こういった簡単なことでも躓いてしまうと大変です(実際自分がそうでした)。大したことは書いてないですが、同じことで悩んでいる人の解決に役立てば幸いです。∩(´∀`)∩ワァイ♪