NSImage with Rounded Edges

Nothing like vacation to accelerate personal projects, very happy with how NewsWave for Mac is shaping up. No promises on when, but I’m planning to post more about its progress very soon. 

One of the items I worked on today is how icons and images will appear in the app, the intent is to show as much content as possible while making them attractive. To to that, images and icons will be scaled down, using “Aspect Fill’, and their edges will be rounded. This is a very simple thing to do in iOS, but it needs a bit more work on macOS. 

I wanted to go from this:

Screen Shot 2019 12 31 at 11 27 21

To this:

Screen Shot 2019 12 31 at 11 25 59

 

The cleanest way I’ve found is to subclass NSImageView, overriding the image variable, and simply use that new class for the images you want. Here’s the class code, works like a charm: 

import Cocoa

 

class ImageAspectFillView: NSImageView {

    

    override func draw(_ dirtyRect: NSRect) {

        super.draw(dirtyRect)

        

    }

 

    override var image: NSImage? {

        set {

            self.layer = CALayer()

            self.layer?.contentsGravity = CALayerContentsGravity.resizeAspectFill

            self.layer?.contents = newValue

            self.wantsLayer = true

            

 

            self.layer?.cornerRadius = 8.0

            self.layer?.masksToBounds = true

 

            

            super.image = newValue

        }

        

        get {

            return super.image

        }

    }

 

}

 

Until next time,

 

Marc

—-

 

 

Twitter -> @MarcMasVi