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檔案裡，產生以下變數代碼
複製代碼 代碼如下:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
NSArray *pickerArray;
}
- (IBAction)selectButton:(id)sender;
@property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;
@property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;
@property (strong, nonatomic) IBOutlet UITextField *textField;
@end
4、實現資料來源和協議
ViewController.h檔案裡實現
複製代碼 代碼如下:
<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>
{
NSArray *pickerArray;
}
- (IBAction)selectButton:(id)sender;
@property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;
@property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;
@property (strong, nonatomic) IBOutlet UITextField *textField;
@end
ViewController.m檔案
複製代碼 代碼如下:
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 1;
}
-(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
return [pickerArray count];
}
-(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
return [pickerArray objectAtIndex:row];
}
-(void)textFieldDidEndEditing:(UITextField *)textField{
NSInteger row = [selectPicker selectedRowInComponent:0];
self.textField.text = [pickerArray objectAtIndex:row];
}
上面numberOfComponentsInPickerView返回有幾個PickerView ，
textFieldDidEndEditing這個在textField結束編輯時，顯示PickerView選擇中的資料。
Toolbar 的item的完成按鈕
複製代碼 代碼如下:
- (IBAction)selectButton:(id)sender {
[textField endEditing:YES];
}
5、初始化
複製代碼 代碼如下:
- (void)viewDidLoad
{
[super viewDidLoad];
pickerArray = [NSArray arrayWithObjects:@"動物",@"植物",@"石頭",@"天空", nil];
textField.inputView = selectPicker;
textField.inputAccessoryView = doneToolbar;
textField.delegate = self;
selectPicker.delegate = self;
selectPicker.dataSource = self;
selectPicker.frame = CGRectMake(0, 480, 320, 216);
}
代碼解釋：
設定委託
textField.delegate =self;
selectPicker.delegate =self;
selectPicker.dataSource =self;
隱藏UIPickerView
複製代碼 代碼如下:
selectPicker.frame =CGRectMake(0,480,320, 216);
運行：
UIPickerView控制項的關聯選擇
當選擇左邊的一級選項時，左邊展示一級選項裡含有的二級選項，選擇後顯示在TextField裡。
如何?呢？建立一個和左邊的列表key對應的數組，當選擇這個key時，重新整理左邊UIPickerView部分的內容顯示對應數組的資料，選擇時，找到
兩個UIPickerView組件rowIndex，找出資料，放到TextField裡。
1、開啟上篇PickerViewDemo項目，在ViewController.h添加兩個成員變數：NSArray *subPickerArray; NSDictionary *dicPicker;
複製代碼 代碼如下:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>
{
NSArray *pickerArray;
NSArray *subPickerArray;
NSDictionary *dicPicker;
}
- (IBAction)selectButton:(id)sender;
@property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;
@property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;
@property (strong, nonatomic) IBOutlet UITextField *textField;
@end
2、初始化
複製代碼 代碼如下:
- (void)viewDidLoad
{
[super viewDidLoad];
pickerArray = [NSArray arrayWithObjects:@"動物",@"植物",@"石頭", nil];
dicPicker = [NSDictionary dictionaryWithObjectsAndKeys:
[NSArray arrayWithObjects:@"魚",@"鳥",@"蟲子", nil], @"動物",
[NSArray arrayWithObjects:@"花",@"草",@"葵花", nil], @"植物",
[NSArray arrayWithObjects:@"瘋狂的石頭",@"花崗岩",@"鵝卵石", nil], @"石頭",nil];
subPickerArray = [dicPicker objectForKey:@"動物"];
textField.inputView = selectPicker;
textField.inputAccessoryView = doneToolbar;
textField.delegate = self;
selectPicker.delegate = self;
selectPicker.dataSource = self;
selectPicker.frame = CGRectMake(0, 480, 320, 216);
}
給 NSDictionary *dicPicker;賦值，對應的三個關鍵字添加了對應的數組。
3、Component返回兩個，這樣就有兩個齒輪了。
複製代碼 代碼如下:
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 2;
}
4、使用宏
在#import "ViewController.h"下面定義兩個宏，代表UIPickerView齒輪的左邊的部分和右邊的部分。左邊的部分是0，右邊的是1.
複製代碼 代碼如下:
#import "ViewController.h"
#define kFirstComponent 0
#define kSubComponent 1
5、判斷是那個齒輪，返回相應的資料的Count。
複製代碼 代碼如下:
-(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
if(component == kFirstComponent){
return [pickerArray count];
}else {
return [subPickerArray count];
}
}
6、根據component返回相應的String資料
複製代碼 代碼如下:
-(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
if(component == kFirstComponent){
return [pickerArray objectAtIndex:row];
}else {
return [subPickerArray objectAtIndex:row];
}
}
7、拖動左邊的齒輪時，右邊的資料相應的Reload更新。
複製代碼 代碼如下:
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
if (component == kFirstComponent) {
subPickerArray = [dicPicker objectForKey:[pickerArray objectAtIndex:row]];
[pickerView selectRow:0 inComponent:kSubComponent animated:YES];
[pickerView reloadComponent:kSubComponent];
}
}
8、相應選擇的資料，並顯示在TextField上。
複製代碼 代碼如下:
-(void)textFieldDidEndEditing:(UITextField *)textField{
NSInteger firstViewRow = [selectPicker selectedRowInComponent:kFirstComponent];
NSInteger subViewRow = [selectPicker selectedRowInComponent:kSubComponent];
NSString * firstString = [pickerArray objectAtIndex:firstViewRow];
NSString * subString = [[dicPicker objectForKey:[pickerArray objectAtIndex:firstViewRow]] objectAtIndex:subViewRow] ;
NSString *textString = [[NSString alloc ] initWithFormat:@"您選擇了：%@%@%@", firstString, @" 裡的 ", subString];
self.textField.text = textString;
}
- (IBAction)selectButton:(id)sender {
[textField endEditing:YES];
}
大功告成，運行，點擊TextField，彈出：
