10

I want to change the height of an NSWindow titlebar.

Here are some examples: alt text

And…

alt text

I could use an NSToolbar, but the problem is that I can't place views very height (For example: I can't place the segmentedControl higher than in the picture because there is still the titlebar) alt text

If I remove the titlebar I can't place a NSToolbar and the window isn't movable.

Have you any ideas?

Flocked
  • 1,898
  • 2
  • 36
  • 57

4 Answers4

23

This is much easier than one would think. I too went on a quest to do something similar for my app.

Real App Store app: Here is the App Store app...

My App Store app look-alike: My App Store look-alike...

No disrespect to INAppStoreWindow, it is a very good implementation and solid. The only draw back I saw from it though was that there was a lot of drawing code along with hardcoded settings for the TitleBar colors which Apple can adjust at anytime.

So here is how I did it:

A) Create a standard window with a Title Bar, Close, Minimize, Shadow, Resize, Full Screen - Primary Window all set. Note: You do not need a textured window nor should you set a title

B) Next add a standard toolbar with these settings:

  • Icon Only
  • Visible at Launch - ON
  • Customizable - OFF
  • Separator - ON
  • Size - Regular

Remove all the Toolbar Items and add only these in the following order

NSSegmentControl (51 x 24) -- | Flexible Space | -- NSSearchField (150 x 25)

C) In your content View directly under the toolbar add a regular sized NSButton set like so:

  • Bordered - OFF
  • Transparent - OFF
  • Title -
  • Image -
  • Position - Text below the button
  • Font - System Small 11

Ok, pretty easy so far, right?!

In your Window Controller or app delegate.... setup IBOutlet(s) to your NSButton(s)

Note: Remember to hook up your IBOutlet in interface builder

Ok don't be scared we have to write a tiny bit of code now:

In awakeFromNib or windowDidLoad....

  1. Get the content views' superview (aka NSThemeView)
  2. Remove your button from its superView
  3. Set the frame of your button
  4. Add the button back to the theme view

So the code would look similar to this:

NSView *themeView = [self.contentView superview];
NSUInteger adj = 6;

[self.btnFeatured removeFromSuperview];
self.btnFeatured.frame = NSMakeRect( self.btnFeatured.frame.origin.x,
                              self.window.frame.size.height - self.btnFeatured.frame.size.height - adj,
                              self.btnFeatured.frame.size.width, self.btnFeatured.frame.size.height);
[themeView addSubview:self.btnFeatured];

That's it! You can use your outlet to enable/disable your button, setup a mask image when selected, enable/disable the toolbar or even hide everything and add a window title. All of this without worry if Apple changes their standard Window Titlebars.

P.S. No private frameworks were used in this posting whatsoever!

Arvin
  • 2,516
  • 27
  • 30
  • 1
    This works perfectly, but how can I achieved it using Auto Layout? – fenixkim Jan 06 '13 at 22:15
  • 1
    Essentially, what I did was turn off auto layout for just the main window XIB file which contains the view for the title bar. Every other view contained in its own XIB utilize auto layout. Hope this helps. – Arvin Jan 16 '13 at 05:13
  • Great!!, I'm new to Objective-C and I had not realized that I can use the Auto Layout option for each NIB file. – fenixkim Jan 16 '13 at 14:09
  • Welcome to Objective-C! Even though auto layout cuts down a lot on the drawing curve, there is a learning curve to it. It's also not fully baked, meaning you will find differences between Lion and Mountain Lion as well as "undocumented" issues when using an NSTableView / NSScrollView. Best of luck... – Arvin Jan 16 '13 at 16:04
  • This doesn't work when you make the window full screen. – Chris Jan 28 '14 at 01:50
  • I implemented this in https://github.com/KAYLukas/AppStoreWindow. This does have some fullscreen support (although in fullscreen still a spacing exists at the top) – user23127 Mar 18 '14 at 20:15
  • You can support fullscreen by replacing theme view with the root view of btnfeatured (btnfeatured superview superview .... until nil), look in my version to see how this works. – user23127 Mar 18 '14 at 21:19
  • Unfortunately, this method no longer works (or at the least sends warnings to the log). Apple is sending log messages (and possibly blocking) when adding views to the theme view. – Peter N Lewis Oct 26 '16 at 01:51
5

INAppStoreWindow is a NSWindow subclass, it tell you how to change the height of title bar.

https://github.com/indragiek/INAppStoreWindow

http://iloveco.de/adding-a-titlebar-accessory-view-to-a-window/
This example tells you how to add buttons in the title bar.

damo
  • 849
  • 12
  • 16
4

You'd have to subclass NSWindow and do a custom window frame drawing. It's not only about a titlebar. It's about whole window frame (so you can, actually, put close/minimize/zoom buttons at the bottom if you wish).

A good starter is at "Cocoa with love" website.

Eimantas
  • 48,927
  • 17
  • 132
  • 168
3

There are a few new solutions based on INAppStoreWindow and without warning and log message, for anyone who wants to change the height of NStitlebar, change the position of traffic light, add an item(e.g. a NSbutton) on NStitlebar and change its position, please check below.

WAYWindow: https://github.com/weAreYeah/WAYWindow

NStitlebar_with_item: https://github.com/ZHANGneuro/NStitlebar_with_item

bo zhang
  • 33
  • 5