iOS開發12：UIPickerView控件（2）

此次要用UIPickerView控件作出這樣的效果：它有兩個轉盤（Component），當左邊的轉盤改變了選擇值，右邊轉盤全部的選項都改變。以下圖所示：

 

爲了達到這樣的效果，仍是先要建立兩個NSArray對象，每一個轉盤對應一個。而後建立一個NSDictionary對象。咱們能夠想象出數據是樹形的，NSDictionary能夠當作是一個有兩列的表格，第一列存儲的是關鍵字，每一個關鍵字對應一個NSArray對象，這些NSArray數組中存儲的是一系列的NSString對象。

在這個例子中，第一例存儲的是一些省份，第二列存儲的是省份對應的地級市。

其實實現的方法跟上篇文章中的差很少，惟一不一樣的是要實現：改變左邊轉盤的選項，右邊轉盤內容發生相應的變化。這個功能要用到的函數咱們上次也使用到了。

此次，咱們先把要用到的代碼寫好，而後再用Interface Builder建立控件、實現映射等。

一、運行Xcode 4.2，新建一個Single View Application，名稱爲UIPickerView Test2：

二、建立數據。咱們用到的數據以下：

江蘇省：
南京市  無錫市  徐州市  常州市  蘇州市  南通市  連雲港市  淮安市  鹽城市  揚州市  鎮江市  泰州市  宿遷市
浙江省：
杭州市  寧波市  溫州市  嘉興市  湖州市  紹興市  金華市  衢州市  舟山市  台州市  麗水市
安徽省：
合肥市  蕪湖市  蚌埠市  淮南市  馬鞍山市  淮北市  銅陵市  安慶市  黃山市  滁州市  阜陽市  宿州市  巢湖市  六安市  亳州市  池州市  宣城市
福建省：
福州市  廈門市  莆田市  三明市  泉州市  漳州市  南平市  龍巖市  寧德市
江西省：
南昌市  景德鎮市  萍鄉市  九江市  新餘市  鷹潭市  贛州市  吉安市  宜春市  撫州市  上饒市
山東省：
濟南市  青島市  淄博市  棗莊市  東營市  煙臺市  濰坊市  濟寧市  泰安市  威海市  日照市  萊蕪市  臨沂市  德州市  聊城市  濱州市  菏澤市
河南省：
鄭州市  開封市  洛陽市  平頂山市  安陽市  鶴壁市  新鄉市  焦做市  濮陽市  許昌市  漯河市  三門峽市  南陽市  商丘市  信陽市  周口市  駐馬店市
廣東省：
廣州市  深圳市  珠海市  汕頭市  韶關市  佛山市  江門市  湛江市  茂名市  肇慶市  惠州市  梅州市  汕尾市  河源市  陽江市  清遠市  東莞市  中山市  潮州市  揭陽市  雲浮市
四川省：
成都市  自貢市  攀枝花市  瀘州市  德陽市  綿陽市  廣元市  遂寧市  內江市  樂山市  南充市  眉山市  宜賓市  廣安市  達州市  雅安市  巴中市  資陽市

在前邊的文章中曾經提到過plist文件，如今，咱們就要用plist文件存儲以上數據。爲此，選擇File — New — New File，在打開的窗口中，左邊選擇iOS中的Resource，右邊選擇Property List：

單擊Next，在打開的窗口中，Save As中輸入名稱provinceCities，Group選擇Supporting Files：

單擊Create，就建立了provinceCities.plist。而後往其中添加數據，以下圖所示：

三、單擊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

四、單擊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];

用於得到當前程序的Main Bundle，這個Bundle能夠當作是一個文件夾，其中的內容遵循特定的框架。Main Bundle的一種主要用途是使用程序中的資源，如圖片、聲音等，本例中使用的是plist文件。下面的一行

NSURL *plistURL = [bundle URLForResource:@"provinceCities" withExtension:@"plist"];

用來獲取provinceCities.plist的路徑，以後將這個文件中的內容都放在一個NSDictionary對象中，用的是

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以前添加代碼，實現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這個方法。這個方法中，當檢測到修改的是左邊轉盤的值，則將self.cities中的內容替換成相應的數組，並執行[picker reloadComponent:kCityComponent];這個語句。

最後一個方法

(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component

能夠用來修改每一個轉盤的寬度，雖然在這個例子中沒必要要，可是咱們得知道是怎麼作的。

代碼部分結束，接下來是使用Interface Builder添加控件、建立映射。

五、單擊ViewController.xib，往其中添加一個UIPickerView控件和一個Button，按鈕的名稱改成「選擇」，具體方法參照前面一篇文章：

接下來要作的就是拉幾條線。

六、選中新添加的UIPickerView控件，按住Control，拖到File’s Owner圖標，在彈出菜單選擇delegate和dataSource：

打開Assistant Editor，確保其中打開的是ViewController.h，而後從picker屬性前邊的小圓圈拉線到UIPickerView控件：

一樣，從buttonPressed方法前邊的小圓圈拉線到「選擇」按鈕。

七、運行：

最終代碼：http://www.oschina.net/code/snippet_164134_11067