how to create a popup uipicker and uitextfield for iOS 7? - ios

Question

I need to add pickers to my textboxes, but can't figure out how to get them to work. I've gone through a number of tutorials that show you how to start from scratch, which is kinda useless if you have an existing app and you're wanting to add functionality, for the most part they're not very helpful.
I'm looking for something very similar to the image below. The one displayed below is obviously a UIDatepicker, but ideally
I'm looking for a custom picker for "place", "term", and "gate".
So for now, skip the UIDatepicker item, and focus on the custom picker item.
One more thing, this is iOS7, and I am using storyboards AND arc!
I ran across this (http://www.youtube.com/watch?v=BtmQp5aP304) which was really helpful, but again it's starting from scratch. What I can't figure out is how to implement this within my existing code. So I'm looking for a walk-through, a tutorial that someone can point me at to get me started.
There is this on stackoverflow ->
how to pop up datePicker when text filed click and disappear when editing done
Which gave me a few ideas, but not exactly what I'm looking for, tried the suggestions and ended up with more errors than anything else.
Thanks.

Answer 1

#interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>
#implementation ViewController
{
UIPopoverController *popoverController;
NSString *currentPick;
….
}
.
.
.
-(void)makePicker{
UIPickerView *picker = [[[UIPickerView alloc]init]autorelease];
picker.frame = CGRectMake(0, 50, 320, 1000);
picker.showsSelectionIndicator = YES;
picker.delegate = self;
UIButton *done = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[done setBackgroundImage:[UIImage imageNamed:#"Save.png"] forState:UIControlStateNormal];
[done setFrame:CGRectMake(260, 10, 50, 30)];
[done addTarget:self action:#selector(doneButton:) forControlEvents:UIControlEventTouchUpInside];
UIButton *cancel = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[cancel setBackgroundImage:[UIImage imageNamed:#"Cancel.png"] forState:UIControlStateNormal];
[cancel setFrame:CGRectMake(10, 10, 50, 30)];
[cancel addTarget:self action:#selector(cancelButton:) forControlEvents:UIControlEventTouchUpInside];
if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
{
UIActionSheet *pickerAction = [[[UIActionSheet alloc]initWithTitle:[cells objectAtIndex:indexPath.section] delegate:self cancelButtonTitle:nil destructiveButtonTitle:Nil otherButtonTitles:nil]autorelease];
[pickerAction addSubview:picker];
[pickerAction addSubview:done];
[pickerAction addSubview:cancel];
[pickerAction showInView:self.view];
pickerAction.frame = CGRectMake(0,[UIScreen mainScreen].bounds.size.height - 330,320, 350);
}else
{
UIViewController* popoverContent = [[UIViewController alloc] init];
UIView* popoverView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 300)];
[popoverView addSubview:picker];
[popoverView addSubview:done];
[popoverView addSubview:cancel];
[popoverContent.view addSubview:popoverView];
popoverController = [[UIPopoverController alloc] initWithContentViewController:popoverContent];
[popoverController presentPopoverFromRect:<your frame> inView:self.view permittedArrowDirections:UIPopoverArrowDirectionUp animated:YES];
popoverContent.contentSizeForViewInPopover = CGSizeMake(320, 260);
[popoverView release];
[popoverContent release];
}
}
.
.
.
// mainArray here is a NSArray of several arrays, these arrays contain the titles for different selections… e.g. #[fontArray,colourArray,nameArray]
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
return [[mainArray objectAtIndex:clickedAt] count];
}
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 1;
}
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
return [[mainArray objectAtIndex:clickedAt] objectAtIndex:row];
}
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
currentPick = [[mainArray objectAtIndex:clickedAt] objectAtIndex:row];
}
- (void)doneButton:(UIButton *)button
{
if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
{
UIActionSheet *as = (UIActionSheet *)[button superview];
[as dismissWithClickedButtonIndex:0 animated:YES];
}
else
[popoverController dismissPopoverAnimated:YES];
// save your selections here using currentPick object
}
- (void)cancelButton:(UIButton *)button
{
if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
{
UIActionSheet *as = (UIActionSheet *)[button superview];
[as dismissWithClickedButtonIndex:0 animated:YES];
}
else
[popoverController dismissPopoverAnimated:YES];
}
Enjoy your Picker ;)

Answer 2

check this, make a full screen UIView , a UIImageView , a UIPickerView and two UIButtons (save and cancel)in .xib then
make their outlets in your .h file:
#property (retain, nonatomic) IBOutlet UIView *bg_view;
#property (retain, nonatomic) IBOutlet UIImageView *bg_customImageView;
#property (retain, nonatomic) IBOutlet UIPickerView *myPicker;
- (IBAction)cancelOut:(UIButton *)sender;
- (IBAction)saveOut:(UIButton *)sender;
#property (retain, nonatomic) IBOutlet UIButton *saveButton;
#property (retain, nonatomic) IBOutlet UIButton *cancelButton;
then in .m file:
-(void)customPickerShow
{
[self.bg_view setBackgroundColor:[UIColor colorWithRed:0.3 green:0.25 blue:0.05 alpha:0.5]];
[self.bg_view setHidden:NO];
self.navigationController.toolbarHidden = YES;
self.navigationController.navigationBarHidden = YES;
[self showMyPicker];
}
-(void)showMyPicker
{
[self.myPicker reloadAllComponents];
[self animatePicker];
}
-(void)animatePicker
{
self.cancelButton.frame = CGRectMake((framewidth/2) - 130, frameheight, 70, 1);
self.saveButton.frame = CGRectMake((framewidth/2) + 60, frameheight, 70, 1);
self.bg_customImageView.frame = CGRectMake((framewidth/2) - 140, frameheight, 280, 1);
[UIView beginAnimations:Nil context:Nil];
[UIView setAnimationDuration:0.3];
[UIView setAnimationDelegate:self];
self.bg_customImageView.frame = CGRectMake((framewidth/2) - 150, frameheight - 230, 300, 300);
self.cancelButton.frame = CGRectMake((framewidth/2) - 130, frameheight - 220, 50, 50);
self.saveButton.frame = CGRectMake((framewidth/2) + 80, frameheight - 220, 50, 50);
[UIView commitAnimations];
}
- (IBAction)cancelOut:(UIButton *)sender {
self.navigationController.navigationBarHidden = NO;
self.navigationController.toolbarHidden = NO;
[self.bg_view setHidden:YES];
}
- (IBAction)saveOut:(UIButton *)sender {
// save here your selections
self.navigationController.navigationBarHidden = NO;
self.navigationController.toolbarHidden = NO;
[self.bg_view setHidden:YES];
}
call this [self customPickerShow]; function to make it work..
This will look like action sheet with picker and buttons.. you can customize with your choice of background image and your choice of frame in animatePicker function
Don't forget to make this bg_view at top of other views and make it sethidden by default

Answer 3

Purely using UIStoryboard probably won't be able to either solve the project, or not the best way. This is my solution.
1) Create a CustomPicker
2) Define your Datasource and Delegate
3) Attached the CustomPicker to the inputView of the target TextField.
4) you can set it up at the delegate method
-(Bool)textFieldShouldBeginEditing:(UITextField *)textField
In this approach, we add the Picker by coding it (not by UIStoryboard).
I have this demo project to show this purpose.