Some of the color selection buttons in the Xcode details panels are a NSPopupButton with a color well. It looks something like a segmented control/popup button.
Placing a standard color well and standard popup button next to each other doesn't have the same look. Also, the menu wouldn't cover the color well in this case. The popup image (two triangles) is not readily available for a custom control either.
Anyone tried to make a similar control before? Any hints on how to make it?
Related
I don't know what happened. Elements items like buttons or segmented control are invisible in main storyboard. Cellphone is the same.
I put the image, of what I mean
It looks like you accidentally changed the view's (or window's) Tint Color to white. (Or you could even have turned it to Clear color, or no color at all.)
This would cause the text of the button or segmented control to be invisible, because it is white on white. The segmented control has a border but it would turn white too. So you wouldn't be able to see anything.
There are two places to look to fix this. Look at the Tint popup of your view controller's View in the Attributes inspector.
Also look at the Global Tint popup in the File inspector for the whole storyboard.
[EDIT It turned out to be the Global Tint.]
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:
I have a square NSButton and an Image the same size of the button. I set the image to the button, turned off bordered and set scaling to none. Then the image seems smaller than the button. If I set scaling to axes independent, the image can fill the all button. But is set button enable to false. The button disappeared. Does anyone know what's wrong with it?
Well... Your description, IMHO, is a bit confused! Anyway, for what I understood, you're having problem with Xcode.
You have to set the scaling because the button is always a bit larger than its content, because of the border (even if you turn off its borders, it will still be rendered with a small invisible border). For an unknown reasons, setting to Axes Independently solves this problem and resizes the image in the correct way (this works in any kind of NSControl you can use).
I cannot figure out how enabling or disabling the button can influences its visibility. Are you sure you're not using the "Hidden" property instead of the "Enabled" one?
[myButton setHidden:YES]
This will make the button transparent and insensible to clicks.
[myButton setEnabled:NO]
This will act on the answer to user clicks (and it's what you're looking for). Is your image mainly grey? Disabling the button will make the button gray, and this could make the image invisible...
Is there a bevel style that can replicate NSToolbar style of buttons that are used, for instance, in the Safari's preferences window to switch between different panes?
I need to replicate NSToolbar in an NSView using NSButtons. I understand that I should probably be using NSTabView, but I'd like to implement the look of xcode's left pane. Any tips here would be appreciated greatly.
There's nothing built-in, you'd have to create the images yourself. However, replicating the behaviour is straightforward.
You could simply use a single-row NSMatrix of NSButton objects. Just give the buttons an image and an alternate image (for the highlighted state) and set the matrix mode to NSRadioModeMatrix.
I could not find a way in the documentation to tell an NSButton to resize its image to fill up the whole button. Is there a way to do this programatically?
The closest you'll get is -setImageScaling: ... look up the constants to see how the image will be scaled within the button cell, given its bordered state and bezel type.
If you're looking to replace the standard button entirely with your image (ie, the button cell doesn't draw itself at all - your image serves as the entire visual representation), turn off the border (-setBordered:).
All of these options can be configured in IB as well. A tip: in IB, hover the mouse over any setting in the inspector panel - most if not all give you a hint that shows what method controls the behavior affected by the setting's control.