OBShapedButton: Non-Rectangular Buttons on the iPhone

UIButton has always been capable of displaying buttons with arbitrary non-rectangular shapes. All you have to do is use PNG images with alpha channels to define the transparent parts of the bounds rectangle.

While a button’s shape may be arbitrary, UIButton always responds to touches within its entire bounds, however. This could cause problems and confusion for the users, especially when multiple non-rectangular buttons are placed close together so that their frames overlap.

OBShapedButton is a replacement for UIButton that solves this issue. Instances of OBShapedButton only respond to touches where the button image is non-transparent. Here’s how to use it:

  • Get the code from GitHub.
  • Add OBShapedButton.h, OBShapedButton.m, UIImage+ColorAtPixel.h, and UIImage+ColorAtPixel.m to your Xcode project.
  • Design your UI in Interface Builder with UIButtons as usual. Set the Button type to Custom and provide transparent PNG images for the different control states as needed.
  • In the Identity Inspector in Interface Builder, set the Class of the button to OBShapedButton.

That’s it! Build and run the enclosed demo project to check it out. I am releasing this under the MIT license.

Update April 24, 2011: Many of you reported serious bugs with this class over the past 18 months, including wrong calculations of translation matrices and some obvious omissions that caused the class to not work with non-symmetrical shapes, non-correctly sized images, and the retina display. Thanks to everyone who identified the bugs and often even included a fix. I finally managed to update the code. Get the updated code from GitHub.