NSWindow Transparent Background NSCollectionView background not repainting

Question

I am trying to create a macOS application that is semi-transparent. Like the Terminal application that is included with macOS. I created an NSWindow subclass that is transparent and a pretty standard NSCollectionView in a Storyboard. I can get the application to be semitransparent but when I scroll the NSCollectionViewItems it leaves the background fully transparent.

Code for the problem is here on Github

Example of Problem

I have tried many things

Get the callbacks of the NSScroll View and get the UI to redraw
Set the background in most of the views in the Storyboard
The StackOverflow question's suggestions: StackOverflow

Here is the custom UIWindow

import Cocoa

class MainWindow: NSWindow {

    override init(contentRect: NSRect, styleMask style: NSWindow.StyleMask, backing backingStoreType: NSWindow.BackingStoreType, defer flag: Bool) {
        super.init(contentRect: contentRect, styleMask: style, backing: backingStoreType, defer: false)
        self.backingType = NSWindow.BackingStoreType.buffered
        self.alphaValue = 1.0
        self.backgroundColor = NSColor.clear
        self.isOpaque = false
    }
}

Here is the ViewController

import Cocoa

class ViewController: NSViewController {

    @IBOutlet weak var collectionView: NSCollectionView!
    @IBOutlet weak var scrollView: NSScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        configureCollectionView()
        collectionView.register(ReceiverCollectionViewItem.self, forItemWithIdentifier: NSUserInterfaceItemIdentifier(rawValue: "Cell"))
    }

    private func configureCollectionView() {
        let flowLayout = NSCollectionViewFlowLayout()
        flowLayout.itemSize = NSSize(width: 100.0, height: 100.0)
        flowLayout.sectionInset = NSEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
        flowLayout.minimumInteritemSpacing = 20.0
        flowLayout.minimumLineSpacing = 20.0
        collectionView.collectionViewLayout = flowLayout

        scrollView.drawsBackground = false
        scrollView.contentView.drawsBackground = false
        scrollView.backgroundColor = NSColor(calibratedRed: 0.0, green: 0.0, blue: 0.0, alpha: 0.1)

        collectionView.backgroundColors = [NSColor(calibratedRed: 0.0, green: 0.0, blue: 0.0, alpha: 0.1)]
    }
}

extension ViewController: NSCollectionViewDataSource {
    func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

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

score 0 · Accepted Answer · answered May 05 '20 at 03:02

After much trial and error (more error) I found the solution.

In the NSWindow subclass if you set the background color this gets rid of the clear "holes" in the background.

import Cocoa

class MainWindow: NSWindow {

    override init(contentRect: NSRect, styleMask style: NSWindow.StyleMask, backing backingStoreType: NSWindow.BackingStoreType, defer flag: Bool) {
        super.init(contentRect: contentRect, styleMask: style, backing: backingStoreType, defer: false)
        self.backingType = NSWindow.BackingStoreType.buffered
        self.alphaValue = 1.0
        self.backgroundColor = NSColor(calibratedRed: 0.0, green: 0.0, blue: 0.0, alpha: 0.2)
        self.isOpaque = false
    }
}

The ViewController also required a few things

import Cocoa

class ViewController: NSViewController {

    @IBOutlet weak var collectionView: NSCollectionView!
    @IBOutlet weak var scrollView: NSScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        configureCollectionView()
        collectionView.register(ReceiverCollectionViewItem.self, forItemWithIdentifier: NSUserInterfaceItemIdentifier(rawValue: "Cell"))
    }

    private func configureCollectionView() {
        let flowLayout = NSCollectionViewFlowLayout()
        flowLayout.itemSize = NSSize(width: 100.0, height: 100.0)
        flowLayout.sectionInset = NSEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
        flowLayout.minimumInteritemSpacing = 20.0
        flowLayout.minimumLineSpacing = 20.0
        collectionView.collectionViewLayout = flowLayout

        scrollView.drawsBackground = false
        scrollView.contentView.drawsBackground = false
        scrollView.backgroundColor = NSColor.clear

        collectionView.backgroundColors = [.clear]
    }
}

extension ViewController: NSCollectionViewDataSource {
    func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

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

NSWindow Transparent Background NSCollectionView background not repainting

1 Answers1