iOS - 自定义一个日期选择器

背景

我太难了... 放张图片吐槽一下


吐槽吐槽.png

由于系统没有提供底色修改的方法和属性。我尝试通过一层层subview拿到子视图，根据kvc修改他的属性，发现不能直接修改选中行的颜色。我修改的是所有行的颜色。网上查询也没有找到有效的解决方案。于是决定放弃使用系统提供的pickerView，自己实现一个

思路

这个选择器可分为：

  1. 上面的关闭+确定按钮+分割线
  2. 中间的浅蓝色选中行
  3. 三个可滑动的选择控件
    这个滑动的视图我们可以使用系统提供的tableView实现。

tableView实现的注意点：

  1. 首先控制它的滑动事件。让他的cell能够居中的显示在选中行里面（滑动偏移量为行高的整数倍）。
  2. 其次，我们要关联他们之间的联动。1、3、5、7、8、10、12月有31天。4、6、9、11月有30天。闰年2月29天，平年2月28天。
  3. 然后提供一个默认事件选中方法。在没有时间传入的时候，默认选中的是当天的时间。有时间传入的时候，选中的是传入的时间。
  4. 最后，点击submit按钮的时候，需要告诉外部它当前选中的时间是多少。

还有一些小细节需要注意。
tableView的visibleCell是三行，我们可以通过布局实现它；
tableView的第0行和最后一行不能显示在选中行上面，我们需要在最上面和最下面给加一行。如图：


分析图.png

实现

简单的说一下。


文件层级.png
  • ZDBPickerManager：全局单例，方便使用者调用。
  • ZDBPickerView：整个picker弹框，包括按钮
  • ZDBPickerColumnView：上文中提及的tableView，也就是picker中的联动行。
  • ZDBPickerCellView：cell

我们从下到上一一捋一遍。

ZDBPickerCellView

ZDBPickerCellView部分就是简单的一个titleLabel。文字的对齐方式是居中。用来显示数据。

ZDBPickerColumnView

由于数据源是可变的（每月的天数不固定），所以我们要提供一个属性columnArray，让外部可以通过给这个属性赋值来刷新table。
还有，还需要提供一个integer类型的属性scrollIndex来改变table的偏移量，让指定日期高亮的显示在选中区域。
此外，我们的picker要向外传递当前用户选中的时间，所以需要有一个只读 的变量selectCellTitle来指向当前picker列选中行的文案，便于向外传递信息。
所有变量整理如下：

@class ZDBPickerColumnView;

@protocol ZDBPickerColumnViewDelegate <NSObject>

- (void)pickerColumnView:(ZDBPickerColumnView *)columnView highlightIndex:(NSInteger)index;

@end

@interface ZDBPickerColumnView : UIView

@property(nonatomic, weak) id<ZDBPickerColumnViewDelegate> viewDelegate;

@property(nonatomic, strong) NSArray *columnArray;

@property(nonatomic, assign) NSInteger scrollIndex;

@property(nonatomic, strong, readonly) NSString *selectCellTitle;

@end

当中ZDBPickerColumnViewDelegate这个代理，是用来向ZDBPickerView传递信息，处理年月日之间的联动关系的。当tableView停止滚动的时候，他会告诉pikerView：“我已经选中了这一行，你可以刷新其他行的数据了”。比如：
tableView：“我停止已经选好一行了，快来看看”
pikerView：“你选中了2016年，2月，所以天数的范围是[1-29]”

还有一个 偏移问题，让tableView的偏移是行高的整数倍。实现方式类似于banner的轮播。方法我们之前说过banner+自定义pageControl。

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    _endY = scrollView.contentOffset.y;
    if (!decelerate) {

        NSInteger itemWidth = 44;
        if ((NSInteger)_endY % itemWidth != 0) {

            NSInteger currentIndex;

            float indexF = _endY / itemWidth;
            currentIndex = (NSInteger)(indexF+0.5);
            [UIView animateWithDuration:0.8 animations:^{
                scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x, currentIndex * itemWidth);
            }];
            [self notifyPickerViewScrollIndex:currentIndex];
        }
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    _endY = scrollView.contentOffset.y;
    NSInteger itemWidth = 44;
    if (_endY <= 0) {
        [self notifyPickerViewScrollIndex:-1];
        return;
    }
    if (_endY >= (_columns.count-1)*itemWidth) {
        [self notifyPickerViewScrollIndex:_columns.count-1];
        return;
    }
    if ((NSInteger)_endY % itemWidth != 0 || (NSInteger)_endY < itemWidth*_columns.count) {

        NSInteger currentIndex;

        float indexF = _endY / itemWidth;
        currentIndex = (NSInteger)(indexF+0.5);
        [UIView animateWithDuration:0.8 animations:^{
            scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x, currentIndex * itemWidth);
        }];
        [self notifyPickerViewScrollIndex:currentIndex];
    }
}

- (void)notifyPickerViewScrollIndex:(NSInteger)index {
    if (_viewDelegate && [_viewDelegate respondsToSelector:@selector(pickerColumnView:highlightIndex:)]) {
        [_viewDelegate pickerColumnView:self highlightIndex:index+1];
    }
}

通过滚动结束之后的y轴位置/偏移量 ，四舍五入，计算出滚动的index，然后再对scrollView的contentOffset属性的赋值来修改偏移，实现类似系统picker滑动的效果。

ZDBPickerView

现在我们可以组装picker了。
背景图：点击背景可以隐藏弹框。
关闭按钮：点击按钮可以隐藏弹框。
确认按钮：点击按钮可以隐藏弹框，并且触发submit的block事件，传递选中时间。
弹框主体：有两种类型

  • 年月日 ZDBPickerTypeYearMonthDay，年月日三列联动。
  • 年月 ZDBPickerTypeYearMonth，年月两级。

以下是.h文件：

- (instancetype)initWithType:(ZDBPickerType)type;

- (void)updateWithType:(ZDBPickerType)type;

/**
 tableview默认选中的下标

 @param monthIndex 月数组下标
 @param dayIndex 日数组下标
 @param yearIndex 年数组下标
 */
- (void)scrollIndexWithMonthIndex:(NSInteger)monthIndex
                         dayIndex:(NSInteger)dayIndex
                        yearIndex:(NSInteger)yearIndex;

/**
 tableview默认选中的下标

 @param monthIndex 月数组下标
 @param yearIndex 年数组下标
 */
- (void)scrollIndexWithMonthIndex:(NSInteger)monthIndex
                        yearIndex:(NSInteger)yearIndex;

/**
 关闭弹框
 */
@property(nonatomic, copy) dispatch_block_t cancleAction;
/**
 年月日提交
 */
@property(nonatomic, copy) MDYSubmitAction submitMDYAction;
/**
 年月的table滑动，引起的日table数据源的变化
 */
@property(nonatomic, copy) MDYSubmitAction scrollMDYAction;
/**
 年月提交
 */
@property(nonatomic, copy) YMSubmitAction submitYMAction;

@property(nonatomic, strong) NSArray *yearArray;
@property(nonatomic, strong) NSArray *monthArray;
@property(nonatomic, strong) NSArray *dayArray;

@end

由于弹框的样式有两种，所以我们需要提供一个更新弹框样式的方法。
另外，我们的数据源处理放在了manager，所以需要scrollMDYAction来告诉manager需要更新数据源，然后提供yearArray，monthArray，dayArray来接收数据源。
emm,还有实现tableView的代理。由于我们只有天数是可变的，所以我们只要处理ZDBPickerTypeYearMonthDay样式的picker联动就好了。天数的变化是根据年份和月份来的，所以我们需要选中的年和月（highlightIndex我们并没有用到，可以使用.selectCellTitle直接拿到）。

#pragma mark - ZDBPickerColumnViewDelegate
- (void)pickerColumnView:(ZDBPickerColumnView *)columnView highlightIndex:(NSInteger)index {
    if (columnView == _yearColumn || columnView == _monthColumn) {
        if (_type == ZDBPickerTypeYearMonthDay) {
            if (self.scrollMDYAction) {
                self.scrollMDYAction(_monthColumn.selectCellTitle, _dayColumn.selectCellTitle, _yearColumn.selectCellTitle);
            }
        }
        
    }
    
}

ZDBPickerManager

这是一个方便我们使用picker的单例。使用它在picker外面包一层，这将会让我们使用picker变得简单。它只需要做两件事：

  1. 显示pickerView；
  2. 传递选中时间。

所以他的.h文件比较简单：

@interface ZDBPickerManager : NSObject

@property(nonatomic, copy) SubmitAction submitAction;

+ (ZDBPickerManager *)sharedInstance;

/**
 显示年月日选择器

 @param time 时间
 */
- (void)showPickerViewWithYMDTime:(NSString *)time ;

/**
 显示年月选择器

 @param time 时间
 */
- (void)showPickerViewWithYMTime:(NSString *)time ;
@end

他要做的事情有：

  1. 创建和改变tableView的数据源。
    由于月份我们显示的是英文的选择框，回显和保存的是数值，所以我们创建了两个数组用来存放。monthArray存放显示，normalMonthArray存放回显。
  2. 创建pickerView。
  3. 处理时间及时间格式。
    外部没有时间传入的时候，我们需要默认选中当前时间。时间格式为2019-08-20这种接口能够保存的格式。

这里说一下怎么处理tableView最后一行和第0行不能选中的问题。我们在数据源数组的第0位置和最后位置插入空字符串就可以了。这个是创建默认数据的方法

- (void)createData {
    NSMutableArray *mutaArr = [NSMutableArray new];
    for (int i = 1500; i<=5000; i++) {
        [mutaArr addObject:[NSString stringWithFormat:@"%d",i]];
    }
    [mutaArr insertObject:@"" atIndex:0];
    [mutaArr addObject:@""];
    _yearArray = [mutaArr copy];
    
    NSString *monthStr = @"January,February,March,April,May,June,July,August,September,October,November,December";
    NSArray *originArray = [monthStr componentsSeparatedByString:@","];
    NSMutableArray *mutaArr2 = [[NSMutableArray alloc] initWithArray:originArray];
    [mutaArr2 insertObject:@"" atIndex:0];
    [mutaArr2 addObject:@""];
    _monthArray = [mutaArr2 copy];
    
    NSMutableArray *mutaArr21 = [NSMutableArray new];
    for (int i = 1; i<=12; i++) {
        if (i < 10) {
            [mutaArr21 addObject:[NSString stringWithFormat:@"0%d",i]];
        } else {
            [mutaArr21 addObject:[NSString stringWithFormat:@"%d",i]];
        }
    }
    [mutaArr21 insertObject:@"" atIndex:0];
    [mutaArr21 addObject:@""];
    _normalMonthArray = [mutaArr21 copy];
    
    NSMutableArray *mutaArr3 = [NSMutableArray new];
    for (int i = 1; i<=30; i++) {
        if (i < 10) {
            [mutaArr3 addObject:[NSString stringWithFormat:@"0%d",i]];
        } else {
            [mutaArr3 addObject:[NSString stringWithFormat:@"%d",i]];
        }
    }
    [mutaArr3 insertObject:@"" atIndex:0];
    [mutaArr3 addObject:@""];
    _dayArray = [mutaArr3 copy];
}

判断润2月和平2月

- (ZDBPickerDateDay)getDayTypeWith:(NSString *)month year:(NSString *)year {
    ZDBPickerDateDay dayType;
    NSInteger monthIndex = [_monthArray indexOfObject:month];
    NSString *monthNormal = _normalMonthArray[monthIndex];
    if ([monthNormal isEqualToString:@"01"] ||
        [monthNormal isEqualToString:@"03"] ||
        [monthNormal isEqualToString:@"05"] ||
        [monthNormal isEqualToString:@"07"] ||
        [monthNormal isEqualToString:@"08"] ||
        [monthNormal isEqualToString:@"10"] ||
        [monthNormal isEqualToString:@"12"]) {
        dayType = ZDBPickerDateDayBig;
    } else if ([monthNormal isEqualToString:@"04"] ||
               [monthNormal isEqualToString:@"06"] ||
               [monthNormal isEqualToString:@"09"] ||
               [monthNormal isEqualToString:@"11"]) {
        dayType = ZDBPickerDateDaySmall;
    } else {
        if([year integerValue]%4==0 && [year integerValue]%100!=0) {
            //普通年份，非100整数倍
            dayType = ZDBPickerDateDayFebBig;
        } else if([year integerValue]%400 == 0) {
            //世纪年份
            dayType = ZDBPickerDateDayFebBig;
        } else {
            dayType = ZDBPickerDateDayFebSmall;
        }
        
    }
    return dayType;
}

使用

[[ZDBPickerManager sharedInstance] showPickerViewWithYMTime:defaultTime];
    [ZDBPickerManager sharedInstance].submitAction = ^(NSString * _Nonnull timeString) {
        weakSelf.YearMonthLabel.text = [NSString stringWithFormat:@"年月：%@",timeString];
    };

写在最后

感觉实现一个稍微复杂点的视图最重要的是思路+实现这个思路的方法和途径。重要的是这个过程。很多东西不是一蹴而就的，是慢慢的堆叠上去然后再仔细修剪的过程。看手下的东西从模模糊糊，通过自己的修修剪剪变得轮廓清晰，有一种成就感。
GitHub代码如果对你有帮助，点个喜欢和star吧。谢谢🙏

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,997评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,603评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,359评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,309评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,346评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,258评论 1赞 300
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,122评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,970评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,403评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,464评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,075评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2赞 354