21

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

  • This does not seem related to Graphic Design. – Jongware May 17 '15 at 10:05
  • 1
    Choosing what inreface elements to use IS part of graphic design. Important one. – Vasil Enchev May 17 '15 at 10:18
  • Why does the segmented control not working in your case? – Michael Lai May 17 '15 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 May 17 '15 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. – plainclothes May 26 '15 at 16:35
31

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

7

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

enter image description here

  • 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. – abhimuralidharan Aug 24 '17 at 8:05
  • @abhi1992 thx, I'll add something in the README. – David Liu Sep 29 '17 at 3:54
  • Example for how to connect otherButtons: stackoverflow.com/questions/43729079/… – CristisS Aug 12 '18 at 12:19
3

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."

  • 2
    Pickers don't feel intuitive, yet this is the only native "alternative" that acts as RadioButtons. – Edwin Lambregts May 20 '15 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

  • 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 May 25 '15 at 0:26
  • 1
    Yes, you're probably right. It would work only if it was a multiple choice question. – Amelia K May 25 '15 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. – plainclothes May 26 '15 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.

protected by Community Sep 10 '16 at 8:01

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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