(容芳志)UIPickerView

@1.简单使用

UIPickerView控件在给用户选择某些特定的数据时经常使用到，这里演示一个简单的选择数据，显示在UITextField输入框里，把UIPickerView作为输入View，用Toolbar作为选定数据的按钮。和其他UITableView控件相似，UIPickerView也需要数据源。

我们要实现的效果如下：

下面开始使用的步骤。

1、打开XCode 4.3.2，新建一个Single View Application ,命名为PickerViewDemo，Company Identifier 为：com.rongfzh.yc

2、拖放控件

2.1、拖放一个UIPickerView，放置在View的最下方

2.2、拖放一个Toolbar控件，放置在View的外面，让它不属于View的子控件，并把item命名为“完成”，效果如下：

2.3 放置一个Flexible Space Bar Button Item 撑开 

2.4  放一个UITextField,用来显示选择的数据

3、创建映射

在ViewController.xib文件里按 alt + command+ enter键，打开Assistant Editor，按住Control键，选择各个控件，拖拽到 ViewController.h文件里，生成以下变量代码

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController  
4. {  
5.     NSArray *pickerArray;  
6. }  
7. - (IBAction)selectButton:(id)sender;  
8. @property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;  
9.   
10. @property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;  
11. @property (strong, nonatomic) IBOutlet UITextField *textField;  
12. @end  

4、实现数据源和协议

ViewController.h文件里实现

<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>  
4. {  
5.     NSArray *pickerArray;  
6. }  
7. - (IBAction)selectButton:(id)sender;  
8. @property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;  
9.   
10. @property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;  
11. @property (strong, nonatomic) IBOutlet UITextField *textField;  
12. @end  

ViewController.m文件

[cpp]  view plain copy

1. -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{  
2.     return 1;  
3. }  
4. -(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{  
5.     return [pickerArray count];  
6. }  
7. -(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{  
8.     return [pickerArray objectAtIndex:row];  
9. }  
10.   
11. -(void)textFieldDidEndEditing:(UITextField *)textField{  
12.     NSInteger row = [selectPicker selectedRowInComponent:0];  
13.     self.textField.text = [pickerArray objectAtIndex:row];  
14. }  

上面numberOfComponentsInPickerView返回有几个PickerView ，

textFieldDidEndEditing这个在textField结束编辑时，显示PickerView选择中的数据。

Toolbar 的item的完成按钮

[cpp]  view plain copy

1. - (IBAction)selectButton:(id)sender {  
2.     [textField endEditing:YES];  
3. }  

5、初始化

[cpp]  view plain copy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     pickerArray = [NSArray arrayWithObjects:@"动物",@"植物",@"石头",@"天空", nil];  
5.     textField.inputView = selectPicker;  
6.     textField.inputAccessoryView = doneToolbar;  
7.     textField.delegate = self;  
8.     selectPicker.delegate = self;  
9.     selectPicker.dataSource = self;  
10.     selectPicker.frame = CGRectMake(0, 480, 320, 216);  
11.   
12. }  

代码解释：

设置委托

   textField.delegate =self;

    selectPicker.delegate =self;

    selectPicker.dataSource =self;

隐藏UIPickerView

    selectPicker.frame =CGRectMake(0,480,320, 216);

运行：

例子代码：http://download.csdn.net/detail/totogo2010/4391870 

https://github.com/schelling/YcDemo

@2.控件关联选择

接上篇iOS学习之UIPickerView控件的简单使用 

接着上篇的代码 http://download.csdn.net/detail/totogo2010/4391870 ，我们要实现的效果如下：

当选择左边的一级选项时，左边展示一级选项里含有的二级选项，选择后显示在TextField里。

如何实现呢？建立一个和左边的列表key对应的数组，当选择这个key时，刷新左边UIPickerView部分的内容显示对应数组的数据，选择时，找到

两个UIPickerView部件rowIndex，找出数据，放到TextField里。

1、打开上篇PickerViewDemo项目，在ViewController.h添加两个成员变量：NSArray *subPickerArray; NSDictionary *dicPicker;

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>  
4. {  
5.     NSArray *pickerArray;  
6.     NSArray *subPickerArray;  
7.     NSDictionary *dicPicker;  
8. }  
9. - (IBAction)selectButton:(id)sender;  
10. @property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;  
11. @property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;  
12. @property (strong, nonatomic) IBOutlet UITextField *textField;  
13. @end  

2、初始化

[cpp]  view plain copy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     pickerArray = [NSArray arrayWithObjects:@"动物",@"植物",@"石头", nil];  
5.     dicPicker = [NSDictionary dictionaryWithObjectsAndKeys:  
6.                  [NSArray arrayWithObjects:@"鱼",@"鸟",@"虫子",            nil], @"动物",  
7.                  [NSArray arrayWithObjects:@"花",@"草",@"葵花",            nil], @"植物",  
8.                  [NSArray arrayWithObjects:@"疯狂的石头",@"花岗岩",@"鹅卵石", nil], @"石头",nil];  
9.       
10.     subPickerArray = [dicPicker objectForKey:@"动物"];  
11.     textField.inputView = selectPicker;  
12.     textField.inputAccessoryView = doneToolbar;  
13.     textField.delegate = self;  
14.     selectPicker.delegate = self;  
15.     selectPicker.dataSource = self;  
16.     selectPicker.frame = CGRectMake(0, 480, 320, 216);  
17.   
18. }  

给   NSDictionary  *dicPicker;赋值，对应的三个关键字添加了对应的数组。

3、Component返回两个，这样就有两个齿轮了。

[cpp]  view plain copy

1. -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{  
2.     return 2;  
3. }  

4、使用宏

在#import "ViewController.h"下面定义两个宏，代表UIPickerView齿轮的左边的部分和右边的部分。左边的部分是0，右边的是1.

#import "ViewController.h"

#define kFirstComponent 0

#define kSubComponent 1

5、判断是那个齿轮，返回相应的数据的Count。

[cpp]  view plain copy

1. -(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{  
2.     if(component == kFirstComponent){  
3.         return [pickerArray count];  
4.     }else {  
5.         return [subPickerArray count];  
6.     }  
7.   
8. }  

6、根据component返回相应的String数据

[cpp]  view plain copy

1.     -(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{  
2.     if(component == kFirstComponent){  
3.         return [pickerArray objectAtIndex:row];  
4.     }else {  
5.         return [subPickerArray objectAtIndex:row];  
6.     }  
7. }  

7、拖动左边的齿轮时，右边的数据相应的Reload更新。

[cpp]  view plain copy

1. -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{  
2.     if (component == kFirstComponent) {  
3.         subPickerArray = [dicPicker objectForKey:[pickerArray objectAtIndex:row]];   
4.         [pickerView selectRow:0 inComponent:kSubComponent animated:YES];  
5.         [pickerView reloadComponent:kSubComponent];  
6.     }  
7. }  

8、相应选择的数据，并显示在TextField上。

[cpp]  view plain copy

1. -(void)textFieldDidEndEditing:(UITextField *)textField{  
2.     NSInteger firstViewRow = [selectPicker selectedRowInComponent:kFirstComponent];  
3.     NSInteger subViewRow = [selectPicker selectedRowInComponent:kSubComponent];  
4.     NSString * firstString = [pickerArray objectAtIndex:firstViewRow];  
5.     NSString * subString =  [[dicPicker objectForKey:[pickerArray objectAtIndex:firstViewRow]] objectAtIndex:subViewRow] ;  
6.     NSString *textString = [[NSString alloc ] initWithFormat:@"您选择了：%@%@%@", firstString, @" 里的 ", subString];  
7.     self.textField.text = textString;  
8. }  
9.   
10. - (IBAction)selectButton:(id)sender {  
11.     [textField endEditing:YES];  
12. }  

大功告成，运行，点击TextField，弹出：

最终代码：http://download.csdn.net/detail/totogo2010/4393004

@3.UIDatePicker控件使用

iOS上的选择时间日期的控件是这样的，左边是时间和日期混合，右边是单纯的日期模式。

，  

您可以选择自己需要的模式，Time, Date，Date and Time  ， Count Down Timer四种模式。

本篇文章简单介绍下PickerDate控件的使用

1、新建一个Singe View Application，命名为DatePickDemo,其他设置如图

2、放置控件

打开ViewController.xib，拖拽一个DatePicker控件放到界面上，再拖拽一个Button控件放到界面上，双击Button，输入"选择日期时间"

3、建立xib和ViewController的关联

按下command+alt+enter键打开Assistant Editor，选中DatePicker按住Control键，拖拽到viewController.h上，

建立Outlet datePicker。

以同样方式给Button建立一个Action关联映射,命名为selectDate，事件类型为默认的Touch Up Inside。

4、实现代码

单击ViewController.m,找到刚才创建的

- (IBAction)selectDate:(id)sender {

}

在这里添加响应代码

[cpp]  view plain copy

1. - (IBAction)selectDate:(id)sender {  
2.     NSDate *select = [datePicker date];  
3.     NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];  
4.     [dateFormatter setDateFormat:@"yyyy-MM-dd HH:mm"];  
5.     NSString *dateAndTime =  [dateFormatter stringFromDate:select];  
6.     UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"时间提示" message:dateAndTime delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  
7.     [alert show];  
8. }  

运行看效果：

5、修改模式成Date模式，修改代码

[cpp]  view plain copy

1. [dateFormatter setDateFormat:@"yyyy-MM-dd"];  

例子代码：https://github.com/schelling/YcDemo

@4.自定义弹出UIPickerView或UIDatePicker(动画效果)

 前面iOS学习之UIPickerView控件的简单使用 用到的UIPickerView弹出来是通过 textField.inputView = selectPicker;   textField.inputAccessoryView = doneToolbar; 这中方法来做的。如果UIPickerView或UIDatePicker控件通过其他按钮或事件激活的时候怎么能像系统那样弹出来呢？为了实现这个需求，就要用到动画效果了。

1、新建一个Single View App项目,在.xib文件中添加控件如下：

两个button,一个UIDatePicker。

2、创建xib和ViewController的连接

按住Control键创建三个控件对于的映射。

创建后viewController.h代码如下

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController  
4. @property (retain, nonatomic) IBOutlet UIDatePicker *pickerView;  
5. - (IBAction)popView:(id)sender;  
6. - (IBAction)inView:(id)sender;  
7. @property  (nonatomic, retain) NSString *string;  
8. @end  

3、隐藏pickerView

[cpp]  view plain copy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     self.pickerView.frame = CGRectMake(0, 480, 320, 260);  
5. }  

把pickerView 放到屏幕以为下面。

4、弹出和弹回pickerView

在pickerView弹出来或回去的时候，设置动画

[cpp]  view plain copy

1. - (IBAction)popView:(id)sender {  
2.       
3.     CGContextRef context = UIGraphicsGetCurrentContext();  
4.     [UIView beginAnimations:nil context:context];  
5.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
6.     [UIView setAnimationDuration:0.6];//动画时间长度，单位秒，浮点数  
7.     [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];  
8.     self.pickerView.frame = CGRectMake(0, 245, 320, 260);  
9.       
10.     [UIView setAnimationDelegate:self];  
11.     // 动画完毕后调用animationFinished  
12.     [UIView setAnimationDidStopSelector:@selector(animationFinished)];  
13.     [UIView commitAnimations];  
14. }  
15.   
16. - (IBAction)inView:(id)sender {  
17.     CGContextRef context = UIGraphicsGetCurrentContext();  
18.     [UIView beginAnimations:nil context:context];  
19.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
20.     [UIView setAnimationDuration:0.6];//动画时间长度，单位秒，浮点数  
21.     self.pickerView.frame = CGRectMake(0, 480, 320, 260);  
22.       
23.     [UIView setAnimationDelegate:self];  
24.     // 动画完毕后调用animationFinished  
25.     [UIView setAnimationDidStopSelector:@selector(animationFinished)];  
26.     [UIView commitAnimations];  
27. }  
28. -(void)animationFinished{  
29.     NSLog(@"动画结束!");  
30. }  

动画结束后回调动画结束的函数。

运行，弹出

  

第一个图片是弹出来到一半，第二个图片弹出全部。

4、代码块的方法做动画弹出pickerView

单独写个方法

[cpp]  view plain copy

1. - (void)ViewAnimation:(UIView*)view willHidden:(BOOL)hidden {  
2.       
3.     [UIView animateWithDuration:0.3 animations:^{  
4.         if (hidden) {  
5.             view.frame = CGRectMake(0, 480, 320, 260);  
6.         } else {  
7.             [view setHidden:hidden];  
8.             view.frame = CGRectMake(0, 245, 320, 260);  
9.         }  
10.     } completion:^(BOOL finished) {  
11.         [view setHidden:hidden];  
12.     }];  
13. }  

5、在Action中调用

[cpp]  view plain copy

1. - (IBAction)popView:(id)sender {  
2.   
3.     [self ViewAnimation:self.pickerView willHidden:NO];  
4. }  
5.   
6. - (IBAction)inView:(id)sender {  
7.     [self ViewAnimation:self.pickerView willHidden:YES];  
8.   
9. }  

这个方法更简单实用

PS：以上的方法可以用在TableViewCell点击cell时弹回pickerView等需求.

例子源码下载地址： http://download.csdn.net/detail/totogo2010/4472062