How can I get a two-row toolbar like in Mail.app and Xcode? - cocoa

I'm trying to add a "second row" after my NSToolbar in my app, that remains part of the title bar. As an example, Mail has a thin gray divider line below the NSToolbar with some extras items below that. Very specifically, when the window is put into fullscreen mode, that second "row" stays attached to the title bar as it slides down under the system menu bar. Xcode has a similar story.
I tried setting my NSWindow to textured and placing my second row controls directly in the content view of the window. While this mostly looks correct in windowed mode, those controls of course won't appear attached to the toolbar when it slides down in fullscreen mode. So how can I achieve the same behavior that Mail and Xcode do? I've looked at a lot of toolbar customization code but none of them really cover this specific case.

fullScreenAccessoryView is deprecated in macOS 10.10
In order to do this in recent versions of macOS, use the addTitlebarAccessoryViewController method on your NSWindow and pass in a subclass of NSTitlebarAccessoryViewController.
For example:
NSTitlebarAccessoryViewController *accessoryViewController = [[NSStoryboard storyboardWithName:#"Main" bundle:nil] instantiateControllerWithIdentifier:#"AccessoryViewController"];
[self.mainWindowController.window addTitlebarAccessoryViewController:accessoryViewController];

What I needed to do was call [NSToolbar setFullScreenAccessoryView:] on the view below my toolbar. This results in the behavior I was aiming for. See the NSToolbar documentation for this method.

First one is normal toolbar. For second toolbar you can create a separate view of your desired height and add it in the main landing-window.

Related

Graphical bug NSVisualEffectView when app in background

My application has a NSTableView configured as a SourceList.
Under the NSTableView are two NSButton two add/remove items in the table.
The table and the buttons are embedded in a NSVisualEffectView (.behindWindow mode).
The result is great and I can see the background through the table and the buttons, BUT, when the app is in background (I give the focus to another app), the tableview and the buttons become black, and the view is not redrawn, as shown in the picture below (taken with an iPhone, because a screenshot does not show the bug!):
And here is the IB structure of the views:
The container view (CustomView) is layer-backed.
Any lead to solve this problem? Thanks in advance !
The problem was that I was trying to have a NSOutlineView translucent (Behind-window blending), but under a TabView.
Apple UI guidelines (here) state the following:
Use an opaque background when a window contains more than one sidebar, and when using a sidebar in a panel or preferences window. All other times, use a translucent background.
Because of the TabView, I was clearly against this rule which had technical side effects (which led to this post :-)).
--> making the NSOutlineView opaque (not as a SourceList) solved the problem.
Are any of your views opaque and implement drawRect:?
I've seen issues like this when a view implements drawRect: but doesn't completely fill the passed-in rect (or all of the rects returned from getRectsBeingDrawn:count:).

Use combined titlebar + toolbar while preserving title visibility

The System Preferences app feature a combined title bar and toolbar with vertically centered buttons and the title. I am trying to mimic this exactly in my app. I have been able to combine the title bar and toolbar using Interface Builder (on the NSWindow check Title Bar and Unified Title and Toolbar), but this does not center the content vertically. I discovered via this question you can simply set the window's titleVisibility to NSWindowTitleHidden which will vertically center the stoplight buttons. Unfortunately this of course hides the title. How can one vertically center content in the unified titlebar/toolbar and also show the window's title just like System Preferences - either in IB or programmatically?
I ended up setting titleVisibility to NSWindowTitleHidden and manually created an NSView that contains an NSTextField that mimics the standard title appearance, providing that to the window's addTitlebarAccessoryViewController method. Still would like to find a better solution to use the default title appearance, if possible.
I used WAYAppStoreWindow on GitHub to do this. I created a fork of the WAYWindow subproject to vertically centre the document title since this wasn't supported. This means any applied themes/appearances are honoured.

How do I get Mac Toolbar Items that look like the standard toolbar buttons?

I'm working on some updates to my first Mac app and I'm trying to get my window's toolbar buttons to look like the toolbar buttons on EVERY standard Mac app. However, for the life of me, I can't find a button type or a barbutton type that gets me what I'm looking for. Am I missing something?
Here is an image showing several Mac apps (Preview, Finder, and Safari) with toolbars at the top which have very-slighty rounded corner buttons which also have a slight gradient on them, etc.
However, in my .xib I've got a toolbar and I've dropped every kind of button I can find on the thing and nothing looks like the standard Mac button.
The first button looks pretty close, but it's clearly not the same color. Am I missing something?
#Matt Ball is right - you can use NSSegmentedControls, even for single one-time click buttons. Just set the number of segments to 1, and set the mode to "Select None".
One of my shipping apps uses this technique, see below:
All of the controls there are NSSegmentedControl, including the single one.
Update: there are a few standard button icons which are meant for toolbars. The NSImage Class Reference has a list.
In the above screenshot, only two of the buttons are using built-in images: NSLeftFacingTriangleTemplate, and NSRightFacingTriangleTemplate. The others I drew myself.

Buttons and input field into "top" bar

Safari on iPad has this bar at the top (it isn't called "toolbar" on iOS, right?), with some icons and input are for searching.
How to put such buttons and input field into Navigation Bar? Is it even a Navigation Bar? From what I read a Navigation Bar has one button on the left, another one on the right and one Label in the middle. But how to create something like that "top" bar from Safari?
If I'm in XCode 4.0 and choose "View-based app", should I then set in the ViewController > Simulated Metrics > Top Bar > Navigation bar? And how to add buttons to it?
Edit
Sorry for the confusion - I don't know if the proper way is to add to a Navigation Bar. I'm just asking for a general overview how such "top "bar" is made. What kind of View do such items belong under?
You probably don't want to use a navigation bar. They are very limited in what controls you can put in them. Try using a UIToolbar instead.
I think you may be looking for the UISearchBar
UISearchBar Sample Code
In the interface builder you should be able to just drag and drop objects onto the navigation bar, as for the little icons, those are just buttons with no border and images. Those images are preloaded in the iOS SDK, so you won't have to make them, but if you want your own then you can make them yourself.

Cocoa NSWindow with 2 toolbars

Is there any way to have 2 toolbars in one NSWindow. Something like Pages. With one large on at the top, and a smaller one below that.
NSWindow only supports one NSToolbar.
If you want to have a "second level" like Pages, you'll need to create your own non-NSToolbar-based solution.
Note that in Pages, the smaller "toolbar" isn't really a toolbar (as in NSToolbar), and is not editable. You should be able to recreate this with a simple custom view to draw the top and bottom lines, but let the window background through. Just position the view and set its autosizing as appropriate, then add your controls to the view.
Update: I believe NSBox can be configured to draw specific edges as of Leopard or Snow Leopard. Just a thought.

Resources