Window with rounded corners an no title bar

(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)

Replies

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.

One small window of my app do not have title bar. The rest of the app windows have title bar. I hope it will not be a problem in the app. store. Thank you for the link but it seems too complicated and my level of objc is not enough.

Which appstore guideline forces windows to have titlebar ?


I'm a bit suprised, as it is possible to hide the title bar in Appearance (Attributes inspector of the window).

Claude31,

I don't know the exact guideline offhand, but I had an app rejected because of no title bar. It was an app that had been approved and was for sale for over a year. Then I did a small bug fix, resubmitted the app, and it was rejected. No amount of pleading could get the reviewer to change his/her mind. I do recall that the guideline was cited in the rejection but I don't have that readily available at this time (this was a couple of years ago). Yes, it suprises me as well since there is a documented attribute to accomplish it.

That would be really interesting to find this rejection notification.


And possibly file a (late) bug report because, if so, that should not be a basic IB option !

Unless it was some special widow that did effectively required title (?!?)

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
    }
   
}

I solved the window becoming main by subclassing the window and putting in:


-(BOOL)canBecomeKeyWindow {
     return YES;
}


Make sure to call makeKeyAndOrderFront on the window.


The app I mentioned didn't have a title bar, I set the window background color to clear and then loaded an image for the window background. The image had a ragged edge that look like a piece of paper that had gone through a fire with its borders burned. As a result, the app window appeared to have a ragged, burned edge. In reality, the window still had the straight border with square corners but since the window itself was clear, you couldn't see the border. The app looked really neat.

Good idea. The window effectively can have NO titleBar and become main however.


But it seems no more possible to move the window by dragging and I lost the round corner effect.

I could drag the window around. There were areas in the "burnt paper," especially on the top, that were not active for other areas such as buttons to click, etc. So, putting the cursor in any "non button / non text editing" area allowed the window to be dragged.

Here are some images of the app--one of the app on top of XCode and the other of the window settings in IB.


www[dot]dropbox[dot]com/s/mg2wh5cdi15jo4s/WindowWithImage.zip?dl=0

@narcisfromgirona


Did you succeed in creating the rounded corner window ?

Hi Calude31. Thank you very much for your help. I tried many things that are close. But all seem to have some drawback. I thought about a different approach. I created a completely transparent window and a transparent bar and buttons. Inside an NSView. This way I can control the aspect and conditions of the NSView much easier than the window. It is not the perfect solution but, by now, it is my favorite option.


By the way, I could get rid of the pesky line of the transparent window if I put it in the viewVillAppear. (I still not sure why it works well there and not in ViewDidLoad nor if I call the window with a button.)

But all seem to have some drawback

Which main drawback ?


if I put it in the viewVillAppear.


In which controller ? Not the NSWindowController ?

If in NSViewController, do you set the view frame and its layer (that would make sense as window is now fully transparent).

Can you still seize and move the window around ?


Anyway, good you found a way. Don't forget to close the thread.

In viewDidload, a lot of properties are not yet set. Hence the usual reason.


Note: the question came recently on SO: https://stackoverflow.com/questions/58940252/how-to-make-a-window-with-rounded-corners


If it works well now, don't forget to close the thread.