[iOS] SDK - UIPickerView製作

許久沒寫文章了，本次會說明如何建立基本的UIPickerView。

首先開一個新專案，Single-View Application就好了。

先說明我們要做怎樣的滾輪，我們要做只有兩個欄的滾輪，通常左邊的欄是固定的，比方說時間滾輪中，一定是固定12個月，右邊的欄通常是變動的，像是每個月的天數都不一樣，所以這邊我們會定義兩個全域變數，一個是顯示在左邊的欄，一個是顯示右邊的欄。

另外，我們通常把滾輪放在一個View中，最一般的情況是放在UIViewController中，所以我們會在UIViewController的表頭檔中宣佈上述兩個變數，在實作檔中實現這個滾輪。

再來，因為這個東西是要設定代理者的，代理者就是他所在的UIViewController，所以我們也要設定這個view controller遵守的協議，新版中，滾輪的資料來源和滾輪的協議已經分開，所以我們要寫：


@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource>{
    NSMutableDictionary *data;
    NSArray *keys;
}
@property (strong, nonatomic) IBOutlet UILabel *label;

@end

首先是它需要遵守的協議：UIPickerViewDelegate和UIPickerViewDataSource。再來是用在滾輪的兩個欄的資料內容，注意一個是可變的，一個是不可變得。最後是你要檢查你所選擇的資料內容所用來顯示在View上的Label，這個需要自行設定，從右下方的區域中把要的原件拉進來然後新增一個Outlet。

有這些之後，再來的工作就是到實作檔裡面去。

首先是實作出滾輪，這是在viewDidLoad裡面實作：

- (void)viewDidLoad
{
    [super viewDidLoad];
  
    [self prepareData];
    UIPickerView *picker = [[UIPickerView alloc] initWithFrame:CGRectZero];
    picker.delegate = self;
    picker.showsSelectionIndicator = YES;
    [picker selectRow:0 inComponent:0 animated:YES];
    [picker selectRow:0 inComponent:1 animated:YES];
    [self.view addSubview:picker];
}








然後是設定資料來源：


-(void) prepareData{
    data = [[NSMutableDictionary alloc] init];
    [data setValue:[NSArray arrayWithObjects:@"香草", @"榛果", @"牛奶", @"焦糖", @"其他", nil]
            forKey:@"配料"];
    [data setValue:[NSArray arrayWithObjects:@"黑咖啡", @"濃縮咖啡", @"貓屎咖啡", @"其他", nil]
            forKey:@"咖啡"];
    keys = [[data allKeys]
            sortedArrayUsingComparator:(NSComparator)^(id obj1, id obj2){
                return [obj1 caseInsensitiveCompare:obj2];
            }];
}



這是在Dictionary中放入兩個array，各用不同的鍵值標示，然後為了設定左邊欄位的資料，也就是keys，因為keys是array，為了要有序，所以用了sortedArrayUsingComparator:去排列從data這個dictionary裡面取出的鍵值。

再來是實作協議中的方法：








//當你選某筆資料時
-(void) pickerView:(UIPickerView *)pickerView
      didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    if (component == 0) {
        //須重新載入component == 1的畫面
        [pickerView reloadComponent:1];
    }else {
        NSString *key = [keys objectAtIndex:[pickerView selectedRowInComponent:0]];//飲料或甜點
        NSArray *array = [data objectForKey:key];
        label.text = [array objectAtIndex:[pickerView selectedRowInComponent:1]];
    }
}







component為0表示你在最左邊的欄，你選擇不同的列時，右邊的欄就會應聲改變，所以要reloadComponent:去做到改變右邊欄的內容。

//設定滾輪共有幾個欄位
-(NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 2;
}

當然只有兩個欄位。

//設定滾輪共有幾個項目
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == 0) {
        return [keys count];
    }else {
        NSString *key = [keys objectAtIndex:[pickerView selectedRowInComponent:0]];//咖啡或配料
        NSArray *array = [data objectForKey:key];
        return [array count];
    }
}

若是component為0亦即是左邊的欄位，當然只有兩個，因為keys的數目就是2，那右邊欄位是根據你左邊欄位的選擇，所以須知道在component為0的左欄選取的row的字串，然後比對data裡面漢根字串相同的鍵值是哪一個之後取出他代表的array，最後去數這個array的數目有多少。

//設定滾輪顯示的文字
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    if (component == 0) {
        return [keys objectAtIndex:row];
    }else {
        NSString *key = [keys objectAtIndex:[pickerView selectedRowInComponent:0]];
        NSArray *array = [data objectForKey:key];
        return [array objectAtIndex:row];
    }
}



這樣就完成了！