Create custom checkbox style button for iPhone

Recently, I got a task to develop an application for iPhone. In the application,  there are some optional choices for user to decide further processes. The first idea jumps out from my head is something like button with a checkbox just the same as other desktop platforms, but unfortunately, iPhone SDK doesn’t provide such view. The only official choice is the ON|OFF switch view,  but it really can’t represent the actually meaning of the options. So comes out the idea of writing  custom checkbox style button.

It’s really easy to implement. What we need is two images which are statuses for check and uncheck.  Here are the runtime screenshots:

 

The class  for Checkbox button  is CheckButton,  it’s inherited from UIButton,  look at the declaration:

#import 


 

@interface
 CheckButton :
 UIButton {


	BOOL
		_checked;

}


 

@property
 (
nonatomic, setter=
setChecked)
 BOOL
 checked;

 

-
(
void
)
 setChecked:
(
BOOL
)
 check;

@end




#import "CheckButton.h"

 

@implementation CheckButton

@synthesize checked = _checked;

 

-(id) init

{

	if( self=[super init] )

	{

		self.checked = NO;

		[self addTarget:self action:@selector(OnCheck:) forControlEvents:UIControlEventTouchUpInside];

	}

	return self;

}

 

-(void) awakeFromNib

{

	self.checked = NO;

	[self addTarget:self action:@selector(OnCheck:) forControlEvents:UIControlEventTouchUpInside];

}

 

-(void) dealloc

{

	[super dealloc];

}

 

-(void) setChecked:(BOOL) check

{

	_checked = check;

	if( _checked )

	{

		UIImage* img = [UIImage imageNamed:@"check.png"];

		[self setImage:img forState:UIControlStateNormal];

	}

	else

	{

		UIImage* img = [UIImage imageNamed:@"uncheck.png"];

		[self setImage:img forState:UIControlStateNormal];

	}

}

 

-(void) OnCheck:(id) sender

{

	self.checked = !_checked;

}

 

@end

To use the class, import the header where contains the button, and declare a IBOutlet with type of “CheckButton”, and connect the IBOutlet in InterfaceBuilder to the member as shown below:

This is simple but exactly meet my requirement. Of course, someone wants to include title text of the button within the button class,  it’s sure to be easy to do 

Here is the sample project zip file.