欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-19 14:02:28
随着界面的整体效果的各种展现, 起始时间选择器的展现也需求突出! 最近项目中发现时间选择器使用处还挺多, 数了数原型图发现有6处. 便决定自定义时间选择器视图写个 d...

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

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

主要功能:

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

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

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

主要步骤:

  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: 进行上传时间段
}

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

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

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

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

上一篇:

下一篇: