IOS基礎UI之(十) UIPickerView和UIDatePicker詳解

IOS基礎UI之(十) UIPickerView和UIDatePicker詳解

UIPickerView和UIDatePicker使用起來相對比較簡單，下面通過簡單例子深入掌握它們。

 

UIPickerView1.UIPickerView 屬性

 

   // 資料來源(用來告訴UIPickerView有多少列多少行)    @property(nonatomic,assign) id dataSource;        // 代理(用來告訴UIPickerView每1列的每1行顯示什麼內容,監聽UIPickerView的選擇)    @property(nonatomic,assign) id   delegate;        // 是否要顯示選中的指標    @property(nonatomic)   BOOL   showsSelectionIndicator;        // 一共有多少列    @property(nonatomic,readonly) NSInteger numberOfComponents;

 

2.UIPickerView方法

 

// 重新重新整理所有列- (void)reloadAllComponents;// 重新重新整理第component列- (void)reloadComponent:(NSInteger)component;// 主動選中第component列的第row行- (void)selectRow:(NSInteger)row inComponent:(NSInteger)component animated:(BOOL)animated;// 獲得第component列的當前選中的行號- (NSInteger)selectedRowInComponent:(NSInteger)component;

 

 

3.UIPickerView資料來源方法

 

//  一共有多少列- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;//  第component列一共有多少行- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;

 

4.UIPickerView代理方法

 

//  第component列的寬度是多少- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;//  第component列的行高是多少- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;//  第component列第row行顯示什麼文字- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;//  第component列第row行顯示怎樣的view(內容)- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;//  選中了pickerView的第component列第row行- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component;

 

 

UIPickerView例子（聯動效果）1.建立UIPickerView,設定代理和資料來源，添加到view

 

    UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0,64,320, 200)];    pickerView.dataSource = self;    pickerView.delegate = self;        [self.view addSubview:pickerView];

2.懶載入省市資料

@property (nonatomic,strong) NSArray *provinces;-(NSArray *)provinces{    if (_provinces == nil) {        NSMutableArray *provincesArr = [NSMutableArray array];        NSArray *arr = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@cities.plist ofType:nil]];        for (NSDictionary *dict in arr) {            ZXHProvince *province = [ZXHProvince provinceWithDict:dict];            [provincesArr addObject:province];        }        _provinces = provincesArr;    }    return _provinces;}

 

3.實現資料來源方法。返回多少列，每一列多少行

 

#pragma mark 資料來源//返回多少列-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{     NSLog(@==資料來源==numberOfComponentsInPickerView:);    return 2;}//返回每一列多少行-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{    NSLog(@==資料來源===numberOfRowsInComponent);    if (component==0) {//省份        return self.provinces.count;    }else{//市        //獲得選中了哪一個省        NSInteger index = [pickerView selectedRowInComponent:0];        ZXHProvince *province = self.provinces[index];        NSArray *cities = province.cities;        return cities.count;            }}

 

4.實現代理方法。注意：監聽省份的時候要重新整理第二列城市，重新設定城市資料

 

#pragma mark 代理方法//顯示的資料-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{    NSLog(@== 代理方法===titleForRow=====%ld,row);      if (component==0) {        ZXHProvince *province = self.provinces[row];        return province.name;    }else{        //獲得選中了哪一個省        NSInteger index = [pickerView selectedRowInComponent:0];        ZXHProvince *province = self.provinces[index];        return province.cities[row];    }}/** * 監聽選中了某一列的某一行 **/-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{    if (component==0) {//省份        // 重新整理第1列的資料(重新重新整理資料，重新調用資料來源和代理的相應方法獲得資料)        [pickerView reloadComponent:1];        //預設顯示        [pickerView selectRow:0 inComponent:1 animated:YES];    }        //更改顯示文字    //選擇省份    ZXHProvince *province;    NSInteger pIndex = [pickerView selectedRowInComponent:0];    province = self.provinces[pIndex];    NSString *name = province.name;    //城市    NSInteger cIndex = [pickerView selectedRowInComponent:1];    NSString *city = province.cities[cIndex];        self.showTextLable.text = [NSString stringWithFormat:@省份：%@   城市：%@,name,city];}

5.模型資料代碼（略）

 

 

效果：

 

UIPickerView 自訂view

既可顯示文字組也可顯示自訂view。當要在行中顯示view，則實現一下代理方法，返回自訂view。

 

#pragma mark 代理方法/** *  第component列的第row行顯示怎樣的view *  每當有一行內容出現在視野範圍內,就會調用(調用頻率高) 不用使用標識 */-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{   //    UIView *v = [[UIView alloc]init];//    v.backgroundColor = [UIColor redColor];//    v.frame =CGRectMake(0, 0,320,100);//    //    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 20, 100,30)];//    [btn setTitle:@test forState:UIControlStateNormal];//    [UIButton buttonWithType:UIButtonTypeContactAdd];//    [v addSubview:btn];//    return v;    ZXHFlagView *flagView = [ZXHFlagView flagViewWithreusingView:view];    flagView.flag = self.flags[row];    return flagView;    }

UIPickerView顯示自訂view的：

 

 

UIDatePicker1.常見屬性

 

// datePicker的顯示模式@property (nonatomic) UIDatePickerMode datePickerMode;// 顯示的地區語言@property (nonatomic, retain) NSLocale   *locale;

2.監聽UIDatePicker的選擇因為UIDatePicker繼承自UIControl,所以通過addTarget:...監聽

 

 

3.UIDatePicker的使用建立UIDatePicker

 

UIDatePicker *datePicker = [[UIDatePicker alloc]init];

 

 

設定日期格式和語言

 

UIDatePickerModeTime, // Displays hour, minute, and optionally AM/PM designation depending on the locale setting (e.g. 6 | 53 | PM)

UIDatePickerModeDate, // Displays month, day, and year depending on the locale setting (e.g. November | 15 | 2007)

UIDatePickerModeDateAndTime, // Displays date, hour, minute, and optionally AM/PM designation depending on the locale setting (e.g. Wed Nov 15 | 6 | 53 | PM)

UIDatePickerModeCountDownTimer, // Displays hour and minute (e.g. 1 | 53)

 

datePicker.datePickerMode = UIDatePickerModeDate;datePicker.locale = [[NSLocale alloc] initWithLocaleIdentifier:@zh_CN];

 

 

監聽選擇的日期時間

[datePicker addTarget:self action:@selector(birthdayChange:) forControlEvents:UIControlEventValueChanged];

添加到view顯示

 

 [self.view addSubview:datePicker];

UIDatePicker格式為UIDatePickerModeDate的效果：