What is the best way to make a UIButton checkbox?

Question

I am trying to make a standard check box for my iPhone app from a UIButton with a title and image. The button image changes between an "unchecked" image and a "checked" image.

At first I tried subclassing UIButton but UIButton has no -init*** method to use in my -init method.

What is the best way to do this?

Thanks in advance.

Solution 1

You shouldn't need to subclass the UIButton class. By design, Objective-C favors composition over inheritance.

UIButton is a subclass of UIControl, which has a selected property. You can use this property to toggle the on/off behaviour of a checkbox, just the same way a UISwitch does.

You can attach an action to the button's touched up inside event, and perform the toggling in there, something like this:

// when you setup your button, set an image for the selected and normal states
[myCheckBoxButton setImage:checkedImage forState:UIControlStateSelected];
[myCheckBoxButton setImage:nonCheckedImage forState:UIControlStateNormal];

- (void)myCheckboxToggle:(id)sender
{
    myCheckboxButton.selected = !myCheckboxButton.selected; // toggle the selected property, just a simple BOOL
}

Solution 2

Set the images in the button:

[button setImage:uncheckedImage forState:UIControlStateNormal]
[button setImage:checkedImage forState:UIControlStateSelected]

Now all you need to do is:

button.selected = state

and the correct images will display.

Solution 3

All you need to do is set 2 different images for the states UIControlStateNormal and UIControlStateSelected, then in your selector, changed the selected property of the button.

Here is a working example (replace image names with your own):

- (void)loadView {
    // ...
    UIButton *chkBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [chkBtn setFrame:CGRectMake(0, 0, 300, 25)];

    [chkBtn setImage:[UIImage imageNamed:@"UNCHECKED.png"] 
            forState:UIControlStateNormal];
    [chkBtn setImage:[UIImage imageNamed:@"CHECKED.png"]
            forState:UIControlStateSelected];

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

    // Optional title change for checked/unchecked
    [chkBtn setTitle:@"I am NOT checked!"
            forState:UIControlStateNormal];
    [chkBtn setTitle:@"I am checked!"
            forState:UIControlStateSelected];

    [self.view addSubview:chkBtn];
    [chkBtn release], chkBtn = nil;
    // ...
}

- (void)chkBtnHandler:(UIButton *)sender {
    // If checked, uncheck and visa versa
    [sender setSelected:!sender isSelected];
}

Solution 4

For anyone interested in the future - instead of doing it yourself just download the link below from GitHub and it has it subclassed from UIControl already and functions perfectly as a checkbox. Also includes a sample project on how easy it is to use:

https://github.com/Brayden/UICheckbox

Solution 5

I have used M13Checkbox in one of my projects. Works ok.

https://github.com/Marxon13/M13Checkbox

View more solutions

Comments

[Diziet]

You can also do this rather hackishly with one line. myCheckboxButton.selected = !myCheckboxButton.selected

[Climbatize]

you can avoid the the if-else by setting an image for the button state UIControlStateSelected ;)

[Johan Karlsson]

Not an answer really.

[chouaib]

what is he doesn't want to try it?

[chouaib]

I mean one doesn't always want to try something without explanations

[Albert Renshaw]

@Diziet You can get even more hackish using XOR like so: myCheckboxButton.selected^=1;