iOS學習——UIPickerView的實現年月選擇器

　　最近項目上需要用到一個選擇器，選擇器中的內容只有年和月，而在iOS系統自帶的日期選擇器UIDatePicker中卻只有四個選項如下，分別是時間（時分秒）、日期（年月日）、日期+時間（年月日時分）以及倒計時。其中並沒有我們所需要的只顯示年月的選擇器，在網上找了很多相關的資料，但是覺得都寫得過於麻煩。因此，為了滿足項目需求，自己用UIPickerView寫了一個只顯示年月的選擇器界面，同時還可以控制我們的顯示的最小時間。當然，如果要控制其他內容也都是可以的，無非就是在數據處理上多一些處理和控制。

typedef NS_ENUM(NSInteger, UIDatePickerMode) {
    UIDatePickerModeTime,           // Displays hour, minute, and optionally AM/PM designation depending on the locale setting (e.g. 6 | 53 | PM)
    UIDatePickerModeDate,           // Displays month, day, and year depending on the locale setting (e.g. November | 15 | 2007)
    UIDatePickerModeDateAndTime,    // Displays date, hour, minute, and optionally AM/PM designation depending on the locale setting (e.g. Wed Nov 15 | 6 | 53 | PM)
    UIDatePickerModeCountDownTimer, // Displays hour and minute (e.g. 1 | 53)
} __TVOS_PROHIBITED;

一 整體方案　

　　在整個實現中分為兩個部分，首先是用一個基類來布局我們選擇器的整體布局，包括我們的選擇器的標題，取消、確定按鈕，蒙層等大框架的布局，然后是子類在基類的基礎上添加UIPickerView來實現選擇器的基本功能以及數據加載和顯示。首先，我們來看一下整體的一個效果，點擊某個設定的控件，然后彈出下圖所示的一個選擇器，選擇器的選項主要就是顯年月的信息：

 

二 基類布局

　　在上一部分說了，基類布局主要是對整體的架構進行布局，我們先看下有哪些內容，包括了背景蒙層視圖、彈出視圖（包含標題行（又包含取消按鈕、確定按鈕和標題）、分割線和選擇器），在子類中會進行一個整體的布局，在 - (void)initUI 方法中進行布局。

//
//  BaseView.h

#import <UIKit/UIKit.h>

#define kDatePicHeight 200  //選擇器的高度
#define kTopViewHeight 44   //取消 標題 確定 行高度

#define SCREEN_BOUNDS [UIScreen mainScreen].bounds
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
@interface BaseView : UIView
// 背景蒙層視圖
@property (nonatomic, strong) UIView *backgroundView;
// 彈出視圖
@property (nonatomic, strong) UIView *alertView;
// 標題行頂部視圖
@property (nonatomic, strong) UIView *topView;
// 左邊取消按鈕
@property (nonatomic, strong) UIButton *leftBtn;
// 右邊確定按鈕
@property (nonatomic, strong) UIButton *rightBtn;
// 中間標題
@property (nonatomic, strong) UILabel *titleLabel;
// 分割線視圖
@property (nonatomic, strong) UIView *lineView;

/** 初始化子視圖 ，整體布局*/
- (void)initUI;

//以下三種方法在基類中的實現都是空白的，具體的效果在子類中重寫
/** 點擊背景遮罩圖層事件 */
- (void)didTapBackgroundView:(UITapGestureRecognizer *)sender;
/** 取消按鈕的點擊事件 */
- (void)clickLeftBtn;
/** 確定按鈕的點擊事件 */
- (void)clickRightBtn;

@end

　　具體的.m文件的實現代碼如下，進行折疊了，需要的可以直接拷貝，在后面我們再 進行具體分析每一步的布局和設置。

//
//  BaseView.m
//  CJMobile
//
//  Created by mukekeheart on 2017/12/12.
//  Copyright © 2017年 長江證券. All rights reserved.
//

#import "BaseView.h"

@implementation BaseView

- (void)initUI {
    self.frame = SCREEN_BOUNDS;
    // 背景遮罩圖層
    [self addSubview:self.backgroundView];
    // 彈出視圖
    [self addSubview:self.alertView];
    // 設置彈出視圖子視圖
    // 添加頂部標題欄
    [self.alertView addSubview:self.topView];
    // 添加左邊取消按鈕
    [self.topView addSubview:self.leftBtn];
    // 添加右邊確定按鈕
    [self.topView addSubview:self.rightBtn];
    // 添加中間標題按鈕
    [self.topView addSubview:self.titleLabel];
    // 添加分割線
    [self.topView addSubview:self.lineView];
}

#pragma mark - 背景遮罩圖層
- (UIView *)backgroundView {
    if (!_backgroundView) {
        _backgroundView = [[UIView alloc]initWithFrame:SCREEN_BOUNDS];
        _backgroundView.backgroundColor = [UIColor blackColor] ;
        _backgroundView.alpha = 0.3f ;
        _backgroundView.userInteractionEnabled = YES;
        UITapGestureRecognizer *myTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(didTapBackgroundView:)];
        [_backgroundView addGestureRecognizer:myTap];
    }
    return _backgroundView;
}

#pragma mark - 彈出視圖
- (UIView *)alertView {
    if (!_alertView) {
        _alertView = [[UIView alloc]initWithFrame:CGRectMake(0, SCREEN_HEIGHT - kTopViewHeight - kDatePicHeight, SCREEN_WIDTH, kTopViewHeight + kDatePicHeight)];
        _alertView.backgroundColor = [UIColor whiteColor];
    }
    return _alertView;
}

#pragma mark - 頂部標題欄視圖
- (UIView *)topView {
    if (!_topView) {
        _topView =[[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, kTopViewHeight + 0.5)];
        _topView.backgroundColor = [UIColor whiteColor];
    }
    return _topView;
}

#pragma mark - 左邊取消按鈕
- (UIButton *)leftBtn {
    if (!_leftBtn) {
        _leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _leftBtn.frame = CGRectMake(5, 8, 60, 28);
        _leftBtn.backgroundColor = [UIColor clearColor];
        _leftBtn.layer.masksToBounds = YES;
        _leftBtn.titleLabel.font = [UIFont systemFontOfSize:17.0f];
        [_leftBtn setTitleColor:kGrayFontColor forState:UIControlStateNormal];
        [_leftBtn setTitle:@"取消" forState:UIControlStateNormal];
        [_leftBtn addTarget:self action:@selector(clickLeftBtn) forControlEvents:UIControlEventTouchUpInside];
    }
    return _leftBtn;
}

#pragma mark - 右邊確定按鈕
- (UIButton *)rightBtn {
    if (!_rightBtn) {
        _rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _rightBtn.frame = CGRectMake(SCREEN_WIDTH - 65, 8, 60, 28);
        _rightBtn.backgroundColor = [UIColor clearColor];
        _rightBtn.layer.masksToBounds = YES;
        _rightBtn.titleLabel.font = [UIFont systemFontOfSize:17.0f];
        [_rightBtn setTitleColor:kBlueFontColor forState:UIControlStateNormal];
        [_rightBtn setTitle:@"確定" forState:UIControlStateNormal];
        [_rightBtn addTarget:self action:@selector(clickRightBtn) forControlEvents:UIControlEventTouchUpInside];
    }
    return _rightBtn;
}

#pragma mark - 中間標題按鈕
- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(65, 0, SCREEN_WIDTH - 130, kTopViewHeight)];
        _titleLabel.backgroundColor = [UIColor clearColor];
        _titleLabel.font = [UIFont systemFontOfSize:17.0f];
        _titleLabel.textColor = kBlackFontColor;
        _titleLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _titleLabel;
}

#pragma mark - 分割線
- (UIView *)lineView {
    if (!_lineView) {
        _lineView = [[UIView alloc]initWithFrame:CGRectMake(0, kTopViewHeight, SCREEN_WIDTH, 0.5)];
        _lineView.backgroundColor  = [UIColor colorWithRed:225 / 255.0 green:225 / 255.0 blue:225 / 255.0 alpha:1.0];
        [self.alertView addSubview:_lineView];
    }
    return _lineView;
}

#pragma mark - 點擊背景遮罩圖層事件
- (void)didTapBackgroundView:(UITapGestureRecognizer *)sender {
    
}

#pragma mark - 取消按鈕的點擊事件
- (void)clickLeftBtn {
    
}

#pragma mark - 確定按鈕的點擊事件
- (void)clickRightBtn {
    
}

@end

　　在BaseView.m中主要是對整體框架進行布局，我們的控件的位置都是通過絕對位置進行布局的，所以需要修改的在話可以直接在對應的位置上進行修改，然后在BaseView.h中的注釋我們說過了，點擊背景遮罩圖層和取消、確定按鈕的點擊事件實現效果在基類中都是空白的，具體效果在子類中進行重寫來控制。而對於彈出視圖中的標題行（包含取消按鈕、確定按鈕和標題）、分割線和選擇器的具體布局在這里就不進行展開了，很簡單的部分，大家自行看一下代碼就OK了。

　　下面主要提兩個問題：一個是整體布局的方法 - (void)initUI 的實現。這里大家主要要注意的添加的層次，誰是誰的子視圖，一定要區分清楚。

- (void)initUI {
    self.frame = SCREEN_BOUNDS;
    // 背景遮罩圖層
    [self addSubview:self.backgroundView];
    // 彈出視圖
    [self addSubview:self.alertView];
    // 設置彈出視圖子視圖
    // 添加頂部標題欄
    [self.alertView addSubview:self.topView];
    // 添加左邊取消按鈕
    [self.topView addSubview:self.leftBtn];
    // 添加右邊確定按鈕
    [self.topView addSubview:self.rightBtn];
    // 添加中間標題按鈕
    [self.topView addSubview:self.titleLabel];
    // 添加分割線
    [self.topView addSubview:self.lineView];
}

　　二是我們的背景蒙層和彈出視圖大家可以通過代碼看到蒙層遮罩背景的布局是整個屏幕，那么我們為什么不直接在蒙層上添加彈出式圖呢？如果直接在蒙層上添加彈出式圖作為子視圖的話，我們的布局相對會簡單很多，這里涉及到一點就是子視圖的透明度是和父視圖保持一致的，如果直接將彈出視圖加載到蒙層遮罩視圖上，會導致彈出視圖的透明度也為0.3，所以彈出視圖不能直接加在蒙層遮罩視圖上，而是需要加在當前界面上。

- (UIView *)backgroundView {
    if (!_backgroundView) {
        _backgroundView = [[UIView alloc]initWithFrame:SCREEN_BOUNDS];
        _backgroundView.backgroundColor = [UIColor blackColor] ;
        _backgroundView.alpha = 0.3f ;
        _backgroundView.userInteractionEnabled = YES;
        UITapGestureRecognizer *myTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(didTapBackgroundView:)];
        [_backgroundView addGestureRecognizer:myTap];
    }
    return _backgroundView;
}


    // 背景遮罩圖層
    [self addSubview:self.backgroundView];
    // 彈出視圖
    [self addSubview:self.alertView];

三 子類選擇器實現

　　首先是我們的子類向外暴露的方法只有一個類方法，該方法主要是讓使用者提供選擇器的標題、最小日期、日期選擇完成后的操作等基本信息，方便我們對選擇器的數據和操作進行設置。對外暴露類方法也是避免使用者在使用時需要創建對象，比較麻煩，也避免一些不必要的問題。

//
//  CJYearMonthSelectedView.h

#import <UIKit/UIKit.h>
#import "BaseView.h"

//日期選擇完成之后的操作
typedef void(^BRDateResultBlock)(NSString *selectValue);

@interface CJYearMonthSelectedView : BaseView

//對外開放的類方法
+ (void)showDatePickerWithTitle:(NSString *)title minDateStr:(NSString *)minDateStr resultBlock:(BRDateResultBlock)resultBlock;

@end

 　　關於具體的子類的實現，還是先把所有代碼都貼上來，有點多，所以折疊一下，后面對其中一些要點進行列出說明一下。還有取消、確定按鈕的點擊事件也都在這里進行控制和實現，我們根據自己的需要進行這是就可以了，一般是在點擊確定按鈕的時候調用我們的BRDateResultBlock，實現日期選擇完成的操作。其中取消按鈕就直接沒有操作，dismiss當前界面，並注意要進行dealloc，創建的視圖要清除，避免內存泄露。蒙層背景點擊事件看需求，有的需要和取消一樣的效果，有的可能就無效果，自己添加即可。

//  CJYearMonthSelectedView.m

#import "CJYearMonthSelectedView.h"

@interface CJYearMonthSelectedView () <UIPickerViewDelegate,UIPickerViewDataSource>
@property (strong, nonatomic) UIPickerView *picker;    //選擇器
@property (copy, nonatomic) NSString *title;
@property (copy, nonatomic) NSString *minDateStr;
@property (assign, nonatomic) BRDateResultBlock resultBlock;
@property (copy, nonatomic) NSString *selectValue;   //選擇的值 
@property (strong, nonatomic) NSMutableArray<NSString *> *data;

@end

@implementation CJYearMonthSelectedView

+ (void)showDatePickerWithTitle:(NSString *)title minDateStr:(NSString *)minDateStr resultBlock:(BRDateResultBlock)resultBlock{
    
    CJYearMonthSelectedView *datePicker = [[CJYearMonthSelectedView alloc] initWithTitle:title minDateStr:minDateStr resultBlock:resultBlock];
    [datePicker showWithAnimation:YES];
}

//初始化方法
- (instancetype)initWithTitle:(NSString *)title minDateStr:(NSString *)minDateStr resultBlock:(BRDateResultBlock)resultBlock{
    if (self = [super init]) {
        _title = title;
        _minDateStr = minDateStr;
        _resultBlock = resultBlock;
        
        [self initUI];
    }
    
    return self;
}

//UI布局，主要就是在彈出視圖上添加選擇器
- (void)initUI{
    [super initUI];
    self.titleLabel.text = _title;
    // 添加時間選擇器
    [self.alertView addSubview:self.picker];
}

//選擇器的初始化和布局
- (UIPickerView *)picker{
    if (!_picker) {
        _picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, kTopViewHeight + 0.5, SCREEN_WIDTH, kDatePicHeight)];
//        _picker.backgroundColor = [UIColor whiteColor];
        _picker.showsSelectionIndicator = YES;
        //設置代理
        _picker.delegate =self;
        _picker.dataSource =self;
    }
    return _picker;
}

//選擇器數據的加載，從設定的最小日期到當前月
- (NSMutableArray<NSString *> *)data{
    if (!_data) {
        _data = [[NSMutableArray alloc] init];
        NSDate *currentDate = [NSDate date];
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        [formatter setDateFormat:@"yyyy-MM"];
        NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
        NSDateComponents *lastMonthComps = [[NSDateComponents alloc] init];
        NSString *dateStr = [formatter stringFromDate:currentDate];
        NSInteger lastIndex = 0;
        NSDate *newdate;
        //循環獲取可選月份，從當前月份到最小月份
        while (!([dateStr compare:self.minDateStr] == NSOrderedAscending)) {
            [_data addObject:dateStr];
            lastIndex--;
            //獲取之前幾個月
            [lastMonthComps setMonth:lastIndex];
            newdate = [calendar dateByAddingComponents:lastMonthComps toDate:currentDate options:0];
            dateStr = [formatter stringFromDate:newdate];
        }
    }
    return _data;
}

#pragma mark - UIPickerView的數據和布局，和tableview類似
//返回多少列
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}

//返回多少行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return self.data.count;
}

//每一行的數據
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return self.data[row];
}

//選中時的效果
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    self.selectValue = self.data[row];
}

//返回高度
-(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
    return 35.0f;
}

//返回寬度
-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    return ZYAppWidth;
}

#pragma mark - 背景視圖的點擊事件
- (void)didTapBackgroundView:(UITapGestureRecognizer *)sender {
    //    [self dismissWithAnimation:NO];
}

#pragma mark - 彈出視圖方法
- (void)showWithAnimation:(BOOL)animation {
    //1. 獲取當前應用的主窗口
    UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
    [keyWindow addSubview:self];
    if (animation) {
        // 動畫前初始位置
        CGRect rect = self.alertView.frame;
        rect.origin.y = SCREEN_HEIGHT;
        self.alertView.frame = rect;
        // 浮現動畫
        [UIView animateWithDuration:0.3 animations:^{
            CGRect rect = self.alertView.frame;
            rect.origin.y -= kDatePicHeight + kTopViewHeight;
            self.alertView.frame = rect;
        }];
    }
}

#pragma mark - 關閉視圖方法
- (void)dismissWithAnimation:(BOOL)animation {
    // 關閉動畫
    [UIView animateWithDuration:0.2 animations:^{
        CGRect rect = self.alertView.frame;
        rect.origin.y += kDatePicHeight + kTopViewHeight;
        self.alertView.frame = rect;
        
        self.backgroundView.alpha = 0;
    } completion:^(BOOL finished) {
        [self.leftBtn removeFromSuperview];
        [self.rightBtn removeFromSuperview];
        [self.titleLabel removeFromSuperview];
        [self.lineView removeFromSuperview];
        [self.topView removeFromSuperview];
        [self.picker removeFromSuperview];
        [self.alertView removeFromSuperview];
        [self.backgroundView removeFromSuperview];
        [self removeFromSuperview];
        
        self.leftBtn = nil;
        self.rightBtn = nil;
        self.titleLabel = nil;
        self.lineView = nil;
        self.topView = nil;
        self.picker = nil;
        self.alertView = nil;
        self.backgroundView = nil;
    }];
}

#pragma mark - 取消按鈕的點擊事件
- (void)clickLeftBtn {
    [self dismissWithAnimation:YES];
}

#pragma mark - 確定按鈕的點擊事件
- (void)clickRightBtn {
    NSLog(@"點擊確定按鈕后，執行block回調");
    [self dismissWithAnimation:YES];
    if (_resultBlock) {
        _resultBlock(_selectValue);
    }
}

@end

　　這里面跟着流程看其實很簡單哈，主要需要說明的一點就是UIPickerView的用法，UIPickerView其實和UITableView很類似，在初始化的時候需要設置其數據代理和視圖代理（UIPickerViewDelegate，UIPickerViewDataSource），然后通過這兩個代理進內容、行數、列數的控制。

- (UIPickerView *)picker{
    if (!_picker) {
        _picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, kTopViewHeight + 0.5, SCREEN_WIDTH, kDatePicHeight)];
        _picker.showsSelectionIndicator = YES;
        //設置UIPickerView的代理
        _picker.delegate =self;
        _picker.dataSource =self;
    }
    return _picker;
}

#pragma mark - UIPickerView
//返回多少列
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}

//返回多少行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return self.data.count;
}

//每一行的數據
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return self.data[row];
}

//選中時的效果
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    self.selectValue = self.data[row];
}

//返回高度
-(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
    return 35.0f;
}

//返回寬度
-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    return ZYAppWidth;
}

　　關於數據的控制可以根據我們的需要進行設定，行數和列數也是根據我們的需求來進行控制。下面主要就是說一下如何獲取年月這樣的數據，主要是用到了NSDateComponents 的直接獲取一個月前的信息，然后通過將NSCalendar將NSDateComponents轉化為日期Date，最后將Date轉化為我們需要的格式的數據。

//數據獲取
- (NSMutableArray<NSString *> *)data{
    if (!_data) {
        _data = [[NSMutableArray alloc] init];
        //當前日期時間
        NSDate *currentDate = [NSDate date];
        //設定數據格式為xxxx-mm
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        [formatter setDateFormat:@"yyyy-MM"];
        //通過日歷可以直接獲取前幾個月的日期，所以這里直接用該類的方法進行循環獲取數據
        NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
        NSDateComponents *lastMonthComps = [[NSDateComponents alloc] init];
        NSString *dateStr = [formatter stringFromDate:currentDate];
        NSInteger lastIndex = 0;
        NSDate *newdate;
        //循環獲取可選月份，從當前月份到最小月份，直接用字符串的比較來判斷是否大於設定的最小日期
        while (!([dateStr compare:self.minDateStr] == NSOrderedAscending)) {
            [_data addObject:dateStr];
            lastIndex--;
            //獲取之前n個月, setMonth的參數為正則向后，為負則表示之前
            [lastMonthComps setMonth:lastIndex];
            newdate = [calendar dateByAddingComponents:lastMonthComps toDate:currentDate options:0];
            dateStr = [formatter stringFromDate:newdate];
        }
    }
    return _data;
}

 四 使用方法

　　關於自己做的這個在使用上就非常簡單了，我們的子類向外就暴露了一個類方法，所以我們再需要彈出選擇器的地方調用該方法就可以了。

- (void) btnPress:(UIButton *)sender{
    if (sender.tag == 200) { //導出 按鈕
        [CJYearMonthSelectedView showDatePickerWithTitle:@"選擇月份" minDateStr:@"2017-10" resultBlock:^(NSString *selectValue) {
            //選擇完成后的操作
            NSLog(@"selected month is %@", selectValue);
        }];
    } else {
        
    }
}

 　　以上就是使用UIPickerView自定義一個年月的選擇器，包括最初的的完整的界面代碼和具體的選擇器的創建和布局，以及我們的數據處理。