Please give me an advice how to implement this kind of disclosure button as on my screenshot - a disclosure "arrow down" button displaying a menu on click:
I've tried two approaches, using NSPopupButton and NSButton with disclosure style and manual menu displaying:
NSPopupButton keeps displaying default value text and can't be resized in Interface Builder to a narrow size.
NSButton displays a menu, but it's obviously misplaced to the point where I click the button, not at the bottom edge. I'm using the following code:
- (IBAction)handleShowMenu:(id)sender
{
[NSMenu popUpContextMenu:profileMenu
withEvent:[NSApp currentEvent]
forView:sender];
}
So what's the right way to display such a menu?
I've managed with it! The correct setup is to use NSPopupButton with "No Arrow" and "Disclosure" bezel style, "Momentary Push In" type.
Changing the bezel style of your popup button to "Textured" and the arrow to "Center" will give you the appearance of your first screenshot. If you don't want the title of the selected item to appear, you also need to set the "Position" to "image only" (the white square).
Edit: I tried this in IB 3 and only simulated the interface. It seems that the "Textured" style looks different in Xcode 4. "Round Textured" is close, but it doesn't center the triangle horizontally.
Related
The toolbar in Pages (Numbers, Keynote) has a NSPopUpButton with a fixed image (irrespective of the menu that is selected). Using view debugging it turns out that this is a standard NSPopUpButton with a fixed image.
According to the NSPopUpButton docs regarding setImage:,
This method has no effect.
The image displayed in a pop up button cell is taken from the selected
menu item (in the case of a pop up menu) or from the first menu item
(in the case of a pull-down menu).
This means that this standard NSPopUpButton has non-standard behaviour.
How could this be implemented? Because setImage: has no effect, subclass the NSPopUpButtonCell and overriding -drawImage:withFrame:inView: has no effect (because it is never called).
The problem here is confusion: Pull down menus display their menu's first menu item as the image/title.
Don't use -setImage: to display a static image in a -pull down menu. Instead set the first element of the menu to be the image/title that you want to display and add the selection options as additional menu items.
#Volker is absolutely correct. This is the built-in behaviour but you set the image by setting the first element in the menu not using setImage: or setTitle:.
Example, https://github.com/danieljfarrell/Toolbar-with-Pull-Down-Menu
Context:
In OS 10.10, Apple added some new subtle animations to various controls. For example, when you check a checkbox, the blue "checked" state now animates in by expanding outward from the center of the checkbox rather than abruptly switching to the "checked" image.
Similarly, when you open an NSPopUpButton and choose an item from the menu, the menu animates closed and the selected item appears to "zoom into" the popUpButton.
The Problem:
I have customized NSPopUpButtons that draw themselves differently than the default NSPopUpButton:
When I select an item in the pop-up menu, the new animation in 10.10 briefly shows the system-default popUpButton style while animating in (blue right-hand side, etc.).
Here's a screenshot of the animation in progress, showing the system-default popUpButton animating in. (The dark-grey rectangle in the back is the "pressed" state of my custom NSPopUpButton):
What I Need
This animation obviously looks terrible with customized controls. Is there any way to disable it or to customize it? I have been unable to find one.
Turning off the Bordered property in Interface Builder seems to do the trick.
Here’s a comparison of Bordered on and Bordered off.
Please note that the Bordered property was showing as being off by default, when it’s actually on. I just had to check then uncheck it to disable it.
I am new in MAC OS X development, I have to align text centre in nsMenuItem but I not find any particular solution. I checked on google but not find any tutorial.
Find some tutorial but not exactly same, in these tutorial we take a NSView in nsMenuItem and then Insert subview in NSVIEW to accomplish it centre align.
Is there is any better solution? Please provide me link if possible.
Edit : I attached screen shot, but this is not working for me.
Thanks
You can set the Attributed String of the menu item, which does allow you to center the text, as well as change the font, color and size of the text as well.
I do not know which version of Xcode/OSX you are using, but under Xcode 5.0.2 you can use the built-in interface builder to edit the attributed strings of menu items.
Click the MainMenu.xib entry, then click the menu you want to edit to open it, then click the menu entry. On the right side of the window there should be some options, if not click the right most square in the group of 3 at the top right of the Xcode window 1.
Once you have the right panel open click the Attributes Inspector icon [2] (4th from the left, looks like a slider type icon). At the bottom of the list of attributes you will see an entry for "Attrib. Title" [3].
That is where you can set a custom font, color and alignment for your menu item.
If you need more control then that provides, you can also embed custom NSViews into your menus which gives you complete control over how the menu will look.
I'm making an cocoa application from Mac OS X, not for iphone.
I am able to set the background image of a button and uncheck bordered in the attribute inspector. However, I do not know how I set the image for when you click on it (highlighted/on click, whatever you want to call it). I want to do this because
I have found guides on google to do this with UIbutton but this isn't helpful since I'm making this for Mac.
I am using InAppStoreWindow and the button is in the Title bar. When I click on the button with the custom image, the background goes white:
Thank you very much!
You are getting white background when button is clicked because You're using incorrect type. You need to change button's type to Momentary Change. You can change it in Attributes inspector:
Or change programatically:
[buttonOutlet setButtonType:NSMomentaryChangeButton];
And for highlighting: just add another image as alternate image in Attributes Inspector and it will be shown when button pressed.
I'm build a Mac application in the style of the Lion Mail.app. As part of this I'm attempting to create a simular toolbar to the one in the Mail.app but I can't seem to get the image in my toolbar button centered vertically.
Looking at the Mail.app toolbar I see a nice series of buttons with centered icons:
but when I go interface builder I can't seem to recreate the same button. What I get is:
What I've tried doing is, in Interface Builder:
Create a new window
Add a NSToolbar to that window
Add an NSButton to the toolbar with Style - 'Push', Image - 'Envelope', Position - 'NSImageOnly', Scaling - 'Proportionally Down'
As you can see the icon is clearly not centered vertically on the button like those in the Mail.app toolbar.
Anybody have any ideas???
At the moment I'm using XCode 4.2 and laying out this button with Interface Builder. I'm trying to build the toolbar button by ONLY adding the image to the button and not painting the button for each item, ie drawing the border and icon.
Any help would be greatly appreciated as this has been driving me a little nuts.
Thanks in advance - AYAL
Turns out the answer to this problem was much simpler then I had expected. After a lot of teeth gnashing, hair pulling, and twiddling pixels I came across the solution.
Instead of using a 'Push' button I simply had to switch to a 'Round Textured' button. Once I did that any image I added to the button was nicely centered. Next I just had to manually scale my image to look right.
The recipe then for a Mail.app Toolbar is as follows:
Add a button to your Toolbar
Set the button style to 'Rounded Textured'
Set the image of the button
Set the position to 'NSImageOnly'
Set the button size to 40 x 25 as well as the min and max sizes of the ToolbarItem
The result is a toolbar that can look very simular to the Mail.app toolbar.
Thanks All - AYAL
One way to do it is to have your image actually be the button i.e. take up all of the button's canvas. You will have to use the button's setBordered: method so the button's border is not drawn.
you could make the button image in something like gimp or photoshop then use that as the background or image for the button.
i feel like your going to say "this is what im doing". and maybe you made the little mail icon but i mean for you to make the whole button, outline and everything, then use that for the button image. make sense?
like here, just use this as the background