Help Creating Custom Buttons

Discussion in 'Mac Programming' started by Blakeasd, Oct 9, 2010.

  1. macrumors 6502a

    Joined:
    Dec 29, 2009
    #1
    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 Files:

  2. Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #2
    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.
     
  3. thread starter macrumors 6502a

    Joined:
    Dec 29, 2009
    #3
    So basically in a button cell's draw method i can use NSGradient to give my button a customized look?
     
  4. macrumors 6502a

    Joined:
    Dec 2, 2008
    #4
    Could he get close enough . . .

    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.
     
  5. Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #5
    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 :)
     
  6. thread starter macrumors 6502a

    Joined:
    Dec 29, 2009
    #6
    That would be very appreciated! Thanks!!:)
     
  7. Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #7
    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:

  8. macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #8
    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.
     
  9. thread starter macrumors 6502a

    Joined:
    Dec 29, 2009
    #9
    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
     

Share This Page