398 Views 15 Replies
      Latest reply on Nov 19, 2019 1:10 PM by Claude31
      narcisfromgirona Level 1 Level 1 (0 points)
      narcisfromgirona Oct 30, 2019 5:20 AM

        (macOS and Swift)

         

        I try to make a window with rounded corners but every solution I could find does not work when I remove the title bar (Attributes >  Title Bar)

         

        Also, the window is semi-transparent:

         

                view.window?.isOpaque = false
        view.window?.backgroundColor = NSColor.clear 
        view.window?.backgroundColor = NSColor(white: 1, alpha: 0.8)

        (It would be ok if it has the regular corners of any window. I do not need a lot of control over the corner radius if that makes things more complicated)

        • Re: Window with rounded corners an no title bar
          janabanana Level 1 Level 1 (0 points)
          janabanana Oct 30, 2019 7:51 AM (in response to narcisfromgirona)

          Since your app most likely won't be approved in the app store if it doesn't have a title bar, you might want to go all out custom on your window creation.  Check out this example:

           

          www [dot] cocoawithlove [dot] com/2008/12/drawing-custom-window-on-mac-os-x.html

           

          It is in Obj C but you should be able to translate it to Swift.

          • Re: Window with rounded corners an no title bar
            Claude31 Level 8 Level 8 (7,245 points)
            Claude31 Nov 3, 2019 11:36 AM (in response to narcisfromgirona)

            Thanks to https://stackoverflow.com/questions/42762856/nswindow-with-round-corners-in-swift/42763305

             

            I have come to something pretty close to what you want.

             

            I created a project withn Storyboard.

            The window I want rounded is the initial controller.

             

            There are a few points to take care:

            - even though it seems possible in IB to declare Appearance without titleBar, that creates side effect (like windowDidBecomeMain no more called). That may be the problem mentionned by janabana

            - with the settings I propose, there is still a small line at the top, quasi invidible, but I could not get rid of it.

             

            So, the solution:

            In IB, set the windows as:

            Title : whatever or empty

            Hide title unchecked (will be done in code)

            Appearance: TitleBar ON (see warning above)

            Transparent Title Bar : OFF (will be done in code)

            Full Size Content View: ON

            Shadow: ON

            Visible at Launch: ON

            All other OFF except Restorable

             

            Marke the WindowController as a subclass (see other thread https://forums.developer.apple.com/thread/125315)

             

            class FirstWindowController: NSWindowController, NSWindowDelegate {

    var firstAppearance = true
   
    override func windowDidLoad() {
        super.windowDidLoad()
   
        // Implement this method to handle any initialization after your window controller's window has been loaded from its nib file.
    }
   
    func windowDidBecomeMain(_ notification: Notification) {
        if firstAppearance {
            let newFrame = NSRect(x: 120, y: 100, width: 300, height: 200)
            self.window?.setFrame(newFrame, display: true)
           
            let effect = NSVisualEffectView(frame: newFrame) // NSRect(x: 0, y: 0, width: 0, height: 0))
            effect.blendingMode = .behindWindow
            effect.state = .active
            if #available(OSX 10.14, *) {
                effect.material = .contentBackground
            } else {
                // Fallback on earlier versions
                effect.material = .dark
            } 
            effect.wantsLayer = true
            effect.layer?.cornerRadius = 30.0
            effect.layer?.borderColor = .clear
            self.window?.contentView = effect
            self.window?.titlebarAppearsTransparent = true
            self.window?.titleVisibility = .hidden
            self.window?.isOpaque = false
            self.window?.backgroundColor = .clear
        }
        firstAppearance = false
    }
   
}