UIPickerView也是一個(gè)選擇器控件,它比UIDatePicker更加通用,它可以生成單列的選擇器,也可生成多列的選擇器,而且開(kāi)發(fā)者完全可以自定義選擇項(xiàng)的外觀,因此用法非常靈活。
UIPickerView直接繼承了UIView,沒(méi)有繼承UIControl,因此,它不能像UIControl那樣綁定事件處理方法,UIPickerView的事件處理由其委托對(duì)象完成。
UIPickerView控件常用的屬性和方法如下。
- numberOfComponents:獲取UIPickerView指定列中包含的列的數(shù)量。該屬性是一個(gè)只讀屬性。
- showsSelectionIndicator:該屬性控制是否顯示UIPickerView中的選中標(biāo)記(以高亮背景作為選中標(biāo)記)。
- numberOfRowsInComponent::獲取UIPickerView包含的行數(shù)量。
- rowSizeForComponent::獲取UIPickerView包含的指定列中列表項(xiàng)的大小。該方法返回一個(gè)CGSize對(duì)象。
- selectRow:inComponent:animated::該方法設(shè)置選中該UIPickerView中指定列的特定列表項(xiàng)。最后一個(gè)參數(shù)控制是否使用動(dòng)畫(huà)。
- selectedRowInComponent::該方法返回該UIPickerView指定列中被選中的列表項(xiàng)。
- viewForRow:forComponent::該方法返回該UIPickerView指定列的列表項(xiàng)所使用的UIView控件。
UIDatePicker控件只是負(fù)責(zé)該控件的通用行為,而該控件包含多少列,各列包含多少個(gè)列表項(xiàng)則由UIPickerViewDataSource對(duì)象負(fù)責(zé)。開(kāi)發(fā)者必須為UIPickerView設(shè)置UIPickerViewDataSource對(duì)象,并實(shí)現(xiàn)如下兩個(gè)方法。
- numberOfComponentsInPickerView::該UIPickerView將通過(guò)該方法來(lái)判斷應(yīng)該包含多少列。
- pickerView:numberOfRowsInComponent::該UIPickerView將通過(guò)該方法判斷指定列應(yīng)該包含多少行列表項(xiàng)。
如果程序需要控制UIPickerView中各列的寬度,以及各列中列表項(xiàng)的大小和外觀,或程序需要為UIPickerView的選中事件提供響應(yīng),都需要為UIPickerView設(shè)置UIPickerViewDelegate委托對(duì)象,并根據(jù)需要實(shí)現(xiàn)該委托對(duì)象中的如下方法。
- pickerView:rowHeightForComponent::該方法返回的CGFloat值將作為該UIPickerView控件中指定列中列表項(xiàng)的高度。
- pickerView:widthForComponent::該方法返回的CGFloat值將作為該UIPickerView控件中指定列的寬度。
- pickerView:titleForRow:forComponent::該方法返回的NSString值將作為該UIPickerView控件中指定列的列表項(xiàng)的文本標(biāo)題。
- pickerView:viewForRow:forComponent:reusingView::該方法返回的UIView控件將直接作為該UIPickerView控件中指定列的指定列表項(xiàng)。可以在這邊自定義列表項(xiàng)
- pickerView:didSelectRow:inComponent::當(dāng)用戶(hù)單擊選中該UIPickerView控件的指定列的指定列表項(xiàng)時(shí)將會(huì)激發(fā)該方法。
UIPickerView 的功能和用法
1.單列選擇器
對(duì)于單列選擇器,只要控制UIPickerView的dataSource對(duì)象的numberOfComponentsInPickerView:方法返回1即可。
下面創(chuàng)建一個(gè)單列選擇器,首先創(chuàng)建一個(gè)Single View Application,使用Interface Builder打開(kāi)應(yīng)用的界面設(shè)計(jì)文件,并將一個(gè)UIPickerView拖入界面設(shè)計(jì)文件中,為在程序中訪(fǎng)問(wèn)該控件,需要將該控件綁定到picker IBOutlet屬性。
接下來(lái)開(kāi)始修改控制器類(lèi),本例打算使用控制器類(lèi)作為UIPickerView的dataSource和delegate,因此,程序需要讓控制器類(lèi)實(shí)現(xiàn)UIPickerViewDataSource、UIPickerViewDelegate兩個(gè)協(xié)議。
修改控制器類(lèi)的實(shí)現(xiàn)代碼,主要就是實(shí)現(xiàn)UIPickerViewDataSource、UIPickerViewDelegate兩個(gè)協(xié)議中的必要方法,其代碼如下。
NSArray* books;
- (void)viewDidLoad
{
[super viewDidLoad];
// 創(chuàng)建并初始化NSArray對(duì)象
books = [NSArray arrayWithObjects:@"瘋狂Android講義",
@"瘋狂iOS講義", @"瘋狂Ajax講義" , @"瘋狂XML講義", nil];
// 為UIPickerView控件設(shè)置dataSource和delegate
self.picker.dataSource = self;
self.picker.delegate = self;
}
// UIPickerViewDataSource中定義的方法,該方法的返回值決定該控件包含多少列 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
{
return 1; // 返回1表明該控件只包含1列
}
// UIPickerViewDataSource中定義的方法,該方法的返回值決定該控件指定列包含多少個(gè)列表項(xiàng) - (NSInteger)pickerView:(UIPickerView *)pickerView
numberOfRowsInComponent:(NSInteger)component
{
// 由于該控件只包含一列,因此無(wú)須理會(huì)列序號(hào)參數(shù)component
// 該方法返回books.count,表明books包含多少個(gè)元素,該控件就包含多少行
return books.count;
}
// UIPickerViewDelegate中定義的方法,該方法返回的NSString將作為UIPickerView
// 中指定列和列表項(xiàng)的標(biāo)題文本 - (NSString *)pickerView:(UIPickerView *)pickerView
titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
// 由于該控件只包含一列,因此無(wú)須理會(huì)列序號(hào)參數(shù)component
// 該方法根據(jù)row參數(shù)返回books中的元素,row參數(shù)代表列表項(xiàng)的編號(hào),
// 因此該方法表示第幾個(gè)列表項(xiàng),就使用books中的第幾個(gè)元素
return [books objectAtIndex:row];
}
// 當(dāng)用戶(hù)選中UIPickerViewDataSource中指定列和列表項(xiàng)時(shí)激發(fā)該方法 - (void)pickerView:(UIPickerView )pickerView didSelectRow:
(NSInteger)row inComponent:(NSInteger)component
{
// 使用一個(gè)UIAlertView來(lái)顯示用戶(hù)選中的列表項(xiàng)
UIAlertView alert = [[UIAlertView alloc]
initWithTitle:@"提示"
message:[NSString stringWithFormat:@"你選中的圖書(shū)是:%@"
, [books objectAtIndex:row]]
delegate:nil
cancelButtonTitle:@"確定"
otherButtonTitles:nil];
[alert show];
}
@end
上面的程序首先初始化了一個(gè)NSArray,接下來(lái)的關(guān)鍵就是實(shí)現(xiàn)了4個(gè)用粗體字表示的方法,其中有兩個(gè)方法來(lái)自UIPickerViewDataSource協(xié)議,分別用于控制該UIPickerView控件包含多少列、各列包含多少個(gè)列表項(xiàng);另兩個(gè)方法則來(lái)自UIPickerViewDelegate,最后一個(gè)粗體字方法負(fù)責(zé)為UIPickerView控件的選中事件提供響應(yīng)——當(dāng)用戶(hù)選中該UIPickerView的某個(gè)列表項(xiàng)時(shí),系統(tǒng)將會(huì)自動(dòng)激發(fā)該方法,該方法的實(shí)現(xiàn)邏輯就是使用UIAlertView顯示用戶(hù)選擇的圖書(shū)。
編譯、運(yùn)行該程序,可以看到如圖10.46所示的效果。
圖10.46 單列UIPickerView
2.多列選擇器
對(duì)單列選擇器而言,只要控制UIPickerView的dataSource對(duì)象的numberOfComponentsInPickerView:方法返回大于1的整數(shù)即可。
本節(jié)創(chuàng)建一個(gè)多列選擇器,首先創(chuàng)建一個(gè)Single View Application,使用Interface Builder打開(kāi)應(yīng)用的界面設(shè)計(jì)文件,并將一個(gè)UIPickerView拖入界面設(shè)計(jì)文件中,為在程序中訪(fǎng)問(wèn)該控件,需要將該控件綁定到picker IBOutlet屬性。
接下來(lái)修改控制器類(lèi),本例打算使用控制器類(lèi)作為UIPickerView的dataSource和delegate,因此程序需要讓控制器類(lèi)實(shí)現(xiàn)UIPickerViewDataSource、UIPickerViewDelegate兩個(gè)協(xié)議。
修改控制器類(lèi)的實(shí)現(xiàn)代碼,主要就是實(shí)現(xiàn)UIPickerViewDataSource、UIPickerViewDelegate兩個(gè)協(xié)議中的必要方法,其代碼如下。
NSArray* books;
NSArray* authors;
- (void)viewDidLoad
{
[super viewDidLoad];
// 創(chuàng)建并初始化兩個(gè)NSArray對(duì)象,分別作為兩列的數(shù)據(jù)
authors = [NSArray arrayWithObjects:@"泰戈?duì)?,
@"馮夢(mèng)龍", @"李剛" , nil];
books = [NSArray arrayWithObjects:@"飛鳥(niǎo)集" , @"吉檀迦利"
, @"醒世恒言",@"喻世明言", @"警世通言", @"瘋狂Android講義",
@"瘋狂iOS講義", @"瘋狂Ajax講義" , @"瘋狂XML講義", nil];
self.picker.dataSource = self;
self.picker.delegate = self;
}
// UIPickerViewDataSource中定義的方法,該方法返回值決定該控件包含多少列 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
{
return 2; // 返回2表明該控件只包含2列
}
// UIPickerViewDataSource中定義的方法,該方法的返回值決定該控件指定列包含多少個(gè)列表項(xiàng) - (NSInteger)pickerView:(UIPickerView *)pickerView
numberOfRowsInComponent:(NSInteger)component
{
// 如果是第一列,返回authors中元素的個(gè)數(shù)
// 即authors包含多少個(gè)元素,第一列就包含多少個(gè)列表項(xiàng)
if (component == 0) {
return authors.count;
}
// 如果是其他列,返回books中元素的個(gè)數(shù)。
// 即books包含多少個(gè)元素,其他列(只有第二列)包含多少個(gè)列表項(xiàng)
return books.count;
}
// UIPickerViewDelegate中定義的方法,該方法返回的NSString將作為
// UIPickerView中指定列和列表項(xiàng)上顯示的標(biāo)題 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:
(NSInteger)row forComponent:(NSInteger)component
{
// 如果是第一列,返回authors中row索引處的元素
// 即第一列的列表項(xiàng)標(biāo)題由authors集合元素決定
if (component == 0) {
return [authors objectAtIndex:row];
}
// 如果是其他列(只有第二列),返回books中row索引處的元素
// 即第二列的列表項(xiàng)標(biāo)題由books集合元素決定
return [books objectAtIndex:row];
}
// 當(dāng)用戶(hù)選中UIPickerViewDataSource中指定列和列表項(xiàng)時(shí)激發(fā)該方法 - (void)pickerView:(UIPickerView )pickerView didSelectRow:
(NSInteger)row inComponent:(NSInteger)component
{
NSArray tmp = component == 0 ? authors: books;
NSString* tip = component == 0 ? @"作者": @"圖書(shū)";
// 使用一個(gè)UIAlertView來(lái)顯示用戶(hù)選中的列表項(xiàng)
UIAlertView* alert = [[UIAlertView alloc]
initWithTitle:@"提示"
message:[NSString stringWithFormat:@"你選中的%@是:%@,"
, tip, [tmp objectAtIndex:row]]
delegate:nil
cancelButtonTitle:@"確定"
otherButtonTitles:nil];
[alert show];
}
// UIPickerViewDelegate中定義的方法,該方法返回的NSString將作為
// UIPickerView中指定列的寬度 - (CGFloat)pickerView:(UIPickerView *)pickerView
widthForComponent:(NSInteger)component
{
// 如果是第一列,寬度為90
if (component == 0) {
return 90;
}
return 210; // 如果是其他列(只有第二列),寬度為210
}
@end
該程序與前一個(gè)程序基本相似,同樣需要實(shí)現(xiàn)上面4個(gè)方法,只是numberOfComponentsInPickerView:方法返回了2,因此,該UIPickerView包含兩列,程序創(chuàng)建了兩個(gè)NSArray,分別為兩列提供數(shù)據(jù)項(xiàng)。除此之外,上面的程序還實(shí)現(xiàn)了一個(gè)pickerView:widthForComponent:方法,該方法的返回值控制UIPickerView中各列的寬度。
編譯、運(yùn)行該程序,可以看到如圖10.48所示的兩列選擇器。
3.相互依賴(lài)的多列選擇器
弟2節(jié)的示例雖然是一個(gè)兩列的UIPickerView控件,但該控件的兩列基本沒(méi)有任何關(guān)系,選擇第一列的作者時(shí),第二列的圖書(shū)不會(huì)動(dòng)態(tài)更新——在某些情況下,這是允許的。但在某些情況下,我們需要第二列的列表項(xiàng)依賴(lài)第一列的選擇,即當(dāng)?shù)谝涣羞x擇作者時(shí),第二列只顯示該作者的圖書(shū)。
為了讓第二列能根據(jù)第一列的選擇動(dòng)態(tài)加載,程序需要用戶(hù)選擇第一列的事件,并根據(jù)該事件動(dòng)態(tài)加載第二列的數(shù)據(jù),然后強(qiáng)制重新加載UIDatePicker的第二列列表項(xiàng)。
下面創(chuàng)建一個(gè)相互依賴(lài)的多列選擇器,首先創(chuàng)建一個(gè)Single View Application,使用Interface Builder打開(kāi)應(yīng)用的界面設(shè)計(jì)文件,并將一個(gè)UIPickerView拖入界面設(shè)計(jì)文件中,為在程序中訪(fǎng)問(wèn)該控件,需要將該控件綁定到picker IBOutlet屬性。
接下來(lái)開(kāi)始修改控制器類(lèi),本例使用控制器類(lèi)作為UIPickerView的dataSource和delegate,因此,程序需要讓控制器類(lèi)實(shí)現(xiàn)UIPickerViewDataSource、UIPickerViewDelegate兩個(gè)協(xié)議。
修改控制器類(lèi)的實(shí)現(xiàn)代碼,主要就是實(shí)現(xiàn)UIPickerViewDataSource、UIPickerViewDelegate兩個(gè)協(xié)議中的必要方法,其代碼如下。
NSDictionary* books;
NSArray* authors;
// selectedAuthor保存當(dāng)前選中的作者
NSString* selectedAuthor;
- (void)viewDidLoad
{
[super viewDidLoad];
// 創(chuàng)建并初始化NSDictionary對(duì)象
books = [NSDictionary dictionaryWithObjectsAndKeys:
[NSArray arrayWithObjects:@"飛鳥(niǎo)集" , @"吉檀迦利", nil]
, @"泰戈?duì)?,
[NSArray arrayWithObjects:@"醒世恒言",@"喻世明言"
, @"警世通言", nil] , @"馮夢(mèng)龍",
[NSArray arrayWithObjects:@"瘋狂Android講義",
@"瘋狂iOS講義", @"瘋狂Ajax講義" , @"瘋狂XML講義", nil]
, @"李剛" ,nil];
// 使用authors保存books所有key組成的NSArray排序后的結(jié)果
authors = [[books allKeys] sortedArrayUsingSelector:
@selector(compare:)];
// 設(shè)置默認(rèn)選中的作者authors中的第一個(gè)元素
selectedAuthor = [authors objectAtIndex:0];
self.picker.dataSource = self;
self.picker.delegate = self;
}
// UIPickerViewDataSource中定義的方法,該方法的返回值決定該控件包含多少列 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
{
return 2; // 返回2表明該控件只包含2列
}
// UIPickerViewDataSource中定義的方法,該方法的返回值決定該控件指定列包含多少個(gè)列表項(xiàng) - (NSInteger)pickerView:(UIPickerView *)pickerView
numberOfRowsInComponent:(NSInteger)component
{
// 如果是第一列,返回authors中元素的個(gè)數(shù)
// 即authors包含多少個(gè)元素,第一列包含多少個(gè)列表項(xiàng)
if (component == 0) {
return authors.count;
}
// 如果是其他列(只有第二列),
// 返回books中selectedAuthor對(duì)應(yīng)的NSArray中元素的個(gè)數(shù)
return [[books objectForKey:selectedAuthor] count];
}
// UIPickerViewDelegate中定義的方法,該方法返回的NSString將作為
// UIPickerView中指定列和列表項(xiàng)上顯示的標(biāo)題 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:
(NSInteger)row forComponent:(NSInteger)component
{
// 如果是第一列,返回authors中row索引處的元素
// 即第一列的元素由authors集合元素決定
if (component == 0) {
return [authors objectAtIndex:row];
}
// 如果是其他列(只有第二列),
// 返回books中selectedAuthor對(duì)應(yīng)的NSArray中row索引處的元素
return [[books objectForKey:selectedAuthor] objectAtIndex:row];
}
// 當(dāng)用戶(hù)選中UIPickerViewDataSource中指定列和列表項(xiàng)時(shí)激發(fā)該方法 - (void)pickerView:(UIPickerView )pickerView didSelectRow:(NSInteger)row
inComponent:(NSInteger)component
{
if(component == 0)
{
// 改變被選中的作者
selectedAuthor = [authors objectAtIndex:row];
// 控制重寫(xiě)加載第二個(gè)列表,根據(jù)選中的作者來(lái)加載第二個(gè)列表
[self.picker reloadComponent:1];
}
NSArray tmp = component == 0 ? authors:
[books objectForKey:selectedAuthor];
NSString* tip = component == 0 ? @"作者": @"圖書(shū)";
// 使用一個(gè)UIAlertView來(lái)顯示用戶(hù)選中的列表項(xiàng)
UIAlertView* alert = [[UIAlertView alloc]
initWithTitle:@"提示"
message:[NSString stringWithFormat:@"你選中的%@是:%@,"
, tip , [tmp objectAtIndex:row]]
delegate:nil
cancelButtonTitle:@"確定"
otherButtonTitles:nil];
[alert show];
}
// UIPickerViewDelegate中定義的方法,該方法返回的NSString將作為
// UIPickerView中指定列的寬度 - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:
(NSInteger)component
{
// 如果是第一列,寬度為90
if (component == 0) {
return 90;
}
return 210; // 如果是其他列(只有第二列),寬度為210
}
@end
上面控制器類(lèi)的實(shí)現(xiàn)部分與前一個(gè)示例中控制器類(lèi)的實(shí)現(xiàn)部分大致相同,關(guān)鍵就是程序中的粗體字代碼。本程序采用了NSDictionary分別保存NSPickerView控件中的兩列數(shù)據(jù),NSDictionary的所有key組成的集合作為第1列的數(shù)據(jù),當(dāng)用戶(hù)選中第一列的某個(gè)作者后,程序取出NSDictionary中該作者對(duì)應(yīng)的圖書(shū)集合作為第二列的數(shù)據(jù)。這就可以讓第二列數(shù)據(jù)隨第一列的選擇動(dòng)態(tài)改變。
編譯、運(yùn)行該程序,在第一列中選中某個(gè)作者,可以看到如圖10.49所示的效果。
4.自定義選擇器視圖
前面示例看到的所有列表項(xiàng)都是文字形式,實(shí)際上,UIPickerView允許開(kāi)發(fā)者對(duì)列表項(xiàng)進(jìn)行任意定制。開(kāi)發(fā)者只要實(shí)現(xiàn)UIPickerViewDelegate協(xié)議中的-pickerView:viewForRow:forComponent: reusingView:方法即可,該方法返回的UIView將作為UIPickerView指定列和列表項(xiàng)的視圖控件。
如下:
// UIPickerViewDelegate中定義的方法,該方法返回的UIView將作為
// UIPickerView中指定列和列表項(xiàng)的UI控件
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:
(NSInteger)row forComponent:(NSInteger)component
reusingView:(UIView *)view
{
// 如果可重用的view的tag不等于kImageTag,表明該view已經(jīng)不存在,需要重新創(chuàng)建
if(view.tag != kImageTag)
{
view = [[UIImageView alloc] initWithImage:[images objectAtIndex:row]];
// 為該UIView設(shè)置tag屬性
view.tag = kImageTag;
// 設(shè)置不允許用戶(hù)交互
view.userInteractionEnabled = NO;
}
return view;
}