Desired look
I wish to make a toolbar for my app that will contain some simple buttons, each with a single monochromatic icon. Here is an example of some toolbar buttons similar to I'm trying to achieve, from Mail's compose window:
Notice these buttons have a consistent size, inner padding, padding, and shading. This is a pretty consistent style across macOS, present in Mail, Safari, Finder, etc. This leads me to suspect there's a standardized UI component for creating such buttons.
If I use a segmented control, each button looks correct, with each icon being correctly padded:
Now I would like to add individual buttons that match the style.
Attempt 1
My first attempt was to add a "Push Button" (NSButton) to the toolbar:
This resulted in a wide button that's a bit too short, and not lined up with the segmented control:
Attempt 2
My second attempt was to use a segmented control, with only 1 segment.
This resulted in a button that's the right shape, size, etc., but it was off center relative to its label.
Naturally, I can manually adjust the button to match the goal, but I feel like I'm missing something. What's the proper way to create these standard buttons?
This is actually quite easy to do and you were close already.
You can use NSButton for that. Note that it has different styles (defined in NSButton.BezelStyle) to choose from. The default one is the one to use inside windows and modals. But for toolbars, to match the style of segmented controls and search bars, you can choose the style .texturedRounded.
You can also set the style via Interface Builder. Note that you have to select the button itself, not the toolbar item around it.
To get the correct size, you seem to set the icon within the toolbar item, not the button itself.
Here is my result:
Related
I have an NSToolbar with NSToolbarItem instances. One of the toolbar buttons is in one of two modes, depending on whether it currently operating (has been clicked) or not. I am handling this in code by changing the icon for the button to have a background rectangle when the command it represents is operational, but I can't help thinking there must be another way.
I've tried using the Selectable checkbox in XCode Interface Builder attribute inspector, and it sort of gives the result I want, except when it is selected I can't click any of the other toolbar items. I also can't see how to deselect it.
I'm a bit of a Cocoa noob so I expect the two state toggle thing is just waiting for me to find it, except so far I haven't been able to.
This seems like it would be a common thing to want to do, thing is how?
I have a view with a lot of UI buttons. I want some of the buttons to show and some to be hidden depending on my dynamic content. This can be done with button.isHidden = true. The problem is that the layout still set its constraints to the hidden buttons which create a lot of empty space.
You can see the empty space at the bottom in the picture where the buttons are hidden. So, is it possible to make the buttons "gone" instead of hidden? In Android Studio there is a isGone code (can't remember the exact code) that not only hides the button but removes the height and width of it as well.
I am a rookie Cocoa guy. I need to design and implement a view which will show collection of labels on Mac OS using Xamarin. These labels will have a text and color associated with them. When shown inside the view, label should expand till it covers whole text and it will be shown with background and foreground colors.
I have attached the picture of this user control on Windows, you can see that labels inside the StackPanel are expanding till they cover the whole text. Hope this gives better idea about my ask.
The $64,000 question is "are these labels controls?" In other words, do you expect the user to click on these to do something, or are they just for display?
If your answer is "just for display", the solution is super simple: Use an NSTextField and programmatically add attributed text (NSAttributedString) to it. Attributed text attaches display properties to runs of text within the field; properties like "background color".
If you want these to be buttons that you can click on, then things get a lot more complicated.
Since you apparently want the button layout to "flow", you might look into imbedding buttons (well, button cells) into an NSTextField using attachments. This is normally how non-text content (say, an image) can be inserted, but with some fiddling it can actually be anything a control cell can draw. See How to insert a NSButton into a NSTextView? (inline).
Warning: this is not a "rookie" topic and will involve control cells and custom event handling.
If I were doing this, I'd probably just create NSButton objects for each label (choosing an appropriate style/look like NSRecessedBezelStyle), create a custom subclass of NSView to contain them, and then override the layout method to position all of the buttons the way I want.
To be thorough, I'd also override the intrinsic size methods so the whole thing could participate in auto-layout, based on the number and size of buttons it contained.
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.
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.