Making NSCollectionView programatically in Swift

Original post https://github.com/onmyway133/blog/issues/131

Here's how to create NSCollectionView programatically. We need to embed it inside NScrollView for scrolling to work. Code is in Swift 4

NSCollectionView

let layout = NSCollectionViewFlowLayout()
layout.minimumLineSpacing = 4

collectionView = NSCollectionView()
collectionView.dataSource = self
collectionView.delegate = self
collectionView.collectionViewLayout = layout
collectionView.allowsMultipleSelection = false
collectionView.backgroundColors = [.clear]
collectionView.isSelectable = true
collectionView.register(
  Cell.self,
  forItemWithIdentifier: NSUserInterfaceItemIdentifier(rawValue: "Cell")
)

NScrollView

scrollView = NSScrollView()
scrollView.documentView = collectionView
view.addSubview(scrollView)

NSCollectionViewItem

final class Cell: NSCollectionViewItem {
  let label = Label()
  let myImageView = NSImageView()

  override func loadView() {
    self.view = NSView()
    self.view.wantsLayer = true
  }
}

NSCollectionViewDataSource

func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
  return coins.count
}

func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
  let cell = collectionView.makeItem(
    withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "Cell"),
    for: indexPath
  ) as! Cell

  let coin = coins[indexPath.item]

  cell.label.stringValue = coin.name
  cell.coinImageView.image =
    NSImage(named: NSImage.Name(rawValue: "USD"))
    ?? NSImage(named: NSImage.Name(rawValue: "Others"))

  return cell
}

NSCollectionViewDelegateFlowLayout

func collectionView(_ collectionView: NSCollectionView, didSelectItemsAt indexPaths: Set<IndexPath>) {
    guard let indexPath = indexPaths.first,
    let cell = collectionView.item(at: indexPath) as? Cell else {
      return
  }
}

func collectionView(_ collectionView: NSCollectionView, didDeselectItemsAt indexPaths: Set<IndexPath>) {
  guard let indexPath = indexPaths.first,
    let cell = collectionView.item(at: indexPath) as? Cell else {
      return
  }
}

func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> NSSize {

  return NSSize(
    width: collectionView.frame.size.width,
    height: 40
  )
}

Comments

[DevulderJeanPaul]

on example
coinImageView doesn't exist remplace with myImageView