iOS开发系列之常用自定义控件开发集—自定义UIDatePicker控件开发

在实际开发过程中经常需要用到日期选择控件，而单纯的使用系统UIDatePicker不美观且用户体验不佳，所以我们需要手动的去包装系统的UIDatePicker控件，包装方式如下：
WHC_DatePicker2.h头文件如下：

//
//  WHC_DatePick2.h
//  CTBMobileBank
//
//  Created by 吴海超 on 15/3/31.
//
//

#import <UIKit/UIKit.h>

@class WHC_DatePicker2;
@protocol  WHC_DatePicker2Delegate<NSObject>
- (void)whcDatePicker2:(WHC_DatePicker2*)pv date:(NSDate*)date;
@end

@interface WHC_DatePicker2 : UIView
- (instancetype)initWithTitle:(NSString*)title delegate:(id<WHC_DatePicker2Delegate>)delegate;
- 

- (void)showWithVC:(UIViewController*)vc;
@end

WHC_DatePicker2.m源文件如下：

//
//  WHC_DatePick2.m
//  CTBMobileBank
//
//  Created by 吴海超 on 15/3/31.
//
//

#import "WHC_DatePicker2.h"
#define KWHC_TITLEVIEW_HEIGHT (40.0)                              //标题view高度
#define KWHC_PICKERVIEW_HEIGHT (216.0 - KWHC_TITLEVIEW_HEIGHT)    //datePicker高度
@interface WHC_DatePicker2 (){
    id<WHC_DatePicker2Delegate> _delegate;              //代理
    UIDatePicker   *          _datePicker;              //日期控件
    UIView                  * _backView;                //阴影层view
    NSString                * _title;                   //标题
    NSDate                  * _resultDate;              //存放结果
    CGRect                    _vcRect;                  //关联控制器的矩形区域
    UIDatePickerMode          _mode;                    //日期控件显示模式
}

@end

@implementation WHC_DatePicker2

//默认初始化
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self != nil){
        [self initLayout];
    }
    return self;
}

//初始化标题和代理默认日期显示模式
- (instancetype)initWithTitle:(NSString*)title delegate:(id<WHC_DatePicker2Delegate>)delegate{
    return [self initWithTitle:title delegate:delegate mode:UIDatePickerModeDate];
}

//初始化标题代理和日期显示模式
- (instancetype)initWithTitle:(NSString*)title delegate:(id<WHC_DatePicker2Delegate>)delegate mode:(UIDatePickerMode)mode{
    _title = title;
    _delegate = delegate;
    _mode = mode;
    if(_title == nil){
        _title = @"";
    }
    CGSize  screenSize = [UIScreen mainScreen].bounds.size;
    return [self initWithFrame:CGRectMake(0.0,0.0,screenSize.width,screenSize.height)];
}

//初始化布局
- (void)initLayout{

    CGSize  screenSize = [UIScreen mainScreen].bounds.size;
    UIView  * modeView = [[UIView alloc]initWithFrame:self.bounds];
    modeView.backgroundColor = [UIColor blackColor];
    modeView.userInteractionEnabled = NO;
    modeView.alpha = 0.5;
    [self addSubview:modeView];

    _backView = [[UIView alloc]initWithFrame:CGRectMake(0.0, screenSize.height, screenSize.width, KWHC_PICKERVIEW_HEIGHT + KWHC_TITLEVIEW_HEIGHT)];
    _backView.backgroundColor = [UIColor whiteColor];
    [self addSubview:_backView];

    [_backView addSubview:[self titleView:CGRectMake(0.0, 0.0, screenSize.width, KWHC_TITLEVIEW_HEIGHT) title:_title]];

    UIDatePicker * dataPicker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0.0, KWHC_TITLEVIEW_HEIGHT, screenSize.width, KWHC_PICKERVIEW_HEIGHT)];
    dataPicker.backgroundColor = [UIColor whiteColor];
    dataPicker.locale = [[NSLocale alloc] initWithLocaleIdentifier:@"zh_CN"];;
    dataPicker.datePickerMode = _mode;
    [dataPicker setDate:[NSDate date] animated:YES];
    [dataPicker addTarget:self action:@selector(changeDatePicker:) forControlEvents:UIControlEventValueChanged];
    [_backView addSubview:dataPicker];
}

//以动画的方式加载日期控件
- (void)loadShowAnimation:(BOOL)isShow action:(SEL)selector{
    CGRect rc = _backView.frame;
    if(isShow){
        rc.origin.y = CGRectGetHeight(self.bounds) - rc.size.height;
    }else{
        rc.origin.y = CGRectGetHeight(self.bounds);
    }
    __weak typeof(WHC_DatePicker2) *sf = self;
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    [UIView animateWithDuration:0.3 animations:^{
        _backView.frame = rc;
    } completion:^(BOOL finished) {
        if(selector != nil){
            [sf stopLoadAnimation];
        }
    }];
}

//创建按钮
- (UIButton*)createBtn:(CGRect)frame title:(NSString*)title sel:(SEL)selector{
    UIButton  * btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = frame;
    [btn setTitle:title forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
    [btn addTarget:self action:selector forControlEvents:UIControlEventTouchUpInside];
    btn.backgroundColor = [UIColor clearColor];
    return btn;
}

//创建标题view
- (UIView*)titleView:(CGRect)frame title:(NSString*)title{
    UIView  * view = [[UIView alloc]initWithFrame:frame];
    view.backgroundColor = [UIColor grayColor];
    UIButton * cancelBtn = [self createBtn:CGRectMake(0.0, 0.0, 60.0, CGRectGetHeight(frame)) title:@"取消" sel:@selector(clickCancelBtn:)];
    [view addSubview:cancelBtn];

    UILabel  * titleLab = [[UILabel alloc]initWithFrame:CGRectMake(60.0, 0.0, CGRectGetWidth(frame) - 120.0, CGRectGetHeight(frame))];
    titleLab.backgroundColor = [UIColor clearColor];
    titleLab.textAlignment = NSTextAlignmentCenter;
    titleLab.textColor = [UIColor whiteColor];
    titleLab.text = title;
    [view addSubview:titleLab];

    UIButton * okBtn = [self createBtn:CGRectMake(CGRectGetWidth(frame) - 60.0, 0.0, 60.0, CGRectGetHeight(frame)) title:@"确定" sel:@selector(clickOKBtn:)];
    [view addSubview:okBtn];
    return view;
}

//显示日期控件到关联的控制器上
- (void)showWithVC:(UIViewController*)vc{
    _vcRect = vc.view.frame;
    self.frame = vc.view.bounds;
    [vc.view addSubview:self];
    [self loadShowAnimation:YES action:nil];
}

- (void)stopLoadAnimation{
    [self removeFromSuperview];
}
#pragma mark - clickAction

- (void)clickCancelBtn:(UIButton*)sender{
    [self loadShowAnimation:NO action:@selector(stopLoadAnimation)];
}

- (void)clickOKBtn:(UIButton*)sender{
    if(_delegate && [_delegate respondsToSelector:@selector(whcDatePicker2:date:)]){
        [_delegate whcDatePicker2:self date:_resultDate];
    }
    [self loadShowAnimation:NO action:@selector(stopLoadAnimation)];
}

- (void)changeDatePicker:(UIDatePicker *)dp{
    _resultDate = dp.date;
}


@end

WHC_DatePickerDemo下载