Any layout/geometry management for Cocoa? - cocoa

If i create WinForms / Qt / Gtk application i use so called "layout managers" (or "geometry managers") to automatically layout my UI according to text inside widgets and my instructions. For example, if i layout a window with big edit field and 2 buttons below it aligned right i write following code "Create a window with vertical layout manager. Add edit widget as first item and horizontal layout manager as second item. For horizontal layout manager add spacer as first item, button as second and button as third". My window will be automatically resized according to button labels and edit field size. Also, if i resize my window all items will be resized automatically.
Is it something like layout managers for OSX? I have found that NSView can be added into hierarchy, but i can't find any ways to instruct parent NSView something like "arrange child NSViews vertically".

You should read about Cocoa Auto Layout, new in OS X 10.7.

Related

Hidden window title with accessory view

I want to have a window with a hidden title, as seen in Safari or Xcode, but using a titlebar accessory view instead of a toolbar (I want more control over arrangement and content than a toolbar provides). Is this doable?
I haven't quite been able to make it work. If I set my window's titleVisibility to hidden, and my accessory view's layoutAttribute is bottom, then the title area is empty except for the standard close/minimize/zoom buttons, and my accessory view appears below that.
If I change the layoutAttribute to right, then my accessory view appears to the right of the standard buttons where I want it, but the bottom is cut off because the title bar isn't tall enough, and the view also doesn't resize horizontally with the window.
Is there a way to make this work? Or do I have to use a toolbar?
Update: I used Xcode's visual debugger to examine Xcode's own title bar, and found that it is using a toolbar. The debugger refuses to attach to Safari, so I'm left wondering how it does the new tab button. I imagine that button is a right-pinned accessory view, and the rest is a normal toolbar. Safari's toolbar is still customizable, so that seems most likely.
I decided to go ahead and use a toolbar, and it's working pretty well.
I took my NSTitleBarAccessoryController subclass and made it inherit from NSViewController instead.
I created a non-customizable toolbar for my window, with a single "Image Toolbar Item" in both the allowed and default sets.
The toolbar item has a height of 32 and a max width of 10000 so it can stretch to fill the title bar.
In my toolbar delegate, in toolbarWillAddItem:, I instantiate the view controller from the nib and put its view into the item.
A text label that is effectively the new window title has its value bound to the window's title.
To match the spacing in Xcode's title bar, use a left and right margin of 1 pixel (zero will cut off the edges) and a top margin of 5.
window.titleVisibility = .hidden moves the toolbar into the title area.

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 can I get a two-row toolbar like in Mail.app and Xcode?

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.

NSWindow's title as indicator popup button

I'm trying to make my first Cocoa app (previously I was making iOS apps) and what I wish to do for my custom view is make it's title clickable with indicator (accessory) triangle facing down.
Clicking the title would open a popup/menu with my items.
How is that doneable in Cocoa?
Rdelmar's answer is probably the easiest way to go, but may not do exactly what you might want to do (which is replace the actual title with a pop up item, instead of having a popup button under the title in the toolbar area). With respect to functionality your application will probably work just as well using the toolbar.
If, however, you truly want to replace the actual title, the means of going about this would be to set the NSWindow title text to #"" to hide it, and redraw it by sticking in your own view.
[[[theWindow contentView] superview] addSubview:theSubview];
This basically tells the superview of the main content view to add another subview (direct "translation" from the code), and you'll have to tinker with the frame of this new subview to have it be positioned where the title should be positioned (as now it's free to be placed anywhere in the window frame, including on top of the title bar, as opposed to simply inside the content view).
theSubview can be your popup button, or whatever you want, and you'll also probably have to custom draw the popup button to match the original drawing of the window title.
You can do this by adding a toolbar to your window in IB. Once, you add the toolbar, you can double click on it to open the customizer view of it. Drag a popup button into the Allowable Toolbar Items area and after it is inserted there you can drag it into the bottom area which shows the layout of the toolbar -- you can also drag out any of the default items there that you don't want.

What Qt4 widgets should I use and how to approximate a ribbon-style interface?

I am trying to create an interface for my application using Qt Designer. I want it to have a tabbed, ribbon-style set of controls at the top, and a MDI-style area with docked windows which I plan to show and hide depending on which tab of the ribbon is currently selected. I am just beginning with Qt Designer as well as Qt4 itself for that matter so I'm not quite sure how to setup the window, which widgets and layouts should I use etc.
It's quite obvious there should be a QTabWidget at the top, but I'm not sure about the bottom. Should I use a QFrame? A QMdiArea? A dock widget? What layouts can I use to make sure the tab widget has a fixed height, occupies the whole width of the window at all times and the bottom area scales as the window is resized?
I've read in the manual that splitter layouts allow for manual adjustment of the size of the widgets they contain, but I can't drag the box size of a widget after I place them inside a splitter. Thus I'm unable to setup the area below the ribbon. Anyone, help?
You should look into the QMainWindow and check the multiple utilities it can provide you (Toolbar, StatusBar, DockWidgets, CentralWidget, etc...).
The way I understood your case is that you will always have the MDI Area visible, and that the tab bar will only be used to change the dockWidgets. Here's how I would do it.
The centralWidget of the mainWindow would be a QWidget with a QVBoxLayout containing a QTabBar widget first (up) and a QMdiArea under it. The sizes should be handled automatically.
This will allow the user (or you) to dock widgets on the left, bottom, top or right areas of the mainWindow's central widget. Keep pointers to the dockWidgets to be able to move and show/hide them at will.
Hope this helps.
VTK Designer, which is built on Qt, has a Ribbon-ish interface. You might take a look at the source code for reference.

Resources