Apparently, there is no way to take a UIButton and set it’s property to “selected” for the purposes of having the UI display the button with the background image as it appears in the UIControlStateSelected state. As a result, I decided that I would just track which of my series of UIButton controls was supposed to be selected, set the background image of all the buttons to nil, and set the UIControlStateNormal background image of the button to an image, and it seemed to work OK.
The code to do this, however, was kind of ugly, and my co-worker on this project pushed me to find a better way. The result is the ExpandoButton class that we created and added to the project. For this class (which of course inherits UIButton), I wanted to be able to initialize it to a particular background image, and I wanted to have a message I could send the button to have it switch back and forth from the unselected background image to the selected background image.
Here are the header and implementation files for the ExpandoButton object class:
//
// ExpandoButton.h
//
#import <Foundation/Foundation.h>
@interface ExpandoButton : UIButton {
}
- (void)setSelectedImage:(BOOL)isSelected;
@end |
//
// ExpandoButton.h
//
#import <Foundation/Foundation.h>
@interface ExpandoButton : UIButton {
}
- (void)setSelectedImage:(BOOL)isSelected;
@end
//
// ExpandoButton.m
//
#import "ExpandoButton.h"
@implementation ExpandoButton
- (id)initWithCoder:(NSCoder *)decoder
{
if (self = [super initWithCoder:decoder]) {
UIImage *image = [UIImage imageNamed:@"button_normal.png"];
UIImage *stretchImage =
[image stretchableImageWithLeftCapWidth:4.0 topCapHeight:4.0];
[self setBackgroundImage:stretchImage forState:UIControlStateNormal];
self.backgroundColor = [UIColor clearColor];
}
return self;
}
- (void)setSelectedImage:(BOOL)isSelected
{
NSString *file;
if (isSelected)
{
file = @"button_selected.png";
}
else
{
file = @"button_normal.png";
}
UIImage *image = [UIImage imageNamed:file];
UIImage *stretchImage =
[image stretchableImageWithLeftCapWidth:4.0 topCapHeight:4.0];
[self setBackgroundImage:stretchImage forState:UIControlStateNormal];
}
@end |
//
// ExpandoButton.m
//
#import "ExpandoButton.h"
@implementation ExpandoButton
- (id)initWithCoder:(NSCoder *)decoder
{
if (self = [super initWithCoder:decoder]) {
UIImage *image = [UIImage imageNamed:@"button_normal.png"];
UIImage *stretchImage =
[image stretchableImageWithLeftCapWidth:4.0 topCapHeight:4.0];
[self setBackgroundImage:stretchImage forState:UIControlStateNormal];
self.backgroundColor = [UIColor clearColor];
}
return self;
}
- (void)setSelectedImage:(BOOL)isSelected
{
NSString *file;
if (isSelected)
{
file = @"button_selected.png";
}
else
{
file = @"button_normal.png";
}
UIImage *image = [UIImage imageNamed:file];
UIImage *stretchImage =
[image stretchableImageWithLeftCapWidth:4.0 topCapHeight:4.0];
[self setBackgroundImage:stretchImage forState:UIControlStateNormal];
}
@end
A few notes here about the implementation file. You will of course need to add the stretchable unselected and selected button images to your project and change the names above, along with changing the cap width and height to your needs. Also, the initWithCoder part took us a few moments to figure out, it wasn’t working at first because we weren’t calling the super’s initWithCoder, just the regular old init. And finally, keep in mind that there is no error checking, optimization, or memory leak checking going on here.
To actually use the ExpandoButton, go into your Interface Builder, and from the Library window, select the Classes option, make sure the choice list right below is set to Library, and you should then be able to scroll the list and see an ExpandoButton, which looks just like a UIButton. Put that object on your view and set the size and title if you wish. VERY IMPORTANT: Make sure to set the button type of your ExpandoButton to Custom instead of the default of Rounded Rect.
Then, in your view controller header file, set up an IBOutlet with type of ExpandoButton (don’t forget the header or @class), along with the corresponding @property, and in the view controller implementation file, set up the @synthesize. After you save the files and build, go back into Interface Builder and set up the connection between the IBOutlet and the ExpandoButton on the view. (I hope you remembered where it was. When you set it to Custom and if you do not have any title text, the button sort of disappears.)
If everything is hooked up and working correctly, in your implementation file code, you can do something like this:
[myExpandoButton setSelectedImage:YES]; |
[myExpandoButton setSelectedImage:YES];
And the button should show up with the selected background image.