随着界面的整体效果的各种展现, 起始时间选择器的展现也需求突出!
最近项目中发现时间选择器使用处还挺多, 数了数原型图发现有6处. 便决定自定义时间选择器视图写个 demo, 封装好在所需控制器里直接调用!
主要功能:
调起时间选择器, 传值(起始时间/截止时间), 两者时间均要合理, 不能超过未来时间, 并且起始时间不能大于截止时间. 点击取消或空白处收起时间选择器.
如果需要可以根据自己的需求来修改界面, 效果如下:
主要步骤:
- 创建时间选择器picker 且确认取消按钮实现功能逻辑
- 创建展示时间菜单的按钮视图 (按钮: 图片在右,标题在左的按钮)
- 创建时间选择器视图 且 起始时间/截止时间逻辑判断
- 使用代理传值起始时间/截止时间(时间串转换)
第一步. 创建时间选择器picker 且确认取消按钮实现功能逻辑
自定义zldatepickerview 文件:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@property (nonatomic, assign) id<zldatepickerviewdelegate> deleagte;// 最初/小时间(一般为左边值)@property (nonatomic, strong) nsdate *minimumdate;// 截止时间(一般为右边值)@property (nonatomic, strong) nsdate *maximumdate;// 当前选择时间@property (nonatomic, strong) nsdate *date;+ (instancetype)datepickerview;- (void)showfrom:(uiview *)view; |
使用代理传值:
|
1
2
3
4
5
|
@protocol zldatepickerviewdelegate <nsobject>- (void)datepickerview:(zldatepickerview *)pickerview backtimestring:(nsstring *)string to:(uiview *)view;@end |
使用 xib 展现datepicker:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
+ (instancetype)datepickerview { zldatepickerview *picker = [[nsbundle mainbundle] loadnibnamed:@"zldatepickerview" owner:nil options:nil].lastobject; picker.frame = cgrectmake(0, ui_view_height - 250, ui_view_width, 250); picker.maximumdate = [nsdate date]; return picker;}- (void)showfrom:(uiview *)view { uiview *bgview = [[uiview alloc] initwithframe:[[uiscreen mainscreen] bounds]]; bgview.backgroundcolor = [uicolor lightgraycolor]; bgview.alpha = 0.5; uitapgesturerecognizer *tap = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(tap:)]; [bgview addgesturerecognizer:tap]; self.fromview = view; self.bgview = bgview; [[uiapplication sharedapplication].keywindow addsubview:self.bgview]; [[uiapplication sharedapplication].keywindow addsubview:self];} |
起始时间/截止时间设值:
|
1
2
3
4
5
6
7
8
9
10
11
|
- (void)setminimumdate:(nsdate *)minimumdate { self.datepicker.minimumdate = minimumdate;}- (void)setmaximumdate:(nsdate *)maximumdate { self.datepicker.maximumdate = maximumdate;}- (void)setdate:(nsdate *)date { self.datepicker.date = date;} |
确认/取消按钮实现功能逻辑:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
- (ibaction)cancel:(id)sender { [self dismiss];}- (ibaction)makesure:(id)sender { [self dismiss]; nsdate *date = self.datepicker.date; if ([self.deleagte respondstoselector:@selector(datepickerview:backtimestring:to:)]) { [self.deleagte datepickerview:self backtimestring:[self fomatterdate:date] to:self.fromview]; }} |
第二步. 创建展示时间菜单的按钮视图 (按钮: 图片在右,标题在左的按钮)
这个可以根据需求来,有些不需要这个按钮图片在右边的,则没必要添加.
自定义zloppositebutton文件:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
- (void)layoutsubviews { [super layoutsubviews]; cgfloat margin = 10; // 替换 title 和 image 的位置 // 图片在右,标题在左 // 由于 button 内部的尺寸是自适应的.调整尺寸即可 cgfloat maxwidth = self.width - self.imageview.width - margin; if (self.titlelabel.width >= maxwidth) { self.titlelabel.width = maxwidth; } cgfloat totalwidth = self.titlelabel.width + self.imageview.width; self.titlelabel.x = (self.width - totalwidth - margin) * 0.5; self.imageview.x = cgrectgetmaxx(self.titlelabel.frame) + margin;} |
接着利用上面的按钮创建一个展示时间菜单的按钮视图zltimebtn文件:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
- (void)setup { self.backgroundcolor = [uicolor clearcolor]; [self setimage:[uiimage imagenamed:@"xiangxiadianji"] forstate:uicontrolstatenormal]; [self settitle:[self timestringdefault] forstate:uicontrolstatenormal]; [self settitlecolor:zlcolor(102, 102, 102) forstate:uicontrolstatenormal]; self.titlelabel.font = [uifont systemfontofsize:14];}- (nsstring *)timestringdefault { nsdate *date = [nsdate date]; return [date timeformat:@"yyyy-mm-dd"];} |
其中我们上传时间一般都是字符串而不是时间戳, 则需要进行转换
|
1
2
3
4
5
6
7
8
9
10
11
|
#import "nsdate+zldatetimestr.h"- (nsstring *)timeformat:(nsstring *)dateformat { nsdateformatter *formatter = [[nsdateformatter alloc] init]; [formatter setdatestyle:nsdateformattermediumstyle]; [formatter settimestyle:nsdateformattershortstyle]; [formatter settimezone:[nstimezone timezonewithabbreviation:@"utc"]]; [formatter setdateformat:dateformat]; return [formatter stringfromdate:self];} |
第三步. 创建时间选择器视图 且 起始时间/截止时间逻辑判断
利用第二步自定义的按钮来自定义zltimeview文件:
|
1
2
3
|
@property (nonatomic, weak) zltimebtn *begintimebtn;@property (nonatomic, weak) uilabel *label;@property (nonatomic, weak) zltimebtn *endtimebtn; |
|
1
2
3
4
5
6
7
8
|
- (void)layoutsubviews { [super layoutsubviews]; self.begintimebtn.frame = cgrectmake(0, 0, self.width / 5.0 * 2, self.height); self.label.frame = cgrectmake(cgrectgetmaxx(self.begintimebtn.frame), 0, self.width / 5, self.height); self.endtimebtn.frame = cgrectmake(cgrectgetmaxx(self.label.frame),0 , self.width / 5.0 * 2, self.height); self.line.frame = cgrectmake(0, self.height - 1, self.width, 1);} |
使用代理:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@protocol zltimeviewdelegate <nsobject>/** * 时间选择器视图 * * @param begintime 起始时间/开始时间 * @param endtime 终止时间按/结束时间 * */- (void)timeview:(zltimeview *)timeview seleteddatebegin:(nsstring *)begintime end:(nsstring *)endtime;@end |
使用第一步创建的时间选择器picker, 来进行起始时间/截止时间逻辑判断
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
#pragma mark - zldatepickerviewdelegate- (void)begintimebtnclick:(uibutton *)btn { zldatepickerview *begintimepv = [zldatepickerview datepickerview]; begintimepv.date = [nsdate stringchangetimeformat:@"yyyy-mm-dd" string:btn.titlelabel.text]; if (self.maxdate) { begintimepv.maximumdate = self.maxdate; } begintimepv.deleagte = self; [begintimepv showfrom:btn];}- (void)endtimebtnclick:(uibutton *)btn { zldatepickerview *endtimepv = [zldatepickerview datepickerview]; endtimepv.date = [nsdate stringchangetimeformat:@"yyyy-mm-dd" string:btn.titlelabel.text]; if (self.mindate) { endtimepv.minimumdate = self.mindate; } endtimepv.deleagte = self; [endtimepv showfrom:btn];}- (void)datepickerview:(zldatepickerview *)pickerview backtimestring:(nsstring *)string to:(uiview *)view { uibutton *btn = (uibutton *)view; if (btn == self.begintimebtn) { self.mindate = [nsdate stringchangetimeformat:@"yyyy-mm-dd" string:string]; } if (btn == self.endtimebtn) { self.maxdate = [nsdate stringchangetimeformat:@"yyyy-mm-dd" string:string]; } [btn settitle:string forstate:uicontrolstatenormal]; if ([self.delegate respondstoselector:@selector(timeview:seleteddatebegin:end:)]) { [self.delegate timeview:self seleteddatebegin:self.begintimebtn.titlelabel.text end:self.endtimebtn.titlelabel.text]; }} |
第四步. 使用代理传值起始时间/截止时间
在所需控制器里创建起始时间选择器控件
|
1
|
#import "zltimeview.h" |
|
1
2
3
4
5
6
7
|
@property (nonatomic, copy) nsstring *begintime;@property (nonatomic, copy) nsstring *endtime;@property (nonatomic, weak) uibutton *begintimebtn;@property (nonatomic, weak) uibutton *endtimebtn;@property (nonatomic, strong) zltimeview *timeview; |
|
1
2
3
4
5
6
7
8
9
10
11
|
#pragma mark - 懒加载- (zltimeview *)timeview { if (!_timeview) { zltimeview *timeview = [[zltimeview alloc] initwithframe:cgrectmake(0, 100, ui_view_width, 50)]; timeview.backgroundcolor = [uicolor greencolor]; timeview.delegate = self; _timeview = timeview; } return _timeview;} |
|
1
2
|
// 起始时间选择器控件[self.view addsubview:self.timeview]; |
使用代理:
|
1
|
<zltimeviewdelegate> |
|
1
2
3
4
5
|
#pragma mark - zltimeviewdelegate- (void)timeview:(zltimeview *)timeview seleteddatebegin:(nsstring *)begintime end:(nsstring *)endtime { // todo: 进行上传时间段} |
当多出使用时,用起来是不是很方便, 这时候测试看下效果:
以上是部分代码, 如果需要 demo
希望本文所述对你有所帮助，ios实现自定义起始时间选择器视图就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习ios可以继续关注本站。
原文链接：http://www.jianshu.com/p/6daacaf24f48?utm_source=tuicool&utm_medium=referral
