I am trying to make a NSSearchField taking up the whole width of a toolbar in a NSWindowController.
I created a new NSWindowController using Xcode storyboard, add a toolbar to it, when add search field to the toolbar.
I drag the search field from allowed toolbar items to default toolbar items
Set toolbar item's max width to a large number say 1000
I build the app and run. The search field shrinks when window width shrinks, but does not expand beyond a certain width when window width expands.
The question is how to make search field expand and take up all remaining space of the toolbar?
It doesn't sound to me like the toolbar is really what you want to use here. The purpose of the toolbar is to allow multiple UI elements to be included in a user-configurable way. If you want to force one element that takes up the entire width, I suggest just putting it in the window's content view and setting up the layout constraints to pin to both the left and right sides. If you set the "Textured" check box in Interface Builder, it should look roughly the same as it would have looked using the toolbar.
Related
When I do something simple, like add a Wrapping Text Field in Interface builder (drag and drop method), I find that I'm unable to size the object as I would like using the mouse pointer.
For example, once I've placed this Wrapping Text Field into the upper left hand corner of my Document, I can't adjust the height of the object by dragging down on the bottom-middle sizing tool.
This happens all the time when sizing different objects in Interface Builder, it's really frustrating! The only workaround seems to be to open the Size Inspector and to manually adjust the height of the object by increasing the value.
What am I doing wrong? Is it because the object clamps to the top-left corner of the Document when I place it there? I'm not adding any constraints, merely dragging and dropping elements onto the Document in the xib.
I'm using Xcode Version 5.1.1 (5B1008) on OS X 10.9.2 (13C1021)
OK so after a bit of playing around in Interface Builder, I've noticed that I can switch off the "Use Auto Layout" feature in the File Inspector. Now when I switch to the Sizing Inspector I have an easy to use "Auto Sizing" feature that when I hover over the preview, shows me exactly how the NSTextField will size when re-sizing the parent document.
Also once I've switched off "Use Auto Layout", I can use the mouse pointer to adjust the NSTextField height and width in the Interface Builder.
I guess the "Use Auto Layout" is constraining the height of the NSTextField to the appropriate height it thinks it should be but I can't tell where it get's this value from.
How can I do something like that?
I didn't find any appropriate object in the Interface Builder library.
Any thoughts?
The best way that i found is to use NSSegmentedControl.
after you dragged it on the canvas, you should configure its style:
Style: Small Square
Mode: Select Momentary
looks better. Now use "image" field to set NSAddTemplate and NSRemoveTemplate. Make sure that label field is empty.
Ok, we have "+", "-" and one empty segment. To prevent the latest one to be selected by the user, select it from Segment: pop up and turn off Enabled check box (located next to State: label).
And lastly, what we have to do is set width of first two segments to make them square.
Go to Size inspector
Select Segment 0
Turn off "Fixed" checkbox (segment should immediately autoresize to fit image)
Select Segment 1 and repeat number 3
Now as you resize control, only last segment will change width
Put it at the bottom of your table view and resize as well.
Enjoy ;)
Update for OSX Yosemite
I tried to achieve the same look as Mail.app has in the Accounts view (right window on my screenshot).
I did achieve the desired result by following the steps below:
Add a NSSegmentedControl
Add two segments and set the image to each:
NSAddTemplate for the + button
NSRemoveTemplate for the - button
Set the size of the segments to fixed and set the value to 32 pixels
The rectangle next to the buttons is a NSButton with the style Gradient.
The Button is enabled but Refuses First Responder is set to true so that it is not clickable.
Use a NSButton with a gradient style, and for the images use the system provided NSAddTemplate and NSRemoveTemplate.
One answer here suggests using gradient buttons, however these buttons cannot be disabled as this causes the background to change and thus breaks the look. Another one suggested using a segmented control, which is almost perfect but segmented controls don't support autoresizing, e.g. if the table width is dynamic. My suggestion is a combination of both. Use a segmented control for the actual buttons and a gradient button to fill the rest of the table width that now can also be dynamic if the button width is dynamic as well.
See my answer to a similar question (with screenshots):
https://stackoverflow.com/a/22586314/15809
As you can see from the screenshot, the View button text is aligned properly under Allowed Toolbar Items, but once I add it to the toolbar, it's aligned to the right. Why?
You have to set sane minimum and maximum sizes for the toolbar item. I think you also have to make sure the autoresize masks (or constraints if you're using automatic layout) are set properly in the toolbar item's view (the NSSegmentedControl in this case). I don't have the "proper" settings handy but the min/max toolbar item size + correct autosizing behavior are the key here.
So I'm using the method:
[someWindow setContentBorderThickness:24.0 forEdge:NSMaxYEdge];
But I can't seem to get the toolbar to increase in height. It simply stays the same as in default. Can anyone shed some light here?
An NSToolbar is automatically resized to accommodate the height of the tallest NSToolbarItem. The standard (large) toolbar items are all 32 px tall, so the toolbar has no need to make itself larger. If you do something like add a custom view toolbar item, then it will be resized to accommodate that item, as shown in the image below:
(To accomplish the result shown above, I clicked on the toolbar twice in IB to bring down the Allowed Toolbar Items sheet, then dragged an NSView custom view from the library palette onto that sheet).
P.S. I'd recommend using this capability with discretion.
You cannot specify an arbitrary height for NSToolbar. You can, however, specify a size mode. A toolbar with 24x24-pixel icons has a small size mode:
[toolbar setSizeMode: NSToolbarSizeModeSmall];
which is equivalent to Size: Small in Interface Builder’s Attributes Inspector.
Yeah, I did my homework and I found the setFrame:frame display:YES animate:YES but I don't understand how am I find out the height necessary to make it bigger or smaller. Let me exemplify: I'm making kind of spotlight search tool but when the user start the app it will just have a textfield (to type in the search keywords) and a button (Filter Settings) and the window fits the size of these two objects (NOTE: The window start position is on the center and on the top of the screen). When the user hits the "Filter Settings" button I want the window to make an animation going down and then showing the "check box group" that filters the search results.
In your case you need to find out the height of the check box group that you are adding to the view. An easy way to do this is to make a seperate view in your nib that contains the check boxes. Hook up the view to the window using IB, and when it is time to display the check boxes add that view to the windows content view and animate the window resize.