iOS自定义起始时间选择器视图

随着界面的整体效果的各种展现, 起始时间选择器的展现也需求突出!

最近项目中发现时间选择器使用处还挺多, 数了数原型图发现有6处. 便决定自定义时间选择器视图写个 Demo, 封装好在所需控制器里直接调用!

一、实现功能及主要思路

实现功能:

自定义起始时间选择器视图, 调起时间选择器, 传值(起始时间/截止时间), 两者时间均要合理, 不能超过未来时间, 并且起始时间不能大于截止时间. 点击取消或空白处收起时间选择器.

其中两者时间(起始时间/截止时间)是可以做限制,例如:当月月初1日 到 当天时间.

主要思路:

• 1. 创建时间选择器Picker 且确认取消按钮实现功能逻辑

• 2. 创建展示时间菜单的按钮视图 (按钮: 图片在右,标题在左的按钮)

• 3. 创建时间选择器视图 且 起始时间/截止时间逻辑判断

• 4. 使用代理传值起始时间/截止时间(时间串转换)

二、程序实现

第一步. 创建时间选择器Picker 且确认取消按钮实现功能逻辑

自定义ZLDatePickerView 文件:

&＃64;property (nonatomic, assign) id deleagte;
// 最初/小时间(一般为左边值)
&＃64;property (nonatomic, strong) NSDate *minimumDate;
// 截止时间(一般为右边值)
&＃64;property (nonatomic, strong) NSDate *maximumDate;
// 当前选择时间
&＃64;property (nonatomic, strong) NSDate *date;
&＃43; (instancetype)datePickerView;
- (void)showFrom:(UIView *)view;

使用代理传值:

&＃64;protocol ZLDatePickerViewDelegate
- (void)datePickerView:(ZLDatePickerView *)pickerView backTimeString:(NSString *)string To:(UIView *)view;
&＃64;end

使用 xib 展现datePicker:

&＃43; (instancetype)datePickerView {ZLDatePickerView *picker &＃61; [[NSBundle mainBundle] loadNibNamed:&＃64;"ZLDatePickerView" owner:nil options:nil].lastObject;picker.frame &＃61; CGRectMake(0, UI_View_Height - 250, UI_View_Width, 250);picker.maximumDate &＃61; [NSDate date];return picker;
}
- (void)showFrom:(UIView *)view {UIView *bgView &＃61; [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];bgView.backgroundColor &＃61; [UIColor lightGrayColor];bgView.alpha &＃61; 0.5;UITapGestureRecognizer *tap &＃61; [[UITapGestureRecognizer alloc] initWithTarget:self action:&＃64;selector(tap:)];[bgView addGestureRecognizer:tap];self.fromView &＃61; view;self.bgView &＃61; bgView;[[UIApplication sharedApplication].keyWindow addSubview:self.bgView];[[UIApplication sharedApplication].keyWindow addSubview:self];
}

起始时间/截止时间设值:

- (void)setMinimumDate:(NSDate *)minimumDate {self.datePicker.minimumDate &＃61; minimumDate;
}
- (void)setMaximumDate:(NSDate *)maximumDate {self.datePicker.maximumDate &＃61; maximumDate;
}
- (void)setDate:(NSDate *)date {self.datePicker.date &＃61; date;
}

确认/取消按钮实现功能逻辑:

- (IBAction)cancel:(id)sender {[self dismiss];
}
- (IBAction)makeSure:(id)sender {[self dismiss];NSDate *date &＃61; self.datePicker.date;if ([self.deleagte respondsToSelector:&＃64;selector(datePickerView:backTimeString:To:)]) {[self.deleagte datePickerView:self backTimeString:[self fomatterDate:date] To:self.fromView];}
}

第二步. 创建展示时间菜单的按钮视图 (按钮: 图片在右,标题在左的按钮)

这个可以根据需求来,有些不需要这个按钮图片在右边的,则没必要添加.

自定义ZLOppositeButton文件:

- (void)layoutSubviews {[super layoutSubviews];CGFloat margin &＃61; 10;// 替换 title 和 image 的位置// 图片在右,标题在左// 由于 button 内部的尺寸是自适应的.调整尺寸即可CGFloat maxWidth &＃61; self.width - self.imageView.width - margin;if (self.titleLabel.width >&＃61; maxWidth) {self.titleLabel.width &＃61; maxWidth;}CGFloat totalWidth &＃61; self.titleLabel.width &＃43; self.imageView.width;self.titleLabel.x &＃61; (self.width - totalWidth - margin) * 0.5;self.imageView.x &＃61; CGRectGetMaxX(self.titleLabel.frame) &＃43; margin;
}

接着利用上面的按钮创建一个展示时间菜单的按钮视图ZLTimeBtn文件:

- (void)setup {self.backgroundColor &＃61; [UIColor clearColor];[self setImage:[UIImage imageNamed:&＃64;"xiangxiadianji"] forState:UIControlStateNormal];[self setTitle:[self timeStringDefault] forState:UIControlStateNormal];[self setTitleColor:ZLColor(102, 102, 102) forState:UIControlStateNormal];self.titleLabel.font &＃61; [UIFont systemFontOfSize:14];
}
// 时间默认展示当天
- (NSString *)timeStringDefault {NSDate *date &＃61; [NSDate date];return [date timeFormat:&＃64;"yyyy-MM-dd"];
}

其中我们上传时间一般都是字符串而不是时间戳, 则需要进行转换:

#import "NSDate&＃43;ZLDateTimeStr.h"

- (NSString *)timeFormat:(NSString *)dateFormat {NSDateFormatter *formatter &＃61; [[NSDateFormatter alloc] init];[formatter setDateStyle:NSDateFormatterMediumStyle];[formatter setTimeStyle:NSDateFormatterShortStyle];[formatter setTimeZone:[NSTimeZone timeZoneWithAbbreviation:&＃64;"UTC"]];[formatter setDateFormat:dateFormat];return [formatter stringFromDate:self];
}

第三步. 创建时间选择器视图 且 起始时间/截止时间逻辑判断

利用第二步自定义的按钮来自定义ZLTimeView文件:

- (void)layoutSubviews {[super layoutSubviews];self.beginTimeBtn.frame &＃61; CGRectMake(0, 0, self.width / 5.0 * 2, self.height);self.label.frame &＃61; CGRectMake(CGRectGetMaxX(self.beginTimeBtn.frame), 0, self.width / 5, self.height);self.endTimeBtn.frame &＃61; CGRectMake(CGRectGetMaxX(self.label.frame),0 , self.width / 5.0 * 2, self.height);self.line.frame &＃61; CGRectMake(0, self.height - 1, self.width, 1);
}

- (void)setupSubview {// 起始时间按钮YYPTimeBtn *beginTimeBtn &＃61; [[YYPTimeBtn alloc] init];beginTimeBtn.backgroundColor &＃61; [UIColor clearColor];[beginTimeBtn addTarget:self action:&＃64;selector(beginTimeBtnClick:) forControlEvents:UIControlEventTouchUpInside];// 起始时间默认展示当月一号// [beginTimeBtn setTitle:[self timeStringDefaultWith:&＃64;"yyyy-MM-01"] forState:UIControlStateNormal];[self addSubview:beginTimeBtn];self.beginTimeBtn &＃61; beginTimeBtn;// 至labelUILabel *label &＃61; [[UILabel alloc] init];label.backgroundColor &＃61; [UIColor clearColor];label.text &＃61; &＃64;"——";label.textColor &＃61; YYPWhiteTitleColor;label.font &＃61; [UIFont systemFontOfSize:14];label.textAlignment &＃61; NSTextAlignmentCenter;self.label &＃61; label;[self addSubview:label];// 终止时间按钮YYPTimeBtn *endTimeBtn &＃61; [[YYPTimeBtn alloc] init];[endTimeBtn addTarget:self action:&＃64;selector(endTimeBtnClick:) forControlEvents:UIControlEventTouchUpInside];// 终止时间默认展示当天// [endTimeBtn setTitle:[self timeStringDefaultWith:&＃64;"yyyy-MM-dd"] forState:UIControlStateNormal];self.endTimeBtn &＃61; endTimeBtn;[self addSubview:endTimeBtn];UIView *line &＃61; [[UIView alloc] init];line.backgroundColor &＃61; YYPColor(204, 204, 204);self.line &＃61; line;[self addSubview:line];
}

这里强调一点: 如果默认展示的起始时间均为当天时间时,则在可在自定义按钮里设置就好,不需添加下面方法.

// 自定义默认展示的当月起始时间
- (NSString *)timeStringDefaultWith:(NSString *)timeFormat {NSDate *date &＃61; [NSDate date];return [date timeFormat:timeFormat];
}

使用代理:

&＃64;protocol ZLTimeViewDelegate
/*** 时间选择器视图** &＃64;param beginTime 起始时间/开始时间* &＃64;param endTime 终止时间按/结束时间**/
- (void)timeView:(ZLTimeView *)timeView seletedDateBegin:(NSString *)beginTime end:(NSString *)endTime;
&＃64;end

使用第一步创建的时间选择器Picker, 来进行起始时间/截止时间逻辑判断:

#pragma mark - ZLDatePickerViewDelegate
- (void)beginTimeBtnClick:(UIButton *)btn {ZLDatePickerView *beginTimePV &＃61; [ZLDatePickerView datePickerView];beginTimePV.date &＃61; [NSDate stringChangeTimeFormat:&＃64;"yyyy-MM-dd" string:btn.titleLabel.text];if (self.maxDate) {beginTimePV.maximumDate &＃61; self.maxDate;}beginTimePV.deleagte &＃61; self;[beginTimePV showFrom:btn];
}
- (void)endTimeBtnClick:(UIButton *)btn {ZLDatePickerView *endTimePV &＃61; [ZLDatePickerView datePickerView];endTimePV.date &＃61; [NSDate stringChangeTimeFormat:&＃64;"yyyy-MM-dd" string:btn.titleLabel.text];if (self.minDate) {endTimePV.minimumDate &＃61; self.minDate;}endTimePV.deleagte &＃61; self;[endTimePV showFrom:btn];
}
- (void)datePickerView:(ZLDatePickerView *)pickerView backTimeString:(NSString *)string To:(UIView *)view {UIButton *btn &＃61; (UIButton *)view;if (btn &＃61;&＃61; self.beginTimeBtn) {self.minDate &＃61; [NSDate stringChangeTimeFormat:&＃64;"yyyy-MM-dd" string:string];}if (btn &＃61;&＃61; self.endTimeBtn) {self.maxDate &＃61; [NSDate stringChangeTimeFormat:&＃64;"yyyy-MM-dd" string:string];}[btn setTitle:string forState:UIControlStateNormal];if ([self.delegate respondsToSelector:&＃64;selector(timeView:seletedDateBegin:end:)]) {[self.delegate timeView:self seletedDateBegin:self.beginTimeBtn.titleLabel.text end:self.endTimeBtn.titleLabel.text];}
}

第四步. 使用代理传值起始时间/截止时间

在所需控制器里创建起始时间选择器控件:

#import "ZLTimeView.h"

懒加载:

- (ZLTimeView *)timeView {if (!_timeView) {ZLTimeView *timeView &＃61; [[ZLTimeView alloc] initWithFrame:CGRectMake(0, 100, UI_View_Width, 50)];timeView.backgroundColor &＃61; [UIColor greenColor];timeView.delegate &＃61; self;_timeView &＃61; timeView;}return _timeView;
}

创建添加起始时间选择器控件:

[self.view addSubview:self.timeView];

使用代理:

#pragma mark - ZLTimeViewDelegate
- (void)timeView:(ZLTimeView *)timeView seletedDateBegin:(NSString *)beginTime end:(NSString *)endTime {// TODO: 进行上传时间段
}

三、压缩文件截图及运行效果

1. 压缩文件截图:

2. 项目截图

3.运行效果:

4.效果截图:

四、其他补充

界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!