CODEWITHSUNDEEP
iphoneiosuibutton
bmende
bmende

Reputation: 741

How do i create a custom button that can change an image like rounded rect

I have two images for a button, one for normal, and one for selected. And i want it to act the same way a rounded rect button acts as when you touch down, the buttons image changes, and if you drag outside, the image changes back to normal. Heres what i tried.

First, I made a custom view controller, and then i added methods in the implementation to it which is what you see down here. And i hooked these methods up to my 2 buttons, my play 'button' and my 'settings' button. 

- (IBAction)playButtonSelected:(UIButton *)sender {  //this is for event touchDown
       [sender setImage:[UIImage imageNamed:@"PlayButtonSelected.png"] forState:UIControlStateNormal];

}


- (IBAction)playButtonNotSelected:(id)sender { //this is for event touchUpOutside
    [sender setImage:[UIImage imageNamed:@"PlayButton.png"] forState:UIControlStateNormal];

}



- (IBAction)settingsButtonSelected:(UIButton *)sender { //this is for event TouchDown
        [sender setImage:[UIImage imageNamed:@"SettingsButtonSelected.png"] forState:UIControlStateNormal];
}

- (IBAction)settingsButtonNotSelected:(id)sender { //this is for event touchUpOutside
      [sender setImage:[UIImage imageNamed:@"SettingsButtons.png"] forState:UIControlStateNormal];
}

Well, I did this, and it worked pretty good, but there are 2 problems.

1st: If I have like 20 buttons I would have to have 40 methods. This isn't really a problem, I just think its something to think about as a potential issue.

2nd: When I drag my button outside, I would like for it to switch to the normal image before the user actually releases his finger. As of right now the image only defaults when the finger is released, and not when the finger is moved at a certain distance so that the touchUpInside command will not run. I want this because its basically the standard. And it would also help the user to understand that he can take back his impulsive behavior of clicking buttons if he so desires.

Cool, any help would be a lot of help!

Upvotes: 0

Views: 193

Answers (2)

Rick
Rick

Reputation: 1818

Since 2nd part was answered, I will answer the 1st part,

Assuming you are creating the buttons programmatically, you can assign a tag number to each button and set the same selector method to all the buttons. You can differentiate which button was pressed by identifying the tag number in the selector method. Similar to this: stackoverflow.com/a/11756445/1479411

If you are using interface builder, you can connect all the buttons to the same IBAction method and placed the tag numbers manually in each button's attributes inspector. Again, you can differentiate by the tag number in the IBAction method.

As an additional note, I will use #define to identify the buttons if they serve completely different functions. This reduces mistakes in coding later.

#define SETTINGS  1
#define PLAY      2
#define FUNCTION1 3
#define FUNCTION2 4
...

Upvotes: 2

Moxy
Moxy

Reputation: 4212

You only need to set the selected and normal images once (when you create the button for instance)

the "state" argument lets you set different images for different states. You only need to write this code once :

[playerButton setImage:[UIImage imageNamed:@"PlayButton.png"] forState:UIControlStateNormal];
[playerButton setImage:[UIImage imageNamed:@"PlayButtonSelected.png"] forState:UIControlStateSelected];

Edit: you can also do this from Interface Builder from the attributes inspector

Normal State Selected State

Upvotes: 4

Related Questions