在操作表中添加 UIPickerView 和按钮 - 如何？

Question

我的应用程序需要在操作表中添加以下内容。

• UI工具栏
• UIToolbar 上的按钮
• UIPicker 控件

我添加了一张图片来了解我的要求。

您能否解释一下，这是如何实现的？

Answer 1

另一种解决方案：

• 没有工具栏，但有一个分段控件（eyecandy）

  UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil 
                                                      delegate:nil
                                                      cancelButtonTitle:nil
                                                      destructiveButtonTitle:nil
                                                      otherButtonTitles:nil];
  
  [actionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];
  
  CGRect pickerFrame = CGRectMake(0, 40, 0, 0);
  
  UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:pickerFrame];
  pickerView.showsSelectionIndicator = YES;
  pickerView.dataSource = self;
  pickerView.delegate = self;
  
  [actionSheet addSubview:pickerView];
  [pickerView release];
  
  UISegmentedControl *closeButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:@"Close"]];
  closeButton.momentary = YES; 
  closeButton.frame = CGRectMake(260, 7.0f, 50.0f, 30.0f);
  closeButton.segmentedControlStyle = UISegmentedControlStyleBar;
  closeButton.tintColor = [UIColor blackColor];
  [closeButton addTarget:self action:@selector(dismissActionSheet:) forControlEvents:UIControlEventValueChanged];
  [actionSheet addSubview:closeButton];
  [closeButton release];
  
  [actionSheet showInView:[[UIApplication sharedApplication] keyWindow]];
  
  [actionSheet setBounds:CGRectMake(0, 0, 320, 485)];
  

Answer 2

尽管这个问题很老，但我很快就会提到我已经将ActionSheetPicker class 与便利功能放在一起，因此您可以在一行中生成带有 UIPickerView 的 ActionSheet。它基于此问题的答案中的代码。

编辑：它现在还支持使用 DatePicker 和 DistancePicker。

---

更新：

此版本已弃用：改用ActionSheetPicker-3.0。

Answer 3

是的！终于找到了。

在您的按钮单击事件上实现以下代码，以弹出问题图像中给出的操作表。

UIActionSheet *aac = [[UIActionSheet alloc] initWithTitle:@"How many?"
                                             delegate:self
                                    cancelButtonTitle:nil
                               destructiveButtonTitle:nil
                                    otherButtonTitles:nil];

UIDatePicker *theDatePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0.0, 44.0, 0.0, 0.0)];
if(IsDateSelected==YES)
{
    theDatePicker.datePickerMode = UIDatePickerModeDate;
    theDatePicker.maximumDate=[NSDate date];
}else {
    theDatePicker.datePickerMode = UIDatePickerModeTime;
}

self.dtpicker = theDatePicker;
[theDatePicker release];
[dtpicker addTarget:self action:@selector(dateChanged) forControlEvents:UIControlEventValueChanged];

pickerDateToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
pickerDateToolbar.barStyle = UIBarStyleBlackOpaque;
[pickerDateToolbar sizeToFit];

NSMutableArray *barItems = [[NSMutableArray alloc] init];

UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
[barItems addObject:flexSpace];

UIBarButtonItem *doneBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(DatePickerDoneClick)];
[barItems addObject:doneBtn];

[pickerDateToolbar setItems:barItems animated:YES];

[aac addSubview:pickerDateToolbar];
[aac addSubview:dtpicker];
[aac showInView:self.view];
[aac setBounds:CGRectMake(0,0,320, 464)];

Answer 4

iOS 7 更新

Apple docs for UIActionSheet:UIActionSheet is not designed to be subclassed, nor should you add views to its hierarchy

我建议不要尝试自定义 ActionSheet 的内容，因为这可能会导致 iOS 7 中出现严重的无效上下文错误。我只花了几个小时解决这个问题，最终决定采用不同的方法。我用包含简单表格视图的模态视图控制器替换了显示操作表的调用。

有很多方法可以做到这一点。这是我刚刚在当前项目中实施的一种方法。这很好，因为我可以在 5 或 6 个不同的屏幕之间重复使用它，所有用户都可以在其中从选项列表中进行选择。

1. 创建一个新的 UITableViewController 子类，SimpleTableViewController。
2. 在情节提要中创建一个 UITableViewController（嵌入在导航控制器中）并将其自定义类设置为 SimpleTableViewController。
3. 为 SimpleTableViewController 的导航控制器提供一个 Storyboard ID“SimpleTableVC”。
4. 在 SimpleTableViewController.h 中，创建一个 NSArray 属性来表示表中的数据。
5. 同样在 SimpleTableViewController.h 中，使用必需的方法 itemSelectedatRow: 和称为 id<SimpleTableViewControllerDelegate> 类型的委托的弱属性创建协议 SimpleTableViewControllerDelegate。这就是我们将选择传递回父控制器的方式。
6. 在SimpleTableViewController.m中，实现tableview数据源和委托方法，在tableView:didSelectRowAtIndexPath:中调用itemSelectedatRow:。

这种方法还有一个额外的好处是可重复使用。要使用，请在 ViewController.h 中导入 SimpleTableViewController 类，符合 SimpleTableViewDelegate，并实现 itemSelectedAtRow: 方法。然后，要打开模态框，只需实例化一个新的 SimpleTableViewController，设置表数据和委托，并呈现它。

UINavigationController *navigationController = (UINavigationController *)[self.storyboard instantiateViewControllerWithIdentifier:@"SimpleTableVC"];
SimpleTableViewController *tableViewController = (SimpleTableViewController *)[[navigationController viewControllers] objectAtIndex:0];
tableViewController.tableData = self.statesArray;
tableViewController.navigationItem.title = @"States";
tableViewController.delegate = self;
[self presentViewController:navigationController animated:YES completion:nil];

我创建了一个简单的例子和​​posted it on github。

另见Showing actionsheet causes CGContext invalid context errors。

Answer 5

Marcio 对这个问题的出色解决方案对我向 UIActionSheet 添加任何类型的子视图有很大帮助。

由于我（还）不完全清楚的原因，UIActionSheet 的边界只能在显示后设置； sagar 和 marcio 的解决方案都成功地解决了这个问题，将 setBounds:CGRectMake(...) 消息发送到操作表在显示之后。

但是，在工作表显示后设置 UIActionSheet 边界会在 ActionSheet 出现时创建一个跳跃的过渡，它“弹出”到视图中，然后只滚动到最后 40 像素左右。

在添加子视图后调整 UIPickerView 的大小时，我建议将发送到 actionSheet 的 setBounds 消息包装在动画块中。这会让actionSheet的入口显得更流畅。

UIActionSheet *actionSheet = [[[UIActionSheet alloc] initWithTitle:nil delegate:nil cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:nil];


// add one or more subviews to the UIActionSheet
// this could be a UIPickerView, or UISegmentedControl buttons, or any other 
// UIView.  Here, let's just assume it's already set up and is called 
// (UIView *)mySubView
[actionSheet addSubview:myView];

// show the actionSheet
[actionSheet showInView:[UIApplication mainWindow]];


// Size the actionSheet with smooth animation
    [UIView beginAnimations:nil context:nil];
    [actionSheet setBounds:CGRectMake(0, 0, 320, 485)];
    [UIView commitAnimations]; 

Answer 6

对于那些想找到 DatePickerDoneClick 函数的人...这里是关闭操作表的简单代码。显然 aac 应该是一个 ivar（在你的实施 .h 文件中）

- (void)DatePickerDoneClick:(id)sender{
    [aac dismissWithClickedButtonIndex:0 animated:YES];
}

Answer 7

我真的不明白为什么UIPickerView 会进入UIActionSheet。这似乎是一个杂乱无章的解决方案，可能会在未来的 iOS 版本中被打破。 （我以前在一个应用程序中遇到过类似的问题，UIPickerView 没有在第一次点击时出现，必须重新点击 - UIActionSheet 的奇怪怪癖）。

我所做的只是实现一个UIPickerView，然后将其作为子视图添加到我的视图中，并使其向上移动，就好像它像操作表一样呈现。

/// Add the PickerView as a private variable
@interface EMYourClassName ()

@property (nonatomic, strong) UIPickerView *picker;
@property (nonatomic, strong) UIButton *backgroundTapButton;

@end

///
/// This is your action which will present the picker view
///
- (IBAction)showPickerView:(id)sender {

    // Uses the default UIPickerView frame.
    self.picker = [[UIPickerView alloc] initWithFrame:CGRectZero];

    // Place the Pickerview off the bottom of the screen, in the middle set the datasource delegate and indicator
    _picker.center = CGPointMake([[UIScreen mainScreen] bounds].size.width / 2.0, [[UIScreen mainScreen] bounds].size.height + _picker.frame.size.height);
    _picker.dataSource = self;
    _picker.delegate = self;
    _picker.showsSelectionIndicator = YES;

    // Create the toolbar and place it at -44, so it rests "above" the pickerview.
    // Borrowed from @Spark, thanks!
    UIToolbar *pickerDateToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, -44, 320, 44)];
    pickerDateToolbar.barStyle = UIBarStyleBlackTranslucent;
    [pickerDateToolbar sizeToFit];

    NSMutableArray *barItems = [[NSMutableArray alloc] init];

    UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    [barItems addObject:flexSpace];

    // The action can whatever you want, but it should dimiss the picker.
    UIBarButtonItem *doneBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(backgroundTapped:)];
    [barItems addObject:doneBtn];

    [pickerDateToolbar setItems:barItems animated:YES];
    [_picker addSubview:pickerDateToolbar];

    // If you have a UITabBarController, you should add the picker as a subview of it
    // so it appears to go over the tabbar, not under it. Otherwise you can add it to 
    // self.view
    [self.tabBarController.view addSubview:_picker];

    // Animate it moving up
    [UIView animateWithDuration:.3 animations:^{
        [_picker setCenter:CGPointMake(160, [[UIScreen mainScreen] bounds].size.height - 148)]; //148 seems to put it in place just right.
    } completion:^(BOOL finished) {
        // When done, place an invisible button on the view behind the picker, so if the
        // user "taps to dismiss" the picker, it will go away. Good user experience!
        self.backgroundTapButton = [UIButton buttonWithType:UIButtonTypeCustom];
        _backgroundTapButton.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
        [_backgroundTapButton addTarget:self action:@selector(backgroundTapped:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:_backgroundTapButton];
    }];

}

// And lastly, the method to hide the picker.  You should handle the picker changing
// in a method with UIControlEventValueChanged on the pickerview.
- (void)backgroundTapped:(id)sender {

    [UIView animateWithDuration:.3 animations:^{
        _picker.center = CGPointMake(160, [[UIScreen mainScreen] bounds].size.height + _picker.frame.size.height);
    } completion:^(BOOL finished) {
        [_picker removeFromSuperview];
        self.picker = nil;
        [self.backgroundTapButton removeFromSuperview];
        self.backgroundTapButton = nil;
    }];
}

Answer 8

要添加到 marcio 的出色解决方案，dismissActionSheet: 可以按如下方式实现。

1. 将一个 ActionSheet 对象添加到您的 .h 文件中，合成它并在您的 .m 文件中引用它。

2. 将此方法添加到您的代码中。

   - (void)dismissActionSheet:(id)sender{
     [_actionSheet dismissWithClickedButtonIndex:0 animated:YES];
     [_myButton setTitle:@"new title"]; //set to selected text if wanted
   }
   

Answer 9

我认为这是最好的方法。

ActionSheetPicker-3.0

几乎每个人都建议它，但使用块，这是一个很好的接触！

Answer 10

从 iOS 8 开始，您不能这样做，因为 Apple 更改了 UIActionSheet 的内部实现，所以它不起作用。请参考Apple Documentation：

子类化注释

UIActionSheet 并非设计为子类化，也不 您是否应该将视图添加到其层次结构中。如果您需要呈现比 UIActionSheet API 提供的自定义更多的表单，您可以创建自己的表单并使用 presentViewController:animated:completion: 以模态方式呈现它。

Answer 11

我喜欢 Wayfarer 和 flexaddicted 采用的方法，但发现（如 aZtral）它不起作用，因为 backgroundTapButton 是唯一响应用户交互的元素。这导致我将他的所有三个子视图：_picker、_pickerToolbar 和 backgroundTapButton 放在一个包含视图（弹出窗口）中，然后在屏幕上和屏幕外进行动画处理。我还需要 _pickerToolbar 上的取消按钮。以下是弹出视图的相关代码元素（您需要提供自己的选取器数据源和委托方法）。

#define DURATION            0.4
#define PICKERHEIGHT        162.0
#define TOOLBARHEIGHT       44.0

@interface ViewController ()
@property (nonatomic, strong) UIView        *popup;
@property (nonatomic, strong) UIPickerView  *picker;
@property (nonatomic, strong) UIToolbar     *pickerToolbar;
@property (nonatomic, strong) UIButton      *backgroundTapButton;
@end

-(void)viewDidLoad {
    // These are ivars for convenience
    rect = self.view.bounds;
    topNavHeight = self.navigationController.navigationBar.frame.size.height;
    bottomNavHeight = self.navigationController.toolbar.frame.size.height;
    navHeights = topNavHeight + bottomNavHeight;
}

-(void)showPickerView:(id)sender {
    [self createPicker];
    [self createToolbar];

    // create view container
    _popup = [[UIView alloc] initWithFrame:CGRectMake(0.0, topNavHeight, rect.size.width, rect.size.height - navHeights)];
    // Initially put the centre off the bottom of the screen
    _popup.center = CGPointMake(rect.size.width / 2.0, rect.size.height + _popup.frame.size.height / 2.0);
    [_popup addSubview:_picker];
    [_popup insertSubview:_pickerToolbar aboveSubview:_picker];

    // Animate it moving up
    // This seems to work though I am not sure why I need to take off the topNavHeight
    CGFloat vertCentre = (_popup.frame.size.height - topNavHeight) / 2.0;

    [UIView animateWithDuration:DURATION animations:^{
        // move it to a new point in the middle of the screen
        [_popup setCenter:CGPointMake(rect.size.width / 2.0, vertCentre)];
    } completion:^(BOOL finished) {
        // When done, place an invisible 'button' on the view behind the picker,
        // so if the user "taps to dismiss" the picker, it will go away
        self.backgroundTapButton = [UIButton buttonWithType:UIButtonTypeCustom];
        _backgroundTapButton.frame = CGRectMake(0, 0, _popup.frame.size.width, _popup.frame.size.height);
        [_backgroundTapButton addTarget:self action:@selector(doneAction:) forControlEvents:UIControlEventTouchUpInside];
        [_popup insertSubview:_backgroundTapButton belowSubview:_picker];
        [self.view addSubview:_popup];
    }];
}

-(void)createPicker {
    // To use the default UIPickerView frame of 216px set frame to CGRectZero, but we want the 162px height one
    CGFloat     pickerStartY = rect.size.height - navHeights - PICKERHEIGHT;
    self.picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, pickerStartY, rect.size.width, PICKERHEIGHT)];
    _picker.dataSource = self;
    _picker.delegate = self;
    _picker.showsSelectionIndicator = YES;
    // Otherwise you can see the view underneath the picker
    _picker.backgroundColor = [UIColor whiteColor];
    _picker.alpha = 1.0f;
}

-(void)createToolbar {
    CGFloat     toolbarStartY = rect.size.height - navHeights - PICKERHEIGHT - TOOLBARHEIGHT;
    _pickerToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, toolbarStartY, rect.size.width, TOOLBARHEIGHT)];
    [_pickerToolbar sizeToFit];

    NSMutableArray *barItems = [[NSMutableArray alloc] init];
    UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(cancelAction:)];
    [barItems addObject:cancelButton];

    // Flexible space to make the done button go on the right
    UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    [barItems addObject:flexSpace];

    // The done button
    UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneAction:)];
    [barItems addObject:doneButton];
    [_pickerToolbar setItems:barItems animated:YES];
}

// The method to process the picker, if we have hit done button
- (void)doneAction:(id)sender {
    [UIView animateWithDuration:DURATION animations:^{
        _popup.center = CGPointMake(rect.size.width / 2.0, rect.size.height + _popup.frame.size.height / 2.0);
    } completion:^(BOOL finished) { [self destroyPopup]; }];
    // Do something to process the returned value from your picker
}

// The method to process the picker, if we have hit cancel button
- (void)cancelAction:(id)sender {
    [UIView animateWithDuration:DURATION animations:^{
        _popup.center = CGPointMake(rect.size.width / 2.0, rect.size.height + _popup.frame.size.height / 2.0);
    } completion:^(BOOL finished) { [self destroyPopup]; }];
}

-(void)destroyPopup {
    [_picker removeFromSuperview];
    self.picker = nil;
    [_pickerToolbar removeFromSuperview];
    self.pickerToolbar = nil;
    [self.backgroundTapButton removeFromSuperview];
    self.backgroundTapButton = nil;
    [_popup removeFromSuperview];
    self.popup = nil;
}