您的位置:首页 > 产品设计 > UI/UE

iOS学习--UIPickerView和UIDatePicker详解

2016-05-18 09:26 591 查看
一、UIDatePicker

UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期、时间和持续时长的输入。日期选取器的各列会按照指定的风格进行自动配置,这样就让开发者不必关心如何配置表盘这样的底层操作。你也可以对其进行定制,令其使用任何范围的日期。

UIDatePicker 依赖于 NSDate 类,这个类是cocoa 基础的一员,以前用于桌面系统。本文中仅需用到 initWithString 来创建NSDate 所以NSDate 留待专题讲解,你只需要掌握本文中使用的方法就好。

常见属性:

// datePicker的显示模式
@property (nonatomic) UIDatePickerMode datePickerMode;
// 显示的区域语言
@property (nonatomic, retain) NSLocale   *locale;


一、创建日期/时间选取器

UIDatePicker 使用起来比标准 UIPickerView 更简单。他会根据你指定的日期范围创建自己的数据源。使用它只需要创建一个对象:

C代码


UIDatePicker *datePicker = [ [ UIDatePicker alloc] initWithFrame:CGRectMake(0.0,0.0,0.0,0.0)];

默认情况下选取会显示目前的日期和时间,并提供几个表盘,分别显示可以选择的月份和日期、小时、分钟、以及上午、下午。因此用户默认可以选择任何日期和时间的组合。

二、日期选取器模式

日期/时间选取器支持4种不同模式的选择方式。通过设置 datePickerMode 属性,可以定义选择模式:

C代码


datePicker.datePickerMode = UIDatePickerModeTime;

支持的模式:

C代码


typedef enum {

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)

} UIDatePickerMode;

三、时间间隔

你可以将分钟表盘设置为以不同的时间间隔来显示分钟,前提是该间隔要能够让60整除。默认间隔是一分钟。如果要使用不同的间隔,需要改变 minuteInterval属性:

C代码


datePicker.minuteInterval = 5;

四、日期范围

你可以通过设置mininumDate 和 maxinumDate 属性,来指定使用的日期范围。如果用户试图滚动到超出这一范围的日期,表盘会回滚到最近的有效日期。两个方法都需要NSDate 对象作参数:

C代码


+(NSDate*) convertDateFromString:(NSString*)uiDate

{

NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;

[formatter setDateFormat:@"yyyy年MM月dd日"];

NSDate *date=[formatter dateFromString:uiDate];

return date;

}

输入的日期字符串形如:@"1992-05-21 13:08:08"

- (NSDate *)dateFromString:(NSString *)dateString{

NSDateFormatter *dateFormatter = [[NSDateFormatteralloc] init];

[dateFormatter setDateFormat: @"yyyy-MM-dd HH:mm:ss"];

NSDate *destDate= [dateFormatter dateFromString:dateString];

[dateFormatter release];

return destDate;

}

NSDate* minDate = [self dateFromString:@"1900-01-01 00:00:00 -0500"];

NSDate* maxDate = [self dateFromString:@"1900-01-01 00:00:00 -0500"];

datePicker.minimumDate = minDate;

datePicker.maximumDate = maxDate;

- (NSString *)stringFromDate:(NSDate *)date{

NSDateFormatter *dateFormatter = [[NSDateFormatteralloc] init];

//zzz表示时区,zzz可以删除,这样返回的日期字符将不包含时区信息。

[dateFormatter setDateFormat:@"yyyy-MM-dd HH:mm:ss zzz"];

NSString *destDateString = [dateFormatter stringFromDate:date];

[dateFormatter release];

return destDateString;

}

- (IBAction)handleDidPressBtn1{

NSLog(@"%@/n", [selfdateFromString:@"2011-08-09
12:02:01"]);

NSLog(@"%@/n", [selfstringFromDate:[selfdateFromString:@"2011-08-09
12:02:01"]]);

}

如果两个日期范围属性中任何一个未被设置,则默认行为将会允许用户选择过去或未来的任意日期。这在某些情况下很有用处,比如,当选择生日时,可以是过去的任意日期,但终止与当前日期。如果你希望设置默认显示的日期,可以使用date属性:

C代码


datePicker.date = minDate;

此外,你还可以用 setDate 方法。如果选择了使用动画,则表盘会滚动到你指定的日期:

C代码


[datePicker setDate:maxDate animated:YES];

五、显示日期选择器

C代码


[self.view addSubview:datePicker];

需要注意的是,选取器的高度始终是216像素,要确定分配了足够的空间来容纳。

六、读取日期

C代码


NSDate* _date = datePicker.date;

由于日期选择器是 UIControl的子类 (与UIPickerView不同),你还可以在UIControl类的通知结构中挂接一个委托:

C代码


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

只要用户选择了一个新日期,你的动作类就会被调用:

C代码


-(void)dateChanged:(id)sender{

UIDatepicker* control = (UIDatePicker*)sender;

NSDate* _date = control.date;

/*添加你自己响应代码*/

}

是不是觉得很好玩呢?确实。如果觉得好玩,你也试着封装一个UIPickerView 试试看,打造一个你自己的专用滚轮。

二、UIPickerView

1.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的效果图:



来源:http://blog.csdn.net/iukey/article/details/7327164
http://www.2cto.com/kf/201511/448944.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: