当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS实现自定义起始时间选择器视图

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

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

主要功能:

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

如果需要可以根据自己的需求来修改界面, 效果如下:

主要步骤:

  1. 创建时间选择器picker 且确认取消按钮实现功能逻辑
  2. 创建展示时间菜单的按钮视图 (按钮: 图片在右,标题在左的按钮)
  3. 创建时间选择器视图 且 起始时间/截止时间逻辑判断
  4. 使用代理传值起始时间/截止时间(时间串转换)

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

自定义zldatepickerview 文件:

@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;

使用代理传值:

@protocol zldatepickerviewdelegate <nsobject>

- (void)datepickerview:(zldatepickerview *)pickerview backtimestring:(nsstring *)string to:(uiview *)view;

@end

使用 xib 展现datepicker:

+ (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];
}

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

- (void)setminimumdate:(nsdate *)minimumdate {
  self.datepicker.minimumdate = minimumdate;
}

- (void)setmaximumdate:(nsdate *)maximumdate {
  self.datepicker.maximumdate = maximumdate;
}

- (void)setdate:(nsdate *)date {
  self.datepicker.date = date;
}

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

- (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文件:

- (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文件:

- (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"];
}

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

#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文件:

@property (nonatomic, weak) zltimebtn *begintimebtn;
@property (nonatomic, weak) uilabel *label;
@property (nonatomic, weak) zltimebtn *endtimebtn;
- (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);
}

使用代理:

@protocol zltimeviewdelegate <nsobject>

/**
 * 时间选择器视图
 *
 * @param begintime      起始时间/开始时间
 * @param endtime       终止时间按/结束时间
 *
 */
- (void)timeview:(zltimeview *)timeview seleteddatebegin:(nsstring *)begintime end:(nsstring *)endtime;

@end

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

#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];
  }
}

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

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

#import "zltimeview.h"
@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;

#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;
}


  // 起始时间选择器控件
  [self.view addsubview:self.timeview];

使用代理:

<zltimeviewdelegate>
#pragma mark - zltimeviewdelegate

- (void)timeview:(zltimeview *)timeview seleteddatebegin:(nsstring *)begintime end:(nsstring *)endtime {
  // todo: 进行上传时间段
}

当多出使用时,用起来是不是很方便, 这时候测试看下效果:

以上是部分代码, 如果需要 demo 

希望本文所述对你有所帮助，ios实现自定义起始时间选择器视图就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习ios可以继续关注本站。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网