由于項(xiàng)目中要用到時(shí)間的選擇,但是自帶的datePicker感覺有點(diǎn)丑笛丙,并且它是不支持編輯的,所以我用UIPickerView做了日期選擇器和時(shí)間選擇器
在字體方面參考了網(wǎng)上的資料
效果圖如下:
picker.gif
- 制作思路其實(shí)很簡(jiǎn)單,日期選擇器和時(shí)間選擇器都是一個(gè)獨(dú)立的UIViewController瓷胧,如下圖:
屏幕快照 2016-11-16 下午6.08.17.png
- 以日期選擇器為例趟庄,xib文件如下:
屏幕快照 2016-11-16 下午6.15.17.png
- 隨后將所有要操作的組件連線進(jìn)控制器
- 創(chuàng)建數(shù)組赚窃,用于存儲(chǔ)年份,月份岔激,天數(shù)勒极,其中天數(shù)會(huì)根據(jù)年份和天數(shù)變化,需要單獨(dú)創(chuàng)建一個(gè)方法計(jì)算
- 初始化UIPickerView并且設(shè)置dataSource和delegate都是self
- 實(shí)現(xiàn)UIPickerView的數(shù)據(jù)源方法和代理方法
- 設(shè)置控制器的代理虑鼎,讓外界控制器實(shí)現(xiàn)按鈕事件
- myDatePickerView.h
#import <UIKit/UIKit.h>
@protocol myDatePickerViewDelegate <NSObject>
@optional -(void)pressBackBtn;
@optional -(void)pressEnterBtn;
@end
@interface myDatePickerView : UIViewController
@property (nonatomic,strong) id<myDatePickerViewDelegate> delegate;
//包裹控件的view辱匿,與self.view上下左右保持著5dp
@property (weak, nonatomic) IBOutlet UIView *ParentView;
//我們的主角,pickerView
@property (strong, nonatomic) IBOutlet UIPickerView *pickerView;
//這三個(gè)參數(shù)放在外面炫彩,可供外界調(diào)用
@property (nonatomic,strong) NSString *year;
@property (nonatomic,strong) NSString *month;
@property (nonatomic,strong) NSString *day;
//創(chuàng)建一個(gè)將年月日組合起來的NSString匾七,并返回
-(NSString *)getDateForMyMode;
@end
- myDatePickerView.m
#import "myDatePickerView.h"
@interface myDatePickerView ()<UIPickerViewDelegate,UIPickerViewDataSource>
@property (weak, nonatomic) IBOutlet UIButton *backBtn;
@property (weak, nonatomic) IBOutlet UIButton *enterBtn;
@property (weak, nonatomic) IBOutlet UILabel *DialogTitle;
//保存年月日數(shù)據(jù)的array
@property (nonatomic,strong) NSMutableArray *yearArray;
@property (nonatomic,strong) NSMutableArray *monthArray;
@property (nonatomic,strong) NSMutableArray *dayArray;
//選中的當(dāng)前行
@property (nonatomic,assign) int selectedRowYear;
@property (nonatomic,assign) int selectedRowMonth;
@property (nonatomic,assign) int selectedRowDay;
////當(dāng)前選中的列
//@property (nonatomic,assign) int selectComponent;
//每個(gè)月的天數(shù)
@property (nonatomic,assign) int dayNumber;
//應(yīng)該跟新天數(shù)了,當(dāng)月份或年份被選擇過或是剛進(jìn)入為true,需要刷新day
@property (nonatomic,assign) Boolean dayShouldChangeEnable;
@end
@implementation myDatePickerView
//pickerView的懶加載
-(UIPickerView *)pickerView{
if(!_pickerView){
_pickerView = [[UIPickerView alloc] init];
}
return _pickerView;
}
//年份的懶加載
-(NSMutableArray *)yearArray{
if(!_yearArray){
_yearArray = [NSMutableArray array];
//此處設(shè)置年份江兢,固定的昨忆,當(dāng)然你也可以提取出來,設(shè)為可變的
for (int index=2013; index<=2050; index++) {
[_yearArray addObject:[@(index) stringValue]];
}
}
return _yearArray;
}
//根據(jù)傳遞進(jìn)入的dayNumber計(jì)算dayArray
-(void)setDaysForMonth:(int) dayNumber{
self.dayArray = nil;
self.dayArray = [NSMutableArray array];
for (int index=1; index<=_dayNumber; index++) {
[_dayArray addObject:[@(index) stringValue]];
}
}
//月份的懶加載
-(NSMutableArray *)monthArray{
if(!_monthArray){
_monthArray = [NSMutableArray array];
for (int index=1; index<=12; index++) {
[_monthArray addObject:[@(index) stringValue]];
}
}
return _monthArray;
}
//獲取當(dāng)期的年月日杉允,并且初始化pickView邑贴,及一些其他參數(shù)
-(void)getDateOfThisMonment{
//獲取當(dāng)前的年月日
NSCalendar *calendar = [NSCalendar currentCalendar];
NSUInteger unitFlags = NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay;
NSDateComponents *dateComponent = [calendar components:unitFlags fromDate:[NSDate date]];
int year = (int)[dateComponent year];
int month = (int)[dateComponent month];
int day = (int)[dateComponent day];
//我根據(jù)月份和年份計(jì)算天數(shù)
[self calculateDayWithMonth:month andYear:year];
//設(shè)置dataSource和delegate
self.pickerView.dataSource = self;
self.pickerView.delegate = self;
NSLog(@"%i,%i,%i",year,month,day);
self.selectedRowYear = (year-2013);
self.selectedRowMonth = (month -1);
self.selectedRowDay = (day-1);
//根據(jù)現(xiàn)在的年份和月份,初始化pickerView
[self.pickerView selectRow:_selectedRowYear inComponent:0 animated:YES];
[self.pickerView selectRow:_selectedRowMonth inComponent:1 animated:YES];
[self.pickerView selectRow:_selectedRowDay inComponent:2 animated:YES];
//將目前的日期賦值給公共參數(shù)叔磷,以便外面調(diào)用
self.year = [@(year) stringValue];
self.month = [@(month) stringValue];
self.day = [@(day) stringValue];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.view.alpha = 0.0f;
//獲取當(dāng)前的年月日拢驾,并且初始化
[self getDateOfThisMonment];
//邊角弧度設(shè)置
[[self.view layer] setCornerRadius:15.0];
self.DialogTitle.text = @"日期選擇器";
[self.backBtn setTitle:@"后退" forState:UIControlStateNormal];
[self.enterBtn setTitle:@"確定" forState:UIControlStateNormal];
//綁定按鈕事件
[self.backBtn addTarget:self action:@selector(backClick) forControlEvents:UIControlEventTouchUpInside];
[self.enterBtn addTarget:self action:@selector(enterClick) forControlEvents:UIControlEventTouchUpInside];
self.dayShouldChangeEnable= false;
}
//按下后退按鍵
-(void)backClick{
[self.delegate pressBackBtn];
}
//按下確定按鍵
-(void)enterClick{
[self.delegate pressEnterBtn];
}
/*********************數(shù)據(jù)源方法**********************/
//返回的是pickerView有多少列
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 3; // 年份、月份改基、天
}
//表明pickerView每列的行數(shù)
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
if(component == 0){ //年份行數(shù)
return self.yearArray.count;
}
else if(component == 1){ //月份行數(shù)
return self.monthArray.count;
}
else{ //天行數(shù)
return self.dayArray.count;
}
}
/*********************數(shù)據(jù)源方法**********************/
/*********************代理方法**********************/
//第row行的標(biāo)題
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
if (component ==0) { //年份第row行標(biāo)題
return [NSString stringWithFormat:@"%@年",[self.yearArray objectAtIndex:row]];
}else if(component == 1){ //月份第row行標(biāo)題
return [NSString stringWithFormat:@"%@月",[self.monthArray objectAtIndex:row]];
}else{ //天數(shù)第row行標(biāo)題
return [NSString stringWithFormat:@"%@日",[self.dayArray objectAtIndex:row]];
}
}
/*
監(jiān)聽用戶選中第component列的第row行繁疤,在這個(gè)之中,讀取被選中的年月日
因?yàn)槟攴莺驮路莶煌跽鞌?shù)都會(huì)時(shí)時(shí)改變稠腊,所以設(shè)置_dayShouldChangeEnable參數(shù)
表示當(dāng)年份和月份改變時(shí),重新計(jì)算天數(shù)鸣哀,這里有點(diǎn)缺陷架忌,就是可能存在重復(fù)計(jì)算天數(shù)的情況,影響效率
*/
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
//NSLog(@"month = %@,year=%@",);
if(component == 0){
//當(dāng)用戶更改年份的時(shí)候诺舔,為防止閏年和非閏年對(duì)2月份天數(shù)的影響鳖昌,_dayShouldChangeEnable = true表明需要重新計(jì)算對(duì)應(yīng)月份的天數(shù)
_dayShouldChangeEnable = true;
self.year = _yearArray[row];//將選中的月份數(shù)賦值給公共的年份參數(shù)备畦,以便外面調(diào)用
self.selectedRowYear = (int)row; //將row賦值給
[pickerView reloadComponent:0]; //為了選中的row變顏色,需要刷新整行
}
else if(component==1){
//當(dāng)用戶更改月份的時(shí)候许昨,_dayShouldChangeEnable = true表明需要重新計(jì)算天數(shù)
_dayShouldChangeEnable = true;
self.month = _monthArray[row]; //將選中的月份數(shù)賦值給公共的月份參數(shù)懂盐,以便外面調(diào)用
self.selectedRowMonth = (int)row;
[pickerView reloadComponent:1];
}
else{
self.day = _dayArray[row];//將選中的天數(shù)賦值給公共的天數(shù)參數(shù),以便外面調(diào)用
NSLog(@"---------->>>>2");
self.selectedRowDay = (int)row;
[pickerView reloadComponent:2];
}
if(_dayShouldChangeEnable) //若糕档,天數(shù)需要更新莉恼,那么執(zhí)行
{
//調(diào)用計(jì)算天數(shù)的函數(shù)
[self calculateDayWithMonth:[self.month intValue] andYear:[self.year intValue]];
//由于更新的時(shí)候self.selectRowDay很可能大于 天數(shù)的最大值,比如self.selectRowDay為31速那,而天數(shù)最大值切換至了29俐银,所以若超出,則需要將selectRowDay重新賦值
if(self.selectedRowDay > _dayNumber-1){
self.selectedRowDay = _dayNumber-1;
NSLog(@"---------->>>>>%zi<<<<<<",self.selectedRowDay);
}
//重新對(duì)天數(shù)的那一列進(jìn)行更新
[pickerView reloadComponent:2];
//false
_dayShouldChangeEnable = false;
}
}
//選中的項(xiàng)目變成綠色
-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
UILabel* Label = (UILabel*)view;
if (!Label){
Label = [[UILabel alloc] init];
Label.minimumScaleFactor = 8;
Label.adjustsFontSizeToFitWidth = YES;
[Label setTextAlignment:NSTextAlignmentCenter];
[Label setFont:[UIFont systemFontOfSize:15]];
//當(dāng)年份列端仰,被選中的行對(duì)應(yīng)變成綠色
if (component==0&&_selectedRowYear==row) {
Label.textColor=[UIColor greenColor];
}else if (component==1&&_selectedRowMonth==row){
Label.textColor= [UIColor greenColor];
}else if(component==2&&_selectedRowDay==row){
Label.textColor= [UIColor greenColor];
}
}
Label.text=[self pickerView:pickerView titleForRow:row forComponent:component];
return Label;
}
/*********************代理方法**********************/
//根據(jù)month和year計(jì)算對(duì)應(yīng)的天數(shù)
-(void)calculateDayWithMonth:(int) month andYear:(int) year{
float yearF = [self.year floatValue]/4; //能被4整除的是閏年
float yearI = (int)yearF; //若yearI和yearF不一樣捶惜,也就是說沒有被整除,則不是閏年
//當(dāng)然以上計(jì)算沒有包括:能被100整除荔烧,但不能被400整除的吱七,不是閏年,因?yàn)?000年已過2100年還遠(yuǎn)....
switch (month) {
case 1:_dayNumber = 31; break;
case 2:
if(yearF != yearI){_dayNumber = 28;}else{
_dayNumber = 29;}break;
case 3:_dayNumber = 31;break;
case 4:_dayNumber = 30;break;
case 5:_dayNumber = 31;break;
case 6:_dayNumber = 30;break;
case 7:_dayNumber = 31;break;
case 8:_dayNumber = 31;break;
case 9:_dayNumber = 30;break;
case 10:_dayNumber = 31;break;
case 11:_dayNumber = 30;break;
case 12:_dayNumber = 31;break;
default:_dayNumber = 31;break;
}
[self setDaysForMonth:_dayNumber]; //此處調(diào)用函數(shù)鹤竭,將dayArray重新賦值踊餐;
}
//將日期格式轉(zhuǎn)化為2016-01-01這種格式
-(NSString *)getDateForMyMode{
NSString *myMonth = @"";
NSString *myDay = @"";
if([self.month intValue] < 10){
myMonth = [NSString stringWithFormat:@"0%@",self.month];
}else{
myMonth = [NSString stringWithFormat:@"%@",self.month];
}
if([self.day intValue] <10){
myDay = [NSString stringWithFormat:@"0%@",self.day];
}else{
myDay = [NSString stringWithFormat:@"%@",self.day];
}
return [NSString stringWithFormat:@"%@-%@-%@",self.year,myMonth,myDay];
}
-(void)dealloc{
NSLog(@"myDatePickerView dealloc");
}
@end
myTimePickerView.h和myTimePickerView.m類似,這里就不貼了....
最后來看下主控制器臀稚,值得注意的是我創(chuàng)建了一個(gè)coverView吝岭,用來在日期(時(shí)間)選擇器彈出的時(shí)候,覆蓋主控制器的view吧寺,讓用戶無法在彈出狀態(tài)按到主控制器的view中的按鈕窜管,由于ViewController.h中啥都沒有,所以只貼ViewController.m
ViewController.m :
#import "ViewController.h"
#import "myDatePickerDialog.h"
#import "myDatePickerView.h"
#import "myTimePickerView.h"
@interface ViewController ()<myDatePickerViewDelegate,myTimePickerViewDelegate>
@property (nonatomic,strong) myDatePickerDialog *datePickerDialog;
@property (nonatomic,strong) myDatePickerView *datePickerView;
@property (nonatomic,strong) myTimePickerView *timePickerView;
@property (weak, nonatomic) IBOutlet UIButton *setDate;
@property (weak, nonatomic) IBOutlet UIButton *setTime;
//遮蓋view
@property (nonatomic,strong) UIView *coverView;
@end
@implementation ViewController
//使用datePickerDialog 懶加載撮执,沒用到
-(myDatePickerDialog *)datePickerDialog{
if(!_datePickerDialog){
self.datePickerDialog = [[myDatePickerDialog alloc] init];
}
return _datePickerDialog;
}
-(UIView *)coverView{
if(!_coverView){
_coverView = [[UIView alloc] initWithFrame:self.view.frame];
_coverView.backgroundColor = [UIColor blackColor];
_coverView.alpha = 0.3;
}
return _coverView;
}
//日期選擇器懶加載
-(myDatePickerView *)datePickerView{
if(!_datePickerView){
self.datePickerView = [[myDatePickerView alloc] init];
self.datePickerView.delegate = self;
}
return _datePickerView;
}
//時(shí)間選擇器懶加載
-(myTimePickerView *)timePickerView{
if(!_timePickerView){
_timePickerView = [[myTimePickerView alloc] init];
_timePickerView.delegate = self;
}
return _timePickerView;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//使用datePicker第一步微峰,設(shè)置datePickerMode,默認(rèn)狀態(tài)下是UIDatePickerModeDateAndTime
// self.datePicker.datePickerMode = UIDatePickerModeDateAndTime;
//第二步,設(shè)置其他細(xì)節(jié)問題抒钱,入最早時(shí)間,最遲時(shí)間等等颜凯,目前沒有設(shè)置谋币,跳骨
[self.setDate addTarget:self action:@selector(showDateView) forControlEvents:UIControlEventTouchUpInside];
[self.setTime addTarget:self action:@selector(showTimeView) forControlEvents:UIControlEventTouchUpInside];
}
//顯示日期選擇器
-(void)showDateView{
CGRect tmp = self.datePickerView.view.frame;
CGFloat xView = self.view.center.x;
CGFloat yView = self.view.center.y;
tmp.origin.x = xView - self.datePickerView.view.frame.size.width/2;
tmp.origin.y = yView - self.datePickerView.view.frame.size.height/2;
_datePickerView.view.frame = tmp;
[UIView animateWithDuration:0.5 animations:^{
self.datePickerView.view.alpha = 1.0;
}];
[self.view addSubview:self.coverView];
[self.view addSubview:self.datePickerView.view];
}
//顯示時(shí)間選擇器
-(void)showTimeView{
CGRect tmp = self.timePickerView.view.frame;
CGFloat xView = self.view.center.x;
CGFloat yView = self.view.center.y;
tmp.origin.x = xView - self.timePickerView.view.frame.size.width/2;
tmp.origin.y = yView - self.timePickerView.view.frame.size.height/2;
_timePickerView.view.frame = tmp;
[UIView animateWithDuration:0.5 animations:^{
self.timePickerView.view.alpha = 1.0;
}];
[self.view addSubview:self.coverView];
[self.view addSubview:self.timePickerView.view];
}
/***********myDatePickerView的代理**********/
- (void)pressEnterBtn{
[self.setDate setTitle:[self.datePickerView getDateForMyMode] forState:UIControlStateNormal];
[UIView animateWithDuration:0.5 animations:^{
[self.coverView removeFromSuperview];
self.datePickerView.view.alpha = 0.0;
} completion:^(BOOL finished) {
[self.datePickerView.view removeFromSuperview];
//[self.coverView removeFromSuperview];
}];
//self.datePickerView = nil;
}
-(void)pressBackBtn{
[UIView animateWithDuration:0.5 animations:^{
self.datePickerView.view.alpha = 0.0;
[self.coverView removeFromSuperview];
} completion:^(BOOL finished) {
[self.datePickerView.view removeFromSuperview];
//[self.coverView removeFromSuperview];
}];
//self.datePickerView = nil;
}
/***********myDatePickerView的代理**********/
/***********myTimePickerView的代理**********/
- (void)pressEnterBtn_time{
[self.setTime setTitle:[self.timePickerView getTimeForMyMode] forState:UIControlStateNormal];
[UIView animateWithDuration:0.5 animations:^{
self.timePickerView.view.alpha = 0.0;
[self.coverView removeFromSuperview];
} completion:^(BOOL finished) {
[self.timePickerView.view removeFromSuperview];
//[self.coverView removeFromSuperview];
}];
//self.datePickerView = nil;
}
-(void)pressBackBtn_time{
[UIView animateWithDuration:0.5 animations:^{
[self.coverView removeFromSuperview];
self.timePickerView.view.alpha = 0.0;
} completion:^(BOOL finished) {
[self.timePickerView.view removeFromSuperview];
}];
//self.datePickerView = nil;
}
/***********myTimePickerView的代理**********/
@end