iOS實現自定義起始時間選擇器視圖
更新時間：2017年06月20日 09:24:05 作者：smile麗語
本篇文章主要介紹了iOS實現自定義起始時間選擇器視圖，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
隨著界面的整體效果的各種展現, 起始時間選擇器的展現也需求突出!
最近項目中發(fā)現時間選擇器使用處還挺多, 數了數原型圖發(fā)現有6處. 便決定自定義時間選擇器視圖寫個 Demo, 封裝好在所需控制器里直接調用!
主要功能:
調起時間選擇器, 傳值(起始時間/截止時間), 兩者時間均要合理, 不能超過未來時間, 并且起始時間不能大于截止時間. 點擊取消或空白處收起時間選擇器.
如果需要可以根據自己的需求來修改界面, 效果如下:
主要步驟:
- 創(chuàng)建時間選擇器Picker 且確認取消按鈕實現功能邏輯
- 創(chuàng)建展示時間菜單的按鈕視圖 (按鈕: 圖片在右,標題在左的按鈕)
- 創(chuàng)建時間選擇器視圖 且 起始時間/截止時間邏輯判斷
- 使用代理傳值起始時間/截止時間(時間串轉換)
第一步. 創(chuàng)建時間選擇器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];
}
}
第二步. 創(chuàng)建展示時間菜單的按鈕視圖 (按鈕: 圖片在右,標題在左的按鈕)
這個可以根據需求來,有些不需要這個按鈕圖片在右邊的,則沒必要添加.
自定義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;
}
接著利用上面的按鈕創(chuàng)建一個展示時間菜單的按鈕視圖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];
}
第三步. 創(chuàng)建時間選擇器視圖 且 起始時間/截止時間邏輯判斷
利用第二步自定義的按鈕來自定義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
使用第一步創(chuàng)建的時間選擇器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];
}
}
第四步. 使用代理傳值起始時間/截止時間
在所需控制器里創(chuàng)建起始時間選擇器控件
#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實現自定義起始時間選擇器視圖就給大家介紹到這里了。希望大家繼續(xù)關注我們的網站!想要學習iOS可以繼續(xù)關注本站。
相關文章
這篇文章主要為大家詳細介紹了iOS框架AVFoundation實現相機拍照、錄制視頻功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
本篇文章主要介紹了iOS開發(fā)仿電商類APP首頁實例，主要是利用ui布局，具有一定的參考價值，有需要的可以了解一下。2016-11-11
Objective-C 經典字典數組排序 - 省市區(qū)
本文主要介紹Objective-C 字典數組排序，這里整理相關資料及實現示例代碼，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了IOS 自定義UIPickView詳解及實例代碼的相關資料,這里寫個小實例及效果圖，附有實例代碼，需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了關于iOS實現啟動引導頁與指紋解鎖的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-02-02
之前小編有和大家分享過一篇關于從相冊選取單張照片的文章，那么下面這篇文章跟大家分享下如何相冊多圖選擇和刪除，以及包括拍照功能，有需要的可以參考學習，下面來一起看看吧。2016-09-09
iOS開發(fā)檢測是否開啟定位、是否允許消息推送等權限的實例
下面小編就為大家分享一篇iOS開發(fā)檢測是否開啟定位、是否允許消息推送等權限的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了iOS 中weak的實現代碼示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了iOS開發(fā)之AssetsLibrary框架使用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于iOS Xcode匯編模式切換的相關資料，文中通過圖文介紹的非常非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-06-06