Go Back   MacRumors Forums > Apple Systems and Services > Programming > Mac Programming

Reply
 
Thread Tools Search this Thread Display Modes
Old Oct 9, 2010, 04:12 PM   #1
Blakeasd
macrumors 6502a
 
Join Date: Dec 2009
Help Creating Custom Buttons

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
Attached Thumbnails
Click image for larger version

Name:	Screen shot 2010-10-09 at 4.02.13 PM.png
Views:	37
Size:	100.2 KB
ID:	255128  
Blakeasd is offline   0 Reply With Quote
Old Oct 10, 2010, 03:32 PM   #2
kainjow
Moderator emeritus
 
kainjow's Avatar
 
Join Date: Jun 2000
Songbird is not a normal Cocoa application. It was created with 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
2. For the lighter gradient on mouse-over, use NSTrackingArea to get mouseEntered and mouseExited events.
3. For the slight rounded corners, use +[NSBezierPath bezierPathWithRoundedRect:xRadius:yRadius]

If you're new to Cocoa this is a lot to learn, so if you're having trouble just post back.
kainjow is offline   0 Reply With Quote
Old Oct 11, 2010, 04:15 PM   #3
Blakeasd
Thread Starter
macrumors 6502a
 
Join Date: Dec 2009
So basically in a button cell's draw method i can use NSGradient to give my button a customized look?
Blakeasd is offline   0 Reply With Quote
Old Oct 11, 2010, 05:10 PM   #4
PatrickCocoa
macrumors 6502a
 
Join Date: Dec 2008
Could he get close enough . . .

Quote:
Originally Posted by kainjow View Post

Some tips on where to go from there:
1. For the purplish gradient effect, use NSGradient
2. For the lighter gradient on mouse-over, use NSTrackingArea to get mouseEntered and mouseExited events.
3. For the slight rounded corners, use +[NSBezierPath 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.
__________________
iMac 21.5", 3.06GHz, 4 GB, 2 TB HD.
iPod Touch 3G.
PatrickCocoa is offline   0 Reply With Quote
Old Oct 11, 2010, 05:47 PM   #5
kainjow
Moderator emeritus
 
kainjow's Avatar
 
Join Date: Jun 2000
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
kainjow is offline   0 Reply With Quote
Old Oct 11, 2010, 06:11 PM   #6
Blakeasd
Thread Starter
macrumors 6502a
 
Join Date: Dec 2009
That would be very appreciated! Thanks!!
Blakeasd is offline   0 Reply With Quote
Old Oct 20, 2010, 12:55 AM   #7
kainjow
Moderator emeritus
 
kainjow's Avatar
 
Join Date: Jun 2000
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.
Attached Files
File Type: zip PurpleRain.zip (23.3 KB, 55 views)
kainjow is offline   0 Reply With Quote
Old Oct 20, 2010, 01:24 AM   #8
GorillaPaws
macrumors 6502a
 
GorillaPaws's Avatar
 
Join Date: Oct 2003
Location: Richmond, VA
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 which is an Interface Builder plug-in that has some beautiful UI elements that you can incorporate into your projects as well.
__________________
How to ask good programming questions: Getting Answers
GorillaPaws is offline   0 Reply With Quote
Old Oct 20, 2010, 06:28 PM   #9
Blakeasd
Thread Starter
macrumors 6502a
 
Join Date: Dec 2009
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
Blakeasd is offline   0 Reply With Quote

Reply
MacRumors Forums > Apple Systems and Services > Programming > Mac Programming

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Geektool: Problems creating my first custom script kiercardo UI Customization 3 Feb 5, 2014 05:24 AM
iPhone: theme with custom 'answer' & 'decline' buttons fisherking Jailbreaks and iOS Hacks 1 Feb 16, 2013 06:05 PM
Creating custom vibrations kmichalec iOS 6 6 Oct 19, 2012 02:02 PM
creating a custom 10.8 recovery HD kingweaver88 MacBook Pro 3 Aug 18, 2012 12:14 PM
Creating Images for Buttons BadWolf13 Mac Programming 5 Jun 2, 2012 01:59 AM

Forum Jump

All times are GMT -5. The time now is 05:07 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC