iOS實(shí)現(xiàn)自定義起始時(shí)間選擇器視圖

更新時(shí)間：2017年06月20日 09:24:05 作者：smile麗語(yǔ)

本篇文章主要介紹了iOS實(shí)現(xiàn)自定義起始時(shí)間選擇器視圖，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

隨著界面的整體效果的各種展現(xiàn), 起始時(shí)間選擇器的展現(xiàn)也需求突出!

最近項(xiàng)目中發(fā)現(xiàn)時(shí)間選擇器使用處還挺多, 數(shù)了數(shù)原型圖發(fā)現(xiàn)有6處. 便決定自定義時(shí)間選擇器視圖寫(xiě)個(gè) Demo, 封裝好在所需控制器里直接調(diào)用!

主要功能:

調(diào)起時(shí)間選擇器, 傳值(起始時(shí)間/截止時(shí)間), 兩者時(shí)間均要合理, 不能超過(guò)未來(lái)時(shí)間, 并且起始時(shí)間不能大于截止時(shí)間. 點(diǎn)擊取消或空白處收起時(shí)間選擇器.

如果需要可以根據(jù)自己的需求來(lái)修改界面, 效果如下:

主要步驟:

創(chuàng)建時(shí)間選擇器Picker 且確認(rèn)取消按鈕實(shí)現(xiàn)功能邏輯
創(chuàng)建展示時(shí)間菜單的按鈕視圖 (按鈕: 圖片在右,標(biāo)題在左的按鈕)
創(chuàng)建時(shí)間選擇器視圖且起始時(shí)間/截止時(shí)間邏輯判斷
使用代理傳值起始時(shí)間/截止時(shí)間(時(shí)間串轉(zhuǎn)換)

第一步. 創(chuàng)建時(shí)間選擇器Picker 且確認(rèn)取消按鈕實(shí)現(xiàn)功能邏輯

自定義ZLDatePickerView 文件:

@property (nonatomic, assign) id<ZLDatePickerViewDelegate> deleagte;
// 最初/小時(shí)間(一般為左邊值)
@property (nonatomic, strong) NSDate *minimumDate;
// 截止時(shí)間(一般為右邊值)
@property (nonatomic, strong) NSDate *maximumDate;
// 當(dāng)前選擇時(shí)間
@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 展現(xiàn)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];
}

起始時(shí)間/截止時(shí)間設(shè)值:

- (void)setMinimumDate:(NSDate *)minimumDate {
  self.datePicker.minimumDate = minimumDate;
}

- (void)setMaximumDate:(NSDate *)maximumDate {
  self.datePicker.maximumDate = maximumDate;
}

- (void)setDate:(NSDate *)date {
  self.datePicker.date = date;
}

確認(rèn)/取消按鈕實(shí)現(xiàn)功能邏輯:

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

第二步. 創(chuàng)建展示時(shí)間菜單的按鈕視圖 (按鈕: 圖片在右,標(biāo)題在左的按鈕)

這個(gè)可以根據(jù)需求來(lái),有些不需要這個(gè)按鈕圖片在右邊的,則沒(méi)必要添加.

自定義ZLOppositeButton文件:

- (void)layoutSubviews {
  [super layoutSubviews];

  CGFloat margin = 10;

  // 替換 title 和 image 的位置
  // 圖片在右,標(biāo)題在左
  // 由于 button 內(nèi)部的尺寸是自適應(yīng)的.調(diào)整尺寸即可
  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;
}

接著利用上面的按鈕創(chuàng)建一個(gè)展示時(shí)間菜單的按鈕視圖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"];
}

其中我們上傳時(shí)間一般都是字符串而不是時(shí)間戳, 則需要進(jìn)行轉(zhuǎn)換

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

第三步. 創(chuàng)建時(shí)間選擇器視圖且起始時(shí)間/截止時(shí)間邏輯判斷

利用第二步自定義的按鈕來(lái)自定義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>

/**
 * 時(shí)間選擇器視圖
 *
 * @param beginTime      起始時(shí)間/開(kāi)始時(shí)間
 * @param endTime       終止時(shí)間按/結(jié)束時(shí)間
 *
 */
- (void)timeView:(ZLTimeView *)timeView seletedDateBegin:(NSString *)beginTime end:(NSString *)endTime;

@end

使用第一步創(chuàng)建的時(shí)間選擇器Picker, 來(lái)進(jìn)行起始時(shí)間/截止時(shí)間邏輯判斷

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

第四步. 使用代理傳值起始時(shí)間/截止時(shí)間

在所需控制器里創(chuàng)建起始時(shí)間選擇器控件

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

  // 起始時(shí)間選擇器控件
  [self.view addSubview:self.timeView];

使用代理:

<ZLTimeViewDelegate>

#pragma mark - ZLTimeViewDelegate

- (void)timeView:(ZLTimeView *)timeView seletedDateBegin:(NSString *)beginTime end:(NSString *)endTime {
  // TODO: 進(jìn)行上傳時(shí)間段
}

當(dāng)多出使用時(shí),用起來(lái)是不是很方便, 這時(shí)候測(cè)試看下效果: