Custom UIButton does not change its image

Question

I created a custom UIButton, and it has a field "selected" to identify that this button is selected or not. As default: it set its image as image1. When it is selected it changes to image2.

@interface MyButton: UIButton

@property (getter=isSelected, setter=setSelected:) BOOL selected;

@end

@implementation MyButton

@synthesize selected = _selected;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.selected = NO;
    }
    return self;
}

-(void) setSelected:(BOOL)selected
{
    if (selected)
    {
        [self setImage:[UIImage imageNamed:@"image1"] forState:UIControlStateNormal];        
    }
    else
    {
        [self setImage:[UIImage imageNamed:@"image2"] forState:UIControlStateNormal];        
    }

    _selected = selected;
}

-(BOOL) isSelected
{
    return _selected;
}

Now, from a UIViewController, I add this custom buttom to its view. And when the user click another button, I want my custom buttom should change its image (from image1 -> image2 and vice verse).

@interface SessionViewController (){    
    MyButton* btn;
}

@end

@implementation ViewController

- (void) viewDidLoad
{
    [super viewDidLoad];
    btn = [[MyButton alloc] initWithFrame: CGRectMake(0,0,100,100)];
}

- (IBAction) touchChangeStateButton
{
    BOOL b = btn.isSelected;
    btn.selected = !b; 
}

@end

My question is why my custom buttom does not change its image??? Thanks.

Answer 1

I think the problem is that the UIButton's built-in selected property is interfering with your custom one. I tried changing the name to 'selacted' (just to make it different) and changed all the corresponding code, as seen below, and it seemed to work as you expect it to.

@interface MyButton : UIButton

@property (getter=isSelacted, setter=setSelacted:) BOOL selacted;

@end

@implementation MyButton

@synthesize selacted = _selacted;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.selacted = NO;
    }
    return self;
}

-(void) setSelacted:(BOOL)selacted
{
    if (selacted)
    {
        [self setImage:[UIImage imageNamed:@"image1"] forState:UIControlStateNormal];
    }
    else
    {
        [self setImage:[UIImage imageNamed:@"image2"] forState:UIControlStateNormal];
    }

    _selacted = selacted;
}

-(BOOL) isSelacted
{
    return _selacted;
}

And then in your viewController:

- (IBAction) touchChangeStateButton
{
    BOOL b = btn.isSelacted;
    btn.selacted = !b;
}

Answer 2

Change this:

if (selected)
    {
        [self setImage:[UIImage imageNamed:@"image1"] forState:UIControlStateNormal];        
    }
    else
    {
        [self setImage:[UIImage imageNamed:@"image2"] forState:UIControlStateNormal];        
    }

With this:

    if (selected)
        {
// set image for selected state
            [self setBackgroundImage:[UIImage imageNamed:@"image1"] forState:UIControlStateSelected];        
        }
        else
        {
// set image for normal state
            [self setBackgroundImage:[UIImage imageNamed:@"image2"] forState:UIControlStateNormal];        
        }

Or you can simple define both images in one go from your init method

[self setBackgroundImage:[UIImage imageNamed:@"image2"] forState:UIControlStateSelected];
[self setBackgroundImage:[UIImage imageNamed:@"image1"] forState:UIControlStateNormal];