LoginSignup
2
5

More than 5 years have passed since last update.

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

Posted at

概要

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

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5