Best radio-button implementation for IOS

Question

I would like to ask if there are examples out there on how to implement radio-button options on an iPhone app.

I find the Picker View quite big for a simple selection feature.

I'm not sure if Apple excluded radio buttons on purpose, and whether if it is better to simply use a Picker View from a usability / user experience point-of-view.

Erect

Check out this great tutorial iPhone UIButton tutorial: Radio Buttons. – Petuu

I think it's made big on purpose. Safari on iPhone uses the picker view for selection boxes, for example. I recommend you to follow what's standard (the picker view in this case) on the device you're developing for, not what you got accustomed to (radio buttons in this case) on the other machines you're working with so far. – Disappearance

I've written a controller for handling the logic behind an array of radio buttons. It's open source and on GitHub, check it out! github.com/goosoftware/GSRadioButtonSetController – Restriction

Answer 1

I have some thoughts on how the best radio button implementation should look like. It can be based on UIButton class and use it's 'selected' state to indicate one from the group. The UIButton has native customisation options in IB, so it is convenient to design XIBs. Also there should be an easy way to group buttons using IB outlet connections:

I have implemented my ideas in this RadioButton class. Works like a charm:

Download the sample project.

Cogitate

i have downloaded your app. if I copy pest your buttons it works perfectly for me but if I tried to add extra buttons it wont works for me. I have added groupButton, checked, unchecked images , target class to RadioButton but not able to add more buttons that works correctly even though added in your groupButton gesture ? – Chrysarobin

Answer 2

Try UISegmentedControl. It behaves similarly to radio buttons -- presents an array of choices and lets the user pick 1.

Katzen

Wish Apple's documentation included images. sigh – Exactitude

Good for horizontal presentation, but what about vertical? In my case I want radio buttons where a table cell contains each component radio button. – Balladeer

Answer 3

Just want to sum up, there might be 4 ways.

• If you don't have much space, add a click event for text or button, then show UIPickerView:

or open a new table view control with a check mark:

• If there is more space, add a table view directly to your main view:

• The final solution is using UISegmentedControl:

Hope this helps.

Weidman

Answer 4

I know its very late to answer this but hope this may help anyone.

you can create button like radio button using IBOutletCollection. create one IBOutletCollection property in our .h file.

@property (nonatomic, strong) IBOutletCollection(UIButton) NSArray *ButtonArray;

connect all button with this IBOutletCollection and make one IBAction method for all three button.

- (IBAction)btnTapped:(id)sender {
       for ( int i=0; i < [self.ButtonArray count]; i++) {
           [[self.ButtonArray objectAtIndex:i] setImage:[UIImage                         
            imageNamed:@"radio-off.png"]                 
            forState:UIControlStateNormal];
       }
     [sender setImage:[UIImage imageNamed:@"radio-on.png"]
      forState:UIControlStateNormal];
}

Sow

You can move the line where you are setting an image to the sender outside the for loop. So that it won't get executed each time the loop iterates. – Pappano

Answer 5

Try DLRadioButton, works for both Swift and ObjC. You can also use images to indicate selection status or customize your own style.

Check it out at GitHub.

**Update: added the option for putting selection indicator on the right side.

**Update: added square button, IBDesignable, improved performance.

**Update: added multiple selection support.

Pagan

Ive just included this in a project im building, thanks! Some notes, the control needs code-behind, it doesnt work using just the designer.. – Monadelphous

@DavidLiu I am trying to run the sample included it is not giving any touch response, can you guide – Zinfandel

@Zinfandel not sure exactly what u mean. I just tested the latest sample, it works perfectly. Let me know if you have further questions. – Pagan

@DavidLiu Don't know what happened last night It was totally stuck, today when I tried it was working like charm, but I still have one problem, as it is radio button, then atleast one of them should be preselected, or there should be an option for preselection. – Zinfandel

You can set them programmatically by set 'selected' to YES. – Pagan

Ok So I should have separate IBoutlets for the buttons even if I have created them in story board. Thanks for the time and reply. – Zinfandel

@Zinfandel it all depends on whether you want reference them individually or together. But I recommend have separate iboutles for them. – Pagan

@DavidLiu Used the later way of creating different iBoutlets for each button,and its working great thanks again – Zinfandel

Answer 6

For options screens, especially where there are multiple radio groups, I like to use a grouped table view. Each group is a radio group and each cell a choice within the group. It is trivial to use the accessory view of a cell for a check mark indicating which option you want.

If only UIPickerView could be made just a little smaller or their gradients were a bit better suited to tiling two to a page...

Kerplunk

Any example related this grouped tableview with options? – Puppy

could you link any example of how to use it ? – Pacific

Answer 7

The following simple way to create radio button in your iOS app follow two steps.

Step1- Put this code in your in viewDidLoad or any other desired method

 [_mrRadio setSelected:YES];
        [_mrRadio setTag:1];
        [_msRadio setTag:1];
        [_mrRadio setBackgroundImage:[UIImage imageNamed:@"radiodselect_white.png"] forState:UIControlStateNormal];
        [_mrRadio setBackgroundImage:[UIImage imageNamed:@"radioselect_white.png"] forState:UIControlStateSelected];
        [_mrRadio addTarget:self action:@selector(radioButtonSelected:) forControlEvents:UIControlEventTouchUpInside];

        [_msRadio setBackgroundImage:[UIImage imageNamed:@"radiodselect_white.png"] forState:UIControlStateNormal];
        [_msRadio setBackgroundImage:[UIImage imageNamed:@"radioselect_white.png"] forState:UIControlStateSelected];
        [_msRadio addTarget:self action:@selector(radioButtonSelected:) forControlEvents:UIControlEventTouchUpInside];

Step2- Put following IBAction method in your class

-(void)radioButtonSelected:(id)sender
{
    switch ([sender tag ]) {
        case 1:
            if ([_mrRadio isSelected]==YES) {
              //  [_mrRadio setSelected:NO];
               // [_msRadio setSelected:YES];
               genderType = @"1";
            }
            else
            {
                [_mrRadio setSelected:YES];
                [_msRadio setSelected:NO];
                genderType = @"1";
            }
            break;
        case 2:
            if ([_msRadio isSelected]==YES) {
               // [_msRadio setSelected:NO];
               // [_mrRadio setSelected:YES];
                genderType = @"2";
            }
            else
            {
                [_msRadio setSelected:YES];
                [_mrRadio setSelected:NO];
                 genderType = @"2";
            }
            break;
        default:
            break;
    }
}

Policlinic