詳解iOS開發(fā)中UIPickerView控件的使用方法
UIPickerView控件在給用戶選擇某些特定的數(shù)據(jù)時經(jīng)常使用到，這里演示一個簡單的選擇數(shù)據(jù)，顯示在UITextField輸入框里，把UIPickerView作為輸入View，用Toolbar作為選定數(shù)據(jù)的按鈕。和其他UITableView控件相似，UIPickerView也需要數(shù)據(jù)源。
我們要實現(xiàn)的效果如下：
下面開始使用的步驟。
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,用來顯示選擇的數(shù)據(jù)
3、創(chuàng)建映射
在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、實現(xiàn)數(shù)據(jù)源和協(xié)議
ViewController.h文件里實現(xiàn)
<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結(jié)束編輯時，顯示PickerView選擇中的數(shù)據(jù)。
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);
}
代碼解釋：
設(shè)置委托
textField.delegate =self;
selectPicker.delegate =self;
selectPicker.dataSource =self;
隱藏UIPickerView
selectPicker.frame =CGRectMake(0,480,320, 216);
運行：
UIPickerView控件的關(guān)聯(lián)選擇
當(dāng)選擇左邊的一級選項時，左邊展示一級選項里含有的二級選項，選擇后顯示在TextField里。
如何實現(xiàn)呢？建立一個和左邊的列表key對應(yīng)的數(shù)組，當(dāng)選擇這個key時，刷新左邊UIPickerView部分的內(nèi)容顯示對應(yīng)數(shù)組的數(shù)據(jù)，選擇時，找到
兩個UIPickerView部件rowIndex，找出數(shù)據(jù)，放到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;賦值，對應(yīng)的三個關(guān)鍵字添加了對應(yīng)的數(shù)組。
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、判斷是那個齒輪，返回相應(yīng)的數(shù)據(jù)的Count。
-(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
if(component == kFirstComponent){
return [pickerArray count];
}else {
return [subPickerArray count];
}
}
6、根據(jù)component返回相應(yīng)的String數(shù)據(jù)
-(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
if(component == kFirstComponent){
return [pickerArray objectAtIndex:row];
}else {
return [subPickerArray objectAtIndex:row];
}
}
7、拖動左邊的齒輪時，右邊的數(shù)據(jù)相應(yīng)的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、相應(yīng)選擇的數(shù)據(jù)，并顯示在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，彈出：
- iOS開發(fā)中UIDatePicker控件的使用方法簡介
- 學(xué)習(xí)iOS開關(guān)按鈕UISwitch控件
- iOS App開發(fā)中的UIPageControl分頁控件使用小結(jié)
- iOS應(yīng)用開發(fā)中的文字選中操作控件UITextView用法講解
- iOS開發(fā)中UIImageView控件的常用操作整理
- 詳解iOS App開發(fā)中改變UIButton內(nèi)部控件的基本方法
- 詳解iOS開發(fā)中UItableview控件的數(shù)據(jù)刷新功能的實現(xiàn)
- iOS應(yīng)用開發(fā)中視圖控件UIWindow的基本使用教程
- iOS App中UIPickerView選擇欄控件的使用實例解析
- iOS中各種UI控件屬性設(shè)置示例代碼
相關(guān)文章
IOS 網(wǎng)絡(luò)請求中設(shè)置cookie
這篇文章主要介紹了IOS 網(wǎng)絡(luò)請求中設(shè)置cookie的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了iOS CoreData 增刪改查的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
iOS Objective-c實現(xiàn)左右滑動切換頁面
這篇文章主要為大家詳細(xì)介紹了iOS Objective-c實現(xiàn)左右滑動切換頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
iOS系統(tǒng)和微信中不支持audio自動播放問題的解決方法
最近在微信端開發(fā)H5的時候，audio標(biāo)簽在蘋果機(jī)上無法進(jìn)行自動播放，查找相關(guān)資料終于解決了，所以下面這篇文章主要給大家介紹了關(guān)于iOS系統(tǒng)和微信中不支持audio自動播放問題的解決方法，需要的朋友可以參考下。2017-09-09
這篇文章主要給大家介紹了關(guān)于iOS Runtime的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
本文重點給大家介紹ios10 推送的所有通知類，所以說這篇教程是ios10推送必看篇，感興趣的朋友快來一起學(xué)習(xí)吧2016-09-09
這篇文章主要介紹了iOS下實現(xiàn)基本繪畫板功能的簡單方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了IOS 創(chuàng)建并發(fā)線程的實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了iOS設(shè)計模式——Category簡單介紹，有興趣學(xué)習(xí)的同學(xué)可以了解一下。2016-11-11
這篇文章主要介紹了IOS視圖控制器的生命周期實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04