iOS App中UIPickerView選擇欄控件的使用實(shí)例解析
UIPickerView控件是比UIDatePicker控件更普通的Picker控件,UIDatePicker控件可以理解成是從UIPickerView控件加工出來(lái)的專門進(jìn)行日期選擇的控件。
UIPickerView控件的用法比UIDatePicker復(fù)雜一點(diǎn)。本文中的小例子將用UIPickerView控件做出兩種效果,第一個(gè)只有一個(gè)轉(zhuǎn)盤,第二個(gè)有兩個(gè)轉(zhuǎn)盤,但這兩個(gè)轉(zhuǎn)盤之間沒有依賴關(guān)系,也就是說(shuō)改變其中一個(gè)轉(zhuǎn)盤中的選擇,不會(huì)對(duì)第二個(gè)轉(zhuǎn)盤產(chǎn)生影響。在下一篇文章會(huì)做一個(gè)轉(zhuǎn)盤之間有依賴關(guān)系的例子。
下圖是我們的效果圖:
第一個(gè)UIPickerView控件可以用來(lái)選擇Horse,Sheep,Pig,Dog,Cat,Chicken,Duck,Goose;第二個(gè)UIPickerView在第一個(gè)基礎(chǔ)上增加了一個(gè)轉(zhuǎn)盤。
閑話少說(shuō),接下來(lái)就開始。
1、運(yùn)行Xcode,新建一個(gè)Single View Application,名稱為UIPickerView Test1,其他設(shè)置如下圖:
2、單擊ViewController.xib,然后拖一個(gè)Picker View控件到視圖上:
然后再拖一個(gè)Button到Picker View下方,并修改名稱為Select:
3、在ViewController.h中為Picker View控件創(chuàng)建Outlet映射,名稱為myPickerView,然后為Select按鈕創(chuàng)建Action映射,名稱為buttonPressed,具體方法不說(shuō)了,可以參照上一篇文章。
4、選中Picker View控件,打開Connections Inspector,找到delegate和datasource,從它們右邊的圓圈拉線到File's Owner:
5、單擊ViewController.h,在其中添加代碼:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource>
@property (weak, nonatomic) IBOutlet UIPickerView *myPickerView;
@property (strong, nonatomic) NSArray *myPickerData;
- (IBAction)buttonPressed:(id)sender;
@end
注意在@interface后面添加尖括號(hào)及其中內(nèi)容,我們將ViewController作為Picker View的Delegate以及DataSource。
6、代碼添加:
6.1 單擊ViewController.m,在@implementation的下一行添加代碼:
@synthesize myPickerData;
6.2 找到buttonPressed方法,添加代碼如下:
- (IBAction)buttonPressed:(id)sender {
NSInteger row = [myPickerView selectedRowInComponent:0];
NSString *selected = [myPickerData objectAtIndex:row];
NSString *msg = [[NSString alloc] initWithFormat:
@"You selected %@!", selected];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello!"
message:msg
delegate:nil
cancelButtonTitle:@"Yes, I Did."
otherButtonTitles:nil];
[alert show];
}
6.3 找到viewDidLoad方法,在其中添加代碼:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *array = [[NSArray alloc] initWithObjects:@"Horse", @"Sheep", @"Pig", @"Dog", @"Cat", @"Chicken", @"Duck", @"Goose", nil];
self.myPickerData = array;
}
6.4 找到viewDidUnload方法,在其中添加代碼:
- (void)viewDidUnload
{
[self setMyPickerView:nil];
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.myPickerView = nil;
self.myPickerData = nil;
}
6.5 在@end前面添加代碼:
#pragma mark -
#pragma mark Picker Data Source Methods
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 1;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
return [myPickerData count];
}
#pragma mark Picker Delegate Methods
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
return [myPickerData objectAtIndex:row];
}
7、運(yùn)行:
上面的例子只有一個(gè)轉(zhuǎn)盤,接下來(lái)我們?cè)诖嘶A(chǔ)上增加一個(gè)轉(zhuǎn)盤,第一個(gè)轉(zhuǎn)盤不變,第二個(gè)轉(zhuǎn)盤可以選擇Tree,F(xiàn)lower,Grass,F(xiàn)ence,House,Table,Chair,Book,Swing。只要添加代碼就行了。
8、單擊ViewController.h,在@interface下一行添加代碼:
@property (strong, nonatomic) NSArray *myPickerData_2;
9、單擊ViewController.m,在其中添加代碼:
9.1 在@implementation的下一行添加代碼:
@synthesize myPickerData_2;
9.2 找到viewDidLoad方法,在其中添加代碼:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *array = [[NSArray alloc] initWithObjects:@"Horse", @"Sheep", @"Pig", @"Dog", @"Cat", @"Chicken", @"Duck", @"Goose", nil];
self.myPickerData = array;
NSArray *array_2 = [[NSArray alloc] initWithObjects:@"Tree", @"Flower", @"Grass", @"Fence", @"House", @"Table", @"Chair", @"Book",@"Swing" , nil];
self.myPickerData_2 = array_2;
}
9.3 找到viewDidUnload方法,在其中追加代碼:
- (void)viewDidUnload
{
[self setMyPickerView:nil];
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.myPickerView = nil;
self.myPickerData = nil;
self.myPickerData_2 = nil;
}
9.4 找到buttonPressed方法,修改代碼:
- (IBAction)buttonPressed:(id)sender {
NSInteger row = [myPickerView selectedRowInComponent:0];
NSInteger row_2 = [myPickerView selectedRowInComponent:1];
NSString *selected = [myPickerData objectAtIndex:row];
NSString *selected_2 = [myPickerData_2 objectAtIndex:row_2];
NSString *msg = [[NSString alloc] initWithFormat:
@"You selected %@ and %@!", selected, selected_2];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello!"
message:msg
delegate:nil
cancelButtonTitle:@"Yes, I Did."
otherButtonTitles:nil];
[alert show];
}
9.5 找到numberOfComponentsInPickerView方法,修改其返回值為2:
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 2;
}
9.6 找到numberOfRowsInComponent方法,修改其中代碼:
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
if (component == 0) {
return [myPickerData count];
}
return [myPickerData_2 count];
}
9.7 找到下面的方法,修改代碼:
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
if (component == 0) {
return [myPickerData objectAtIndex:row];
}
return [myPickerData_2 objectAtIndex:row];
}
10、運(yùn)行:
進(jìn)階實(shí)例
下面要用UIPickerView控件做出這樣的效果:它有兩個(gè)轉(zhuǎn)盤(Component),當(dāng)左邊的轉(zhuǎn)盤改變了選擇值,右邊轉(zhuǎn)盤所有的選項(xiàng)都改變。如下圖所示:
為了達(dá)到這樣的效果,還是先要?jiǎng)?chuàng)建兩個(gè)NSArray對(duì)象,每個(gè)轉(zhuǎn)盤對(duì)應(yīng)一個(gè)。然后創(chuàng)建一個(gè)NSDictionary對(duì)象。我們可以想象出數(shù)據(jù)是樹形的,NSDictionary可以看成是一個(gè)有兩列的表格,第一列存儲(chǔ)的是關(guān)鍵字,每個(gè)關(guān)鍵字對(duì)應(yīng)一個(gè)NSArray對(duì)象,這些NSArray數(shù)組中存儲(chǔ)的是一系列的NSString對(duì)象。
在這個(gè)例子中,第一例存儲(chǔ)的是一些省份,第二列存儲(chǔ)的是省份對(duì)應(yīng)的地級(jí)市。
其實(shí)實(shí)現(xiàn)的方法跟上篇文章中的差不多,唯一不同的是要實(shí)現(xiàn):改變左邊轉(zhuǎn)盤的選項(xiàng),右邊轉(zhuǎn)盤內(nèi)容發(fā)生相應(yīng)的變化。這個(gè)功能要用到的函數(shù)我們上次也使用到了。
這次,我們先把要用到的代碼寫好,然后再用Interface Builder創(chuàng)建控件、實(shí)現(xiàn)映射等。
1、運(yùn)行Xcode 4.2,新建一個(gè)Single View Application,名稱為UIPickerView Test2:
2、創(chuàng)建數(shù)據(jù)。我們用到的數(shù)據(jù)如下:
在前邊的文章中曾經(jīng)提到過(guò)plist文件,現(xiàn)在,我們就要用plist文件存儲(chǔ)以上數(shù)據(jù)。為此,選擇File — New — New File,在打開的窗口中,左邊選擇iOS中的Resource,右邊選擇Property List:
單擊Next,在打開的窗口中,Save As中輸入名稱provinceCities,Group選擇Supporting Files:
單擊Create,就創(chuàng)建了provinceCities.plist。然后往其中添加數(shù)據(jù),如下圖所示:
3、單擊ViewController.h,向其中添加代碼:
#import <UIKit/UIKit.h>
#define kProvinceComponent 0
#define kCityComponent 1
@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource>
@property (strong, nonatomic) IBOutlet UIPickerView *picker;
@property (strong, nonatomic) NSDictionary *provinceCities;
@property (strong, nonatomic) NSArray *provinces;
@property (strong, nonatomic) NSArray *cities;
- (IBAction)buttonPressed;
@end
4、單擊ViewController.m,向其中添加代碼:
4.1 在@implementation下一行添加代碼:
@synthesize picker;
@synthesize provinceCities;
@synthesize provinces;
@synthesize cities;
4.2 在ViewDidLoad方法中添加代碼:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSBundle *bundle = [NSBundle mainBundle];
NSURL *plistURL = [bundle URLForResource:@"provinceCities" withExtension:@"plist"];
NSDictionary *dictionary = [NSDictionary dictionaryWithContentsOfURL:plistURL];
self.provinceCities = dictionary;
NSArray *components = [self.provinceCities allKeys];
NSArray *sorted = [components sortedArrayUsingSelector:@selector(compare:)];
self.provinces = sorted;
NSString *selectedState = [self.provinces objectAtIndex:0];
NSArray *array = [provinceCities objectForKey:selectedState];
self.cities = array;
}
代碼中
NSBundle *bundle = [NSBundle mainBundle];
用于獲得當(dāng)前程序的Main Bundle,這個(gè)Bundle可以看成是一個(gè)文件夾,其中的內(nèi)容遵循特定的框架。Main Bundle的一種主要用途是使用程序中的資源,如圖片、聲音等,本例中使用的是plist文件。下面的一行
NSURL *plistURL = [bundle URLForResource:@"provinceCities" withExtension:@"plist"];
用來(lái)獲取provinceCities.plist的路徑,之后將這個(gè)文件中的內(nèi)容都放在一個(gè)NSDictionary對(duì)象中,用的是
NSDictionary *dictionary = [NSDictionary dictionaryWithContentsOfURL:plistURL];
4.3 找到viewDidUnload方法,添加代碼:
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.picker = nil;
self.provinceCities = nil;
self.provinces = nil;
self.cities = nil;
}
4.4 在@end之前添加代碼,實(shí)現(xiàn)buttonPressed方法:
- (IBAction)buttonPressed:(id)sender {
NSInteger provinceRow = [picker selectedRowInComponent:kProvinceComponent];
NSInteger cityRow = [picker selectedRowInComponent:kCityComponent];
NSString *province = [self.provinces objectAtIndex:provinceRow];
NSString *city = [self.cities objectAtIndex:cityRow];
NSString *title = [[NSString alloc] initWithFormat:@"你選擇了%@.", city];
NSString *message = [[NSString alloc] initWithFormat:@"%@屬于%@", city, province];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:message delegate:nil cancelButtonTitle:@"好的" otherButtonTitles: nil];
[alert show];
}
4.5 在@end之前添加代碼:
#pragma mark -
#pragma mark Picker Date Source Methods
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 2;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
if (component == kProvinceComponent) {
return [self.provinces count];
}
return [self.cities count];
}
#pragma mark Picker Delegate Methods
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
if (component == kProvinceComponent) {
return [self.provinces objectAtIndex:row];
}
return [self.cities objectAtIndex:row];
}
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
if (component == kProvinceComponent) {
NSString *selectedState = [self.provinces objectAtIndex:row];
NSArray *array = [provinceCities objectForKey:selectedState];
self.cities = array;
[picker selectRow:0 inComponent:kCityComponent animated:YES];
[picker reloadComponent:kCityComponent];
}
}
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
if (component == kCityComponent) {
return 150;
}
return 140;
}
可以看到,跟上篇文章的例子相比,大部分代碼是一樣的,不同的是增加了pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component這個(gè)方法。這個(gè)方法中,當(dāng)檢測(cè)到修改的是左邊轉(zhuǎn)盤的值,則將self.cities中的內(nèi)容替換成相應(yīng)的數(shù)組,并執(zhí)行[picker reloadComponent:kCityComponent];這個(gè)語(yǔ)句。
最后一個(gè)方法
(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component
可以用來(lái)修改每個(gè)轉(zhuǎn)盤的寬度,雖然在這個(gè)例子中不必要,但是我們得知道是怎么做的。
代碼部分結(jié)束,接下來(lái)是使用Interface Builder添加控件、創(chuàng)建映射。
5、單擊ViewController.xib,往其中添加一個(gè)UIPickerView控件和一個(gè)Button,按鈕的名稱改為“選擇”,具體方法參照前面一
接下來(lái)要做的就是拉幾條線。
6、選中新添加的UIPickerView控件,按住Control,拖到File's Owner圖標(biāo),在彈出菜單選擇delegate和dataSource:
打開Assistant Editor,確保其中打開的是ViewController.h,然后從picker屬性前邊的小圓圈拉線到UIPickerView控件:
同樣,從buttonPressed方法前邊的小圓圈拉線到“選擇”按鈕。
7、運(yùn)行:
- iOS開發(fā)中UIDatePicker控件的使用方法簡(jiǎn)介
- 學(xué)習(xí)iOS開關(guān)按鈕UISwitch控件
- 詳解iOS開發(fā)中UIPickerView控件的使用方法
- iOS App開發(fā)中的UIPageControl分頁(yè)控件使用小結(jié)
- iOS應(yīng)用開發(fā)中的文字選中操作控件UITextView用法講解
- iOS開發(fā)中UIImageView控件的常用操作整理
- 詳解iOS App開發(fā)中改變UIButton內(nèi)部控件的基本方法
- 詳解iOS開發(fā)中UItableview控件的數(shù)據(jù)刷新功能的實(shí)現(xiàn)
- iOS應(yīng)用開發(fā)中視圖控件UIWindow的基本使用教程
- iOS中各種UI控件屬性設(shè)置示例代碼
相關(guān)文章
iOS仿微信搖一搖動(dòng)畫效果加震動(dòng)音效實(shí)例
這篇文章主要介紹了iOS仿微信搖一搖動(dòng)畫效果加震動(dòng)音效實(shí)例,詳細(xì)介紹了微信搖一搖功能的實(shí)現(xiàn)原理,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03iOS開發(fā)教程之登錄與訪客的邏輯實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于iOS開發(fā)教程之登錄與訪客的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04iOS10 App適配權(quán)限 Push Notifications 字體Frame 遇到的問題
這篇文章主要介紹了iOS10 App適配權(quán)限 Push Notifications 字體Frame 遇到的問題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09IOS實(shí)現(xiàn)點(diǎn)擊滑動(dòng)抽屜效果
這篇文章主要為大家詳細(xì)介紹了IOS實(shí)現(xiàn)點(diǎn)擊滑動(dòng)抽屜效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02iOS開發(fā)項(xiàng)目- 基于WebSocket的聊天通訊(2)
這篇文章主要介紹了iOS開發(fā)項(xiàng)目- 基于WebSocket的聊天通訊,可以實(shí)現(xiàn)錄音和音樂播放,有需要的可以了解一下。2016-11-11iOS開發(fā)中WebView的基本使用方法簡(jiǎn)介
這篇文章主要介紹了iOS開發(fā)中WebView的基本使用方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11