30

There is a radio button in android and WEB but what is the best alternative in iOS? And please don't say segmented control becuase it's not working in my case.

The case is a list of items 3-6 which have 1-3 words of text each and it is required to pick 1.

Screenshot of web radio buttons that i need to adapt for ios

8
  • This does not seem related to Graphic Design.
    – Jongware
    Commented May 17, 2015 at 10:05
  • 1
    Choosing what inreface elements to use IS part of graphic design. Important one. Commented May 17, 2015 at 10:18
  • 1
    Why does the segmented control not working in your case?
    – Michael Lai
    Commented May 17, 2015 at 13:27
  • 4
    I'm voting to close this question as off-topic because it's a UX question, not a graphic design question.
    – Scott
    Commented May 17, 2015 at 19:41
  • 1
    @Greenonline The user punishing picker is the very reason you roll your own radio button. I'm afraid Apple is going to fall fast under the influence of Mr Ive. Commented May 26, 2015 at 16:35

6 Answers 6

41

Usually this is done using a table view, which is basically a list of items as well, only with a checkmark instead of a radio button. Sometimes such lists are on a new 'page' in the navigation structure. How this fits in your navigational structure depends on the context.

List of items

11

I wrote a highly customizable radio button control for iOS. It supports both obj-c and swift. Hope it helps!

enter image description here

3
  • you did a nice work on this. But setting the otherButtons is a little bit confusing for new developers. Please create a blog or video tutorial on this. Just a suggestion. Commented Aug 24, 2017 at 8:05
  • @abhi1992 thx, I'll add something in the README.
    – David Liu
    Commented Sep 29, 2017 at 3:54
  • Example for how to connect otherButtons: stackoverflow.com/questions/43729079/…
    – CristisS
    Commented Aug 12, 2018 at 12:19
4

UIPickerView

You may want to use a UIPickerView for something like that.

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPickerView_Class/index.html

enter image description here


UITableView

There’s plenty of other alternatives that could be good, it really depends on the app’s structure. You’ll notice that lots of the options in Settings use a master/detail pattern for things that are effectively radio buttons. It’s a good way to go, especially with limited screen space.

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView_Class/index.html

2

If you are developing an iOS app, you should probably use the Picker control.

As detailed in Apple's iOS Human Interface Guidelines: "A picker displays a set of values from which a user picks one."

1
  • 2
    Pickers don't feel intuitive, yet this is the only native "alternative" that acts as RadioButtons. Commented May 20, 2015 at 12:53
1

iOS doesn't have a default radio button. You can either use a third-party plugin to create a custom radio button like this or you can use iOS other default elements:

  • a picker

enter image description here

  • a switch

enter image description here

3
  • 11
    I don't believe a switch is a good fit for this problem; it's not at all conventional for an iOS switch to affect other switches.
    – Kit Grose
    Commented May 25, 2015 at 0:26
  • 1
    Yes, you're probably right. It would work only if it was a multiple choice question.
    – Amelia K
    Commented May 25, 2015 at 0:42
  • A switch implies that you can flip various options at will, without effect to the others, and without limitation. Radio buttons (and the miserable iOS picker) enforces a single selection. Commented May 26, 2015 at 16:37
0

Check out this easy seven step tutorial - iPhone UIButton tutorial: Radio Buttons by Mobisoft. It is what I have used for the past couple of years. There is too much code to replicate here, so beware of link death in the future. The steps are below:

  1. Create a window based application in Xcode and name it “MIRadioButtonGroup”.
  2. Create new “MIRadioButtonGroup.h” and “MIRadioButtonGroup.m” files which extend from UIView. (Classes >> Add >> New File >> Objective C Class. Select UIView in the “subclass of” list.)
  3. Create a new group in the Classes folder and name it “MIRadioButtonGroup”. Drag the “MIRadioButtonGroup .h” and “MIRadioButtonGroup .m” files into the group.Now, add the images “radio-on.png” and “radio-off.png” to the group.
  4. Open the “MIRadioButtonGroup.h” file and make the changes in it, as suggested on the site.
  5. Open the “MIRadioButtonGroup.m” file and put the respective code in it.
  6. Now that we have created the “MIRadioButtonGroup” files, put the following code in the “MIRadioButtonGroupAppDelegate.m” file so that we can test them.
  7. Save, build and run the project. The output will be Output1. Now uncomment the commented lines one by one and observe the output. It will be Output 2, Output 3 and Output 1 respectively.

iOS Radio Buttons

You can download the source code here.

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.