Make Your Own Buttons in Interface Builder

So, you, like me, want to make your own buttons in interface builder? I too struggled with this. Sometimes the help menu in Interface Builder just sucks. Well, generally it sucks. The problem you may have had, the problem I have had, is simply that your button graphic when clicked gets a white rectangular background during mouse down. Well, I finally figured it out! (This is for XCode 2.x and I don’t know how it goes in XCode 3, but I imagine it is similar.)

First off, of course, you need a graphic of your own. PNG format is best. Make it pretty in Photoshop, export it as a PNG with transparency, and at the desired size. Now, drag it into the XCode window, into the Resources group. Next, open your NIB file in Interface Builder. Add a button to the window. In the inspector palette, with the button selected, you need to change a few options. For Type: choose Square Button. Now, click on the Images tab in the window that holds Instances, Classes, etc… Drag your image onto the button you created. Then, with the button selected, uncheck the Bordered checkbox. Next, change the inspector from Attributes to Size, and resize the button to take up the amount of space you like. Finally, change the inspector palette back to Attributes, and change Behavior: to Momentary Change.

Try it out with command+R. Click your button and see it change the way you expected! No more white background on mouse down!

As an aside, if you don’t want the default shaded button on mouse down, create the alternate appearance in Photoshop. Save it like before as a PNG of the same size, but with a slightly different name. (just append ‘down’ to the end of the name) Add the button to the XCode project’s Resources group like before. In Interface Builder, it should now appear in the Images. Select your button. In the inspector palette, just copy the image name as it is in the Icon: field and paste that into the Alt. Icon: field and append ‘down’. Or, just type the name of the image minus the .png extension. Test it out. Your button should change exactly as you like with a mouse down action.

If you want more complex changes or animation, you’ll probably do well to use the Core Graphics API and build it yourself with that.