PDA

View Full Version : Help Creating Custom Buttons




Blakeasd
Oct 9, 2010, 03:12 PM
I am trying to create custom buttons for my application. I am try to create buttons similar to the ones in the Mac OS X songbird application. View the attachment to see the proper buttons. How can I achieve this and how did they create these buttons?
Thanks,
Blake



kainjow
Oct 10, 2010, 02:32 PM
Songbird is not a normal Cocoa application. It was created with XUL (https://developer.mozilla.org/en/XUL) which is a way to write apps for Mac, Windows and Linux using XML/CSS/JavaScript/etc. So asking how they made a custom button doesn't really help you if you're learning Cocoa.

More importantly you should be wondering how to create custom buttons in Cocoa and the way to do custom styling to mimic this appearance.

You've got a thread already on how to do a custom button which would be a good start.

Some tips on where to go from there:
1. For the purplish gradient effect, use NSGradient (http://developer.apple.com/library/mac/#documentation/Cocoa/Reference/NSGradient_class/Reference/Reference.html)
2. For the lighter gradient on mouse-over, use NSTrackingArea (https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/NSTrackingArea_class/Reference/Reference.html) to get mouseEntered and mouseExited events.
3. For the slight rounded corners, use +[NSBezierPath (https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/ApplicationKit/Classes/NSBezierPath_Class/Reference/Reference.html) bezierPathWithRoundedRect:xRadius:yRadius]

If you're new to Cocoa this is a lot to learn, so if you're having trouble just post back.

Blakeasd
Oct 11, 2010, 03:15 PM
So basically in a button cell's draw method i can use NSGradient to give my button a customized look?

PatrickCocoa
Oct 11, 2010, 04:10 PM
Some tips on where to go from there:
1. For the purplish gradient effect, use NSGradient (http://developer.apple.com/library/mac/#documentation/Cocoa/Reference/NSGradient_class/Reference/Reference.html)
2. For the lighter gradient on mouse-over, use NSTrackingArea (https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/NSTrackingArea_class/Reference/Reference.html) to get mouseEntered and mouseExited events.
3. For the slight rounded corners, use +[NSBezierPath (https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/ApplicationKit/Classes/NSBezierPath_Class/Reference/Reference.html) bezierPathWithRoundedRect:xRadius:yRadius]


Would it be possible to use a "normal" Cocoa button with a .png or .jpg backgroud? The background would have been created with a gradient (in Pixelmator or Photoshop or whatever) and assigned to the button. You would also create a slightly different background and assign that to the "highlighted" button state (I don't have IB open so may have the name wrong).

At that point, the normal button will look 90% like what he wants. If he's really at the stage where he doesn't know how to do the custom button as you suggest, he's probably should be focusing on the rest of his application anyway.

kainjow
Oct 11, 2010, 04:47 PM
Yes, as explained in the other thread, you can do that to get a basic custom button, but to get custom font styling you'll have to use setAttributedTitle and/or draw it yourself.

Maybe I'll whip up an example later, since from a quick google I don't see many, and for something like this since there are many steps involved it may be easier to learn by example :)

Blakeasd
Oct 11, 2010, 05:11 PM
That would be very appreciated! Thanks!!:)

kainjow
Oct 19, 2010, 11:55 PM
Alrighty, here's a small demo project. The only thing changed in the nib was the class name of the button and its cell. To see this, click on the button and go to Tools > Identity Inspector, and you'll see the class name set to "PRButton". To look at the cell, click again in the button.

GorillaPaws
Oct 20, 2010, 12:24 AM
I realize you're trying to learn how to create custom buttons on your own, but you might want to have a look at BWToolkit (http://brandonwalkin.com/bwtoolkit/) which is an Interface Builder plug-in that has some beautiful UI elements that you can incorporate into your projects as well.

Blakeasd
Oct 20, 2010, 05:28 PM
Wow! Very cool buttons. I was surprised by the professional quality of them. I have figured out how to create custom buttons and I have been very successful with doing so. This is very appreciated!!
Thanks!!!
Blake