用PickerView定制一个简单的datepicker
来源:互联网 发布:网络创世纪uo手游版 编辑:程序博客网 时间:2024/05/04 20:30
做应用的时候免不了会对某些UI控件做一些样式上的定制,比如Button的背景色,圆角,阴影等元素的调整。UIDatePicker也是一个比较常用的UI控件,iOS 7简约的设计风格在某些场景下可能并不是很合适,所以UIDatePicker
有时也是一个有较大定制需求的控件。但是令人匪夷所思的一点是,尽管UIDatePicker
和UIPickerView
看起来好像是差不多的两个UI组件,但是从iOS的API上来看,这两个组件的类之间并无继承关系。从类的继承关系上来看:
UIPickerView
继承自UIView
:UIResponder
:NSObject
UIDatePicker
继承自UIControl
:UIView
:UIResponder
:NSObject
而这两个类之间并无继承关系。UIControl
这个类是用来处理UI控制事件的,这意味着UIDatePicker
可能对控制事件的处理更加精细,但平常的使用上我们可能感受不到与UIPickerView
太多差别。而且要命的一点在于,UIDatePicker
并不支持样式定制,这一点官方文档已经给出来了,连改个单元格的高度和栏目宽度都没戏。所以很遗憾,如果你要改变这玩意的样式,只能另辟蹊径,最方便的搞法就是找长得差不多的UIPickerView
下手。如果你没有太复杂的需求的话,直接定制UIPickerView
可能是一个最方便的选择。在我的案例里,暂时只有修改字号、字体,以及行高行宽的需求,所以用这个方法是在合适不过了。
修改UIPickerView
的样式需要了解这个类相关的两个Protocol:UIPickerViewDataSource
和UIPickerViewDelegate
。
如果对UITableView
比较熟悉的话,看到这两个Protocol的名字应该能很快猜出接下来是个什么搞法。事实上,UITableView
,UICollectionView
和UIPickerView
这三个是差不多的设计。最复杂的是UICollectionView
,搞明白了这个,另外两个看一眼就知道怎么回事。这里我们不多分析这三个组件的共同点。直接讲如何定制。
在此我们需要创建一个新的类,并实现这两个Protocol中的一些方法:
UIPickerViewDataSource
中有两个-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
//返回栏目数量,时间日期一般可以用三栏(年、月、日)-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
//每一栏的行数- UIPickerViewDelegate中有4个方法
-(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
//用来修改行高-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component
//修改每一栏的宽度-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
//选中某栏目某行后的动作 - 后面三个方法挑一个实现就可以(UIPickerViewDelegate)
-(NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component
//返回一个带属性的字符串(包含字体信息),如果只是修改字号,可以实现这个方法-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
//返回一个UIView类实例,如果需要对每个cell的可重用视图进行定制,可以实现这个方法。-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
//如果没有字体定制需求,实现这个方法最简单。
这里最关键的方法是返回每一栏行数的方法以及最后返回跟title有关的方法。实现的思想是,首先要确定给出的时间范围,所有展示的选项不能超过这个范围。其次就是每一行应该对应显示哪一条。然后didSelectRow则是对应选择后的数据操作。具体的做法和UITableView
差不多。下面给出一个参考实现,注意,涉及iOS时间操作的API本文不多加阐述,请读者自行查阅API文档:
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{ switch (component) { // component是栏目index,从0开始,后面的row也一样是从0开始 case 0: { // 第一栏为年,这里startDate和endDate为起始时间和截止时间,请自行指定 NSDateComponents *startCpts = [self.calendar components:NSYearCalendarUnit fromDate:self.startDate]; NSDateComponents *endCpts = [self.calendar components:NSYearCalendarUnit fromDate:self.endDate]; return [endCpts year] - [startCpts year] + 1; } case 1: // 第二栏为月份 return 12; case 2: { // 第三栏为对应月份的天数 NSRange dayRange = [self.calendar rangeOfUnit:NSDayCalendarUnit inUnit:NSMonthCalendarUnit forDate:self.selectedDate]; DLog(@"current month: %d, day number: %d", [[self.calendar components:NSMonthCalendarUnit fromDate:self.selectedDate] month], dayRange.length); return dayRange.length; } default: return 0; }}- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{ UILabel *dateLabel = (UILabel *)view; if (!dataLabel) { dataLabel = [[UILabel alloc] init]; [dateLabel setFont:self.font]; [dateLabel setTextColor:self.fontColor]; [dateLabel setBackgroundColor:[UIColor clearColor]]; } switch (component) { case 0: { NSDateComponents *components = [self.calendar components:NSYearCalendarUnit fromDate:self.startDate]; NSString *currentYear = [NSString stringWithFormat:@"%d", [components year] + row]; [dateLabel setText:currentYear]; dateLabel.textAlignment = NSTextAlignmentRight; break; } case 1: { // 返回月份可以用DateFormatter,这样可以支持本地化 NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; formatter.locale = [NSLocale currentLocale]; NSArray *monthSymbols = [formatter monthSymbols]; [dateLabel setText:[monthSymbols objectAtIndex:row]]; dateLabel.textAlignment = NSTextAlignmentCenter; break; } case 2: { NSRange dateRange = [self.calendar rangeOfUnit:NSDayCalendarUnit inUnit:NSMonthCalendarUnit forDate:self.selectedDate]; NSString *currentDay = [NSString stringWithFormat:@"%02d", (row + 1) % (dateRange.length + 1)]; [dateLabel setText:currentDay]; dateLabel.textAlignment = NSTextAlignmentLeft; break; } default: break; } return dateLabel;} - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{ NSInteger unitFlags = NSYearCalendarUnit | NSMonthCalendarUnit | NSDayCalendarUnit; switch (component) { case 0: { NSDateComponents *indicatorComponents = [self.calendar components:NSYearCalendarUnit fromDate:self.startDate]; NSInteger year = [indicatorComponents year] + row; NSDateComponents *targetComponents = [self.calendar components:unitFlags fromDate:self.selectedDate]; [targetComponents setYear:year]; self.selectedDateComponets = targetComponents; [pickerView selectRow:0 inComponent:1 animated:YES]; break; } case 1: { NSDateComponents *targetComponents = [self.calendar components:unitFlags fromDate:self.selectedDate]; [targetComponents setMonth:row + 1]; self.selectedDateComponets = targetComponents; [pickerView selectRow:0 inComponent:2 animated:YES]; break; } case 2: { NSDateComponents *targetComponents = [self.calendar components:unitFlags fromDate:self.selectedDate]; [targetComponents setDay:row + 1]; self.selectedDateComponets = targetComponents; break; } default: break; } [pickerView reloadAllComponents]; // 注意,这一句不能掉,否则选择后每一栏的数据不会重载,其作用与UITableView中的reloadData相似}
另外,如果希望对操控事件进行处理,我们创建的类可以继承UIControl,并实现sendAction:to:forEvent:
方法。如果没有这个需求,直接继承NSObject就行了。
如果需要修改控件的背景材质,可以替换UIPickerView
的index为2的subview。
- 用PickerView定制一个简单的datepicker
- pickerView的简单说明
- PickerView简单的省市布局
- pickerView控件的简单使用
- Android PickerView 选择器的简单使用
- 一个简单的时间类的定制
- Python 简单的定制一个计时器
- Xcode控件使用笔记二:DatePicker、PickerView
- iOS datepicker 和 pickerView 设置字体颜色
- 简单的DatePicker样式设置
- bootstrap-datepicker的简单使用
- cocos2d 中使用 pickerView 简单的老虎机应用
- iOS通过pickerView自定义简单的时间选择器
- 关于一个简单的复选框的定制
- 为snapcraft创建一个简单的定制的plugin
- iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker
- 定制的一个仪表盘
- JQuery 日历控件Datepicker的简单使用
- 看伟大的领袖如何激励行动有感
- 你写论文时发现了哪些神网站?
- 语音识别系统结构——鸟瞰
- c++作业6
- urllib使用
- 用PickerView定制一个简单的datepicker
- CSS---网络编程
- Java动态代理机制详解(JDK 和CGLIB,Javassist,ASM)
- LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- android中MVP模式(一)
- 买房要点
- 我的vim 配置
- Python模块探秘 Smtplib发送带有各种附件的邮件
- 结构体的初始化