[英]Objective C implementing a UIPickerView with a “Done” button
The easiest way to do it is to model it in Interface Builder. 最简单的方法是在Interface Builder中对其建模。 It is a UIView
containing a UIToolbar
and a UIPickerView
. 它是一个UIView
其中包含UIToolbar
和UIPickerView
。
Then create an outlet for the UIView
and connect it. 然后为UIView
创建一个插座并连接它。
If you then have a UITextField
you can assign your custom view to its inputView
property. 如果您有UITextField
,则可以将自定义视图分配给它的inputView
属性。
[self.textField setInputView:self.customPicker];
Alternatively you can add the picker to your main view... 或者,您可以将选择器添加到主视图中。
- (void)viewDidLoad
{
[super viewDidLoad];
self.customPicker.frame = CGRectMake(0, CGRectGetMaxY(self.view.frame), CGRectGetWidth(self.customPicker.frame), CGRectGetHeight(self.customPicker.frame));
[self.view addSubview:self.customPicker];
}
... and then use this method to show or hide the picker. ...,然后使用此方法显示或隐藏选择器。
- (void)setPickerHidden:(BOOL)hidden
{
CGAffineTransform transform = hidden ? CGAffineTransformIdentity : CGAffineTransformMakeTranslation(0, -CGRectGetHeight(self.customPicker.frame));
[UIView animateWithDuration:0.3 animations:^{
self.customPicker.transform = transform;
}];
}
I added a UIToolbar with a UIBarButtonItem for the 'done' button in my xib with the frame set so that it's not initially visible (y value equal to the height of the parent view). 我在带有框架的xib中添加了带有UIBarButtonItem的UIToolbar和“完成”按钮,以使其最初不可见(y值等于父视图的高度)。
Every time the user access the picker, I changed the frame (the y value) of the UIDatePicker and the UIToolbar with an animation so that it slides up along with the picker from the bottom of the screen similar to the keyboard. 每次用户访问选择器时,我都会使用动画更改UIDatePicker和UIToolbar的框架(y值),以使其与选择器一起从屏幕底部向上滑动,类似于键盘。
Check out my code below. 在下面查看我的代码。
- (IBAction)showPicker
{
if(pickerVisible == NO)
{
// create the picker and add it to the view
if(self.datePicker == nil) self.datePicker = [[[UIDatePicker alloc] initWithFrame:CGRectMake(0, 460, 320, 216)] autorelease];
[self.datePicker setMaximumDate:[NSDate date]];
[self.datePicker setDatePickerMode:UIDatePickerModeDate];
[self.datePicker setHidden:NO];
[self.view addSubview:datePicker];
// the UIToolbar is referenced 'using self.datePickerToolbar'
[UIView beginAnimations:@"showDatepicker" context:nil];
// animate for 0.3 secs.
[UIView setAnimationDuration:0.3];
CGRect datepickerToolbarFrame = self.datePickerToolbar.frame;
datepickerToolbarFrame.origin.y -= (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePickerToolbar.frame = datepickerToolbarFrame;
CGRect datepickerFrame = self.datePicker.frame;
datepickerFrame.origin.y -= (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePicker.frame = datepickerFrame;
[UIView commitAnimations];
pickerVisible = YES;
}
}
- (IBAction)done
{
if(pickerVisible == YES)
{
[UIView beginAnimations:@"hideDatepicker" context:nil];
[UIView setAnimationDuration:0.3];
CGRect datepickerToolbarFrame = self.datePickerToolbar.frame;
datepickerToolbarFrame.origin.y += (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePickerToolbar.frame = datepickerToolbarFrame;
CGRect datepickerFrame = self.datePicker.frame;
datepickerFrame.origin.y += (self.datePicker.frame.size.height + self.datePickerToolbar.frame.size.height);
self.datePicker.frame = datepickerFrame;
[UIView commitAnimations];
// remove the picker after the animation is finished
[self.datePicker performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:0.3];
}
}
I create a custom class, this supports multiple orientation: 我创建了一个自定义类,它支持多种方向:
DateTimePicker.h DateTimePicker.h
@interface DateTimePicker : UIView {
}
@property (nonatomic, assign, readonly) UIDatePicker *picker;
- (void) setMode: (UIDatePickerMode) mode;
- (void) addTargetForDoneButton: (id) target action: (SEL) action;
@end
DateTimePicker.m DateTimePicker.m
#define MyDateTimePickerToolbarHeight 40
@interface DateTimePicker()
@property (nonatomic, assign, readwrite) UIDatePicker *picker;
@property (nonatomic, assign) id doneTarget;
@property (nonatomic, assign) SEL doneSelector;
- (void) donePressed;
@end
@implementation DateTimePicker
@synthesize picker = _picker;
@synthesize doneTarget = _doneTarget;
@synthesize doneSelector = _doneSelector;
- (id) initWithFrame: (CGRect) frame {
if ((self = [super initWithFrame: frame])) {
self.backgroundColor = [UIColor clearColor];
UIDatePicker *picker = [[UIDatePicker alloc] initWithFrame: CGRectMake(0, MyDateTimePickerToolbarHeight, frame.size.width, frame.size.height - MyDateTimePickerToolbarHeight)];
[self addSubview: picker];
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame: CGRectMake(0, 0, frame.size.width, MyDateTimePickerToolbarHeight)];
toolbar.barStyle = UIBarStyleBlackOpaque;
toolbar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle: @"Done" style: UIBarButtonItemStyleBordered target: self action: @selector(donePressed)];
UIBarButtonItem* flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
toolbar.items = [NSArray arrayWithObjects:flexibleSpace, doneButton, nil];
[self addSubview: toolbar];
self.picker = picker;
picker.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin;
self.autoresizesSubviews = YES;
self.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin;
}
return self;
}
- (void) setMode: (UIDatePickerMode) mode {
self.picker.datePickerMode = mode;
}
- (void) donePressed {
if (self.doneTarget) {
[self.doneTarget performSelector:self.doneSelector withObject:nil afterDelay:0];
}
}
- (void) addTargetForDoneButton: (id) target action: (SEL) action {
self.doneTarget = target;
self.doneSelector = action;
}
Using custom view in your view controller: 在视图控制器中使用自定义视图:
- (void)viewDidLoad
{
[super viewDidLoad];
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self
action:@selector(buttonPressed:)
forControlEvents:UIControlEventTouchDown];
[button setTitle:@"Show picker" forState:UIControlStateNormal];
button.frame = CGRectMake(100, 50, 100, 40.0);
[self.view addSubview:button];
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;
picker = [[DateTimePicker alloc] initWithFrame:CGRectMake(0, screenHeight/2 - 35, screenWidth, screenHeight/2 + 35)];
[picker addTargetForDoneButton:self action:@selector(donePressed)];
[self.view addSubview:picker];
picker.hidden = YES;
[picker setMode:UIDatePickerModeDate];
}
-(void)donePressed {
picker.hidden = YES;
}
-(void)buttonPressed:(id)sender {
picker.hidden = NO;
}
Hope this helps. 希望这可以帮助。 :) :)
There is a more elegant solution. 有一个更优雅的解决方案。 I'm not sure if this is recent (as of iOS7), but this has been working for me splendidly. 我不确定这是不是最近的版本(从iOS7开始),但这对我来说一直很出色。
TJDatePicker.h TJDatePicker.h
@protocol TJDatePickerActionDelegate <NSObject>
- (void)cancel:(id)sender;
- (void)done:(id)sender;
@end
@interface TJDatePicker : UIDatePicker
@property (strong, nonatomic) UIView *navInputView;
@property (weak, nonatomic) id<TJDatePickerActionDelegate> actionDelegate;
@end
TJDatePicker.m TJDatePicker.m
#import "TJDatePicker.h"
@interface TJDatePicker ()
@property (strong, nonatomic) TJButton *cancelButton;
@property (strong, nonatomic) TJButton *doneButton;
@end
@implementation TJDatePicker
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
[self updateSubviews];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self updateSubviews];
}
- (void)updateSubviews
{
self.navInputView.frame = CGRectMake(0, 0, self.width, 45);
self.cancelButton.frame = CGRectMake(5, 5, 80, 35);
CGFloat width = 80;
self.doneButton.frame = CGRectMake(CGRectGetMaxX(self.navInputView.frame) - width, self.cancelButton.frame.origin.y, width, self.cancelButton.height);
}
- (UIView *)navInputView
{
if (!_navInputView)
{
_navInputView = [[UIView alloc] init];
_navInputView.backgroundColor = [UIColor whiteColor];
self.cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.cancelButton setTitle:@"CANCEL" forState:UIControlStateNormal];
[self.cancelButton addTarget:self action:@selector(cancelButtonPressed) forControlEvents:UIControlEventTouchUpInside];
[_navInputView addSubview:self.cancelButton];
self.doneButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.doneButton setTitle:@"DONE" forState:UIControlStateNormal];
[self.doneButton addTarget:self action:@selector(doneButtonPressed) forControlEvents:UIControlEventTouchUpInside];
[_navInputView addSubview:self.doneButton];
}
return _navInputView;
}
- (void)cancelButtonPressed
{
[self.actionDelegate cancel:self];
}
- (void)doneButtonPressed
{
[self.actionDelegate done:self];
}
And then at implementation time... 然后在实施时...
self.datePicker = [[TJDatePicker alloc] init];
self.datePicker.actionDelegate = self;
self.textField.inputAccessoryView = self.datePicker.navInputView;
The key here is to use the inputAccessoryView
of the UITextField
that you are planning on setting the UIDatePicker
to. 此处的关键是使用计划将UIDatePicker
设置为的UITextField
的inputAccessoryView
。
You get the "Done" button in the toolbar using the ActionSheetPicker. 您可以使用ActionSheetPicker在工具栏中获得“完成”按钮。 Its is a great alternative to building it yourself. 它是您自己构建它的绝佳选择。
https://github.com/skywinder/ActionSheetPicker-3.0 https://github.com/skywinder/ActionSheetPicker-3.0
Success! 成功! Ok, I would never suggest doing this, but here's where the done button is created in your particular tutorial code: 好的,我从不建议这样做,但是在您的特定教程代码中,这是完成按钮的创建位置:
Looking at the storyboard, we can see that when you click the "Role" box within "AddPersonTVC.h" (class at the top right of the storyboard), it pops up a class called "RollPickerTVCell.h" 查看情节提要,我们可以看到,单击“ AddPersonTVC.h”(情节提要的右上角的类)中的“角色”框,它将弹出一个名为“ RollPickerTVCell.h”的类。
Looking into RollPickerTVCell.h, we notice that the whole class is a subclass of "CoreDataTableViewCell" 查看RollPickerTVCell.h,我们注意到整个类是“ CoreDataTableViewCell”的子类。
@interface RolePickerTVCell : CoreDataTableViewCell <UIPickerViewDataSource, UIPickerViewDelegate>
Looking at the class "CoreDataTableViewCell.m", we finally find our uibarbuttonitem! 查看类“ CoreDataTableViewCell.m”,我们终于找到了uibarbuttonitem!
UIBarButtonItem *doneBtn =[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(done:)];
In case you are working on a Table View Cell and you are not using a UITextField (hence you won't be using the Accessory View), here's what I did: 如果您正在使用“表视图”单元并且不使用UITextField(因此将不会使用“附件视图”),则可以这样做:
I created a table view cell called GWDatePickerCell
that looks like this (no .nib files involved). 我创建了一个名为GWDatePickerCell
的表视图单元格,看起来像这样(不涉及.nib文件)。
GWDatePickerCell.h
: GWDatePickerCell.h
:
#import <UIKit/UIKit.h>
@interface GWDatePickerCell : UITableViewCell
@property (nonatomic, strong) UIDatePicker *datePicker;
@property (nonatomic, strong) UIToolbar *toolbar;
@property (nonatomic, strong) UIBarButtonItem *buttonDone;
@end
GWDatePickerCell.m
: GWDatePickerCell.m
:
#import "GWDatePickerCell.h"
@implementation GWDatePickerCell
- (id) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if(!(self=[super initWithStyle:style reuseIdentifier:reuseIdentifier])) return nil;
_datePicker = [[UIDatePicker alloc] init];
[_datePicker setMinuteInterval:5];
[_datePicker setDatePickerMode:UIDatePickerModeDateAndTime];
[self.contentView addSubview:_datePicker];
_toolbar = [[UIToolbar alloc] init];
_buttonDone = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:nil action:nil];
_toolbar.items = @[[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil], _buttonDone];
[self.contentView addSubview:_toolbar];
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
CGRect r = self.contentView.bounds;
r.origin.y +=44;
r.size.height = 216;
CGRect tb = self.contentView.bounds;
tb.size.height = 44;
_datePicker.frame = r;
_toolbar.frame = tb;
}
@end
Now all I had to do when creating the cells in the Table View: 现在,我在表视图中创建单元格时要做的所有事情:
@selector
for the Done button. 为完成按钮指定@selector
。 heightForRowAtIndexPath
在heightForRowAtIndexPath
设置正确的单元格高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.