macOS Creating custom buttons?

[ranguvar]

Hi,

how would I go about creating a button with a custom appearance, for example the "All Albums" button in iTunes-grid-view.
Basically, how do I create a button using image files (pressed, normal, disabled, etc. versions)?
All I found was posts saying one should subclass NSButton / NSButtonCell, but none describe this any further.
Can someone point me in the right direction here?

Thanks, ranguvar


EDIT: Here's the kind of button I'd like to create:

 

[SRossi]

Right have a look at the documentation for NSButton class.

To do this go Xcode -> Help -> Developer Documentation, and then in search type "NSButton". When the class reference appears look for "Companion Guide", it is not that far down and click the reference next to it. This should tell you everything you need to know about buttons, all shapes, sizes and colours.

Stephen

 

[ranguvar]

Right have a look at the documentation for NSButton class.

To do this go Xcode -> Help -> Developer Documentation, and then in search type "NSButton". When the class reference appears look for "Companion Guide", it is not that far down and click the reference next to it. This should tell you everything you need to know about buttons, all shapes, sizes and colours.

Stephen

Isn't there something simple, like UIButton's setBackgroundImage:forState: method? I mean, I don't want to change a whole lot about the button, it seems overkill to have to subclass NSButton...

 

[chown33]

Start by reading the class reference docs for NSButtonCell, and its superclass NSCell. You can find them by googling:

NSButtonCell class reference
NSCell class reference

Note that NSCell has setImage: and NSButtonCell has setAlternateImage: methods.

You should also read about other attributes of those classes, such as border, bezel, enabled, etc. If you don't immediately understand what each attribute does, I recommend writing test code that shows cells with and without the attribute, so you can see what happens.

Don't forget to read the NSButton class reference, because that will probably be the container for your NSButtonCell.

 

[ranguvar]

Start by reading the class reference docs for NSButtonCell, and its superclass NSCell. You can find them by googling:

NSButtonCell class reference
NSCell class reference

Note that NSCell has setImage: and NSButtonCell has setAlternateImage: methods.

You should also read about other attributes of those classes, such as border, bezel, enabled, etc. If you don't immediately understand what each attribute does, I recommend writing test code that shows cells with and without the attribute, so you can see what happens.

Don't forget to read the NSButton class reference, because that will probably be the container for your NSButtonCell.

Yes, I have tried setAlternateImage / setImage methods, but it doesn't really work to my satisfaction. The alternate image doesn't even get loaded, and the image doesn't fill out the button, nor shape it, nothing.

Here's the kind of button I'd like to create:

I'm sorry, concluding from the answers I got this should be as simple as reading the documentation, but I'm lost.

 

[chown33]

Setting the image does one thing: it sets the image. It doesn't automatically resize. You will have to invoke several different methods in order to setup the button correctly.

If you can't figure it out from the documentation, you should look for Cocoa sample code, tutorial code, or example code that uses images in buttons. Google the keywords from that sentence.

 

[ranguvar]

Wow, I finally found a "tutorial" here.

The easiest way to create a custom button appearance when your buttons will have a fixed size, for example the +/- buttons in Spotlight, or the play controls in iTunes and similar:

Create two graphics for the button, one normal state and one pressed state. Make sure your background is transparent and saved with the file, either in TIFF or PNG format. Add these graphics to your project. In Interface Builder, drag an NSButton to your window. In the inspector, choose "Rounded Bevel Button" as the button's type, "Momentary Change" as its behaviour, and uncheck the "Bordered" box. Set the "Icon" field to the name of your normal button state graphics (minus the file extension) and set the "Alt. Icon" field to the pressed state graphic. Using the Size section of the inspector, make the button the same dimensions as your graphics.

Test run your window in Interface Builder (cmd-R) and it should work just fine. I find it very convenient that this can be done without a single line of code. Of course, if you want buttons that can be resized you'll have to resort to other methods.

And I thought I'd have to write code ...