IOS 的最佳单选按钮实现

问题描述 投票:0回答:8

我想问是否有关于如何在 iPhone 应用程序上实现单选按钮选项的示例。

我发现选择器视图对于简单的选择功能来说相当大。

我不确定苹果是否故意排除单选按钮,以及从可用性/用户体验的角度来看,简单地使用选择器视图是否更好。

iphone cocoa-touch ios uibutton radio-button
8个回答
42
投票

我对最好的单选按钮实现应该是什么样子有一些想法。它可以基于

UIButton
类并使用其“选定”状态来指示组中的一个。
UIButton
在IB中具有原生定制选项,因此可以方便地设计XIB。 此外,还应该有一种使用 IB 插座连接对按钮进行分组的简单方法:

我在这个RadioButton课程中实现了我的想法。就像魅力一样工作:

下载示例项目


25
投票

尝试UISegmentedControl。它的行为类似于单选按钮——呈现一系列选项并让用户选择 1 个。


20
投票

总结一下,可能有4种方法。

  • 如果空间不够,可以为文本或按钮添加点击事件,然后显示 UIPickerView:

UIPickerView

或者打开一个带有复选标记的新表视图控件:

UITableView

  • 如果有更多空间,请直接将表视图添加到主视图中:

enter image description here

  • 最终的解决方案是使用UISegmentedControl:

enter image description here

希望这有帮助。


8
投票

尝试 DLRadioButton,适用于

Swift
ObjC
。您还可以使用图像来指示选择状态或自定义您自己的样式。

GitHub 上查看。

radio button for iOS

**更新:添加了将选择指示器放在右侧的选项。

**更新:添加了方形按钮,

IBDesignable
,改进了性能。

**更新:添加了多项选择支持。


8
投票

我知道回答这个问题已经很晚了,但希望这可以帮助任何人。

您可以使用

IBOutletCollection
创建类似单选按钮的按钮。在我们的 .h 文件中创建一个 IBOutletCollection 属性。

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

将所有按钮与此 IBOutletCollection 连接,并为所有三个按钮创建一个 IBAction 方法。

- (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];
}

7
投票

对于选项屏幕,尤其是有多个单选组的情况,我喜欢使用分组表格视图。每个组都是一个无线电组,每个小区都是组内的一个选择。使用单元格的附件视图作为复选标记来指示您想要哪个选项是很简单的。

如果 UIPickerView 可以做得小一点,或者它们的渐变更适合将两个平铺到一个页面上......


5
投票

我编写了一个控制器来处理一系列单选按钮背后的逻辑。它是开源的,在 GitHub 上,请查看!

https://github.com/goosoftware/GSRadioButtonSetController


-1
投票

以下在 iOS 应用程序中创建单选按钮的简单方法遵循两个步骤。

Step1-将此代码放入 viewDidLoad 或任何其他所需的方法中

 [_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- 将以下 IBAction 方法放入您的类中

-(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;
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.