带刻度尺的日期选择器

写在前面的话：
最近产品要求做个需求，比较奇葩，选择时间的，本来原生的UIDatePickerView很好用，可是产品非要搞成这个样子：

PicturePreview.png

这样一来就只能自定义了,谁叫程序员不擅长拒绝呢，以下是实现这个页面的一些记录，需要的话文章末尾也有源码，欢迎收藏、star...

---

版权声明：本文为博主原创文章，转载请附上原文出处链接和本声明。
本文链接：https://www.jianshu.com/p/6730c1b6e81b

概述

这个功能是选择日期的，上部显示的是一个刻度尺，可以左右拖动，可选择全年的日期，选中后下方的按钮会显示出选中的月份和年；点击下方的按钮后会弹出时间选择器，可选择任意时间，选中后也会反显对应的月份和年，上部的刻度尺也会滚动到对应的位置，预览如下：

20191029Preview.gif

---

试着使用UIPickerView实现

刚拿到这个任务的时候，也是百度、Github一顿找，没找到有类似的控件（这么说来产品还比较优秀），没办法只能自己手敲了。这个刻度尺的实现是个难点，有点像UIPickerView，但是又是横过来的。那就先写好竖着的刻度尺然后旋转一下，开干，实现以后发现旋转页面会变形，刻度尺也是弯着的，这个思路也就终结了。

使用UICollectionView实现

那就使用UICollectionView实现吧，自定义Cell，增加Label，刻度尺用贝塞尔曲线画出来，这些都比较容易实现，就不贴代码了。
个人认为实现这个刻度尺的关键点：

1.获取一年12个月的数据：

+ (NSMutableArray *)getAllDaysWith:(NSDate *)date {
    NSString *year = [self getYearWith:date];
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setDateFormat:@"yyyy-MM-dd"];
    //设置转换后的目标日期时区
    NSTimeZone *toTimeZone = [NSTimeZone defaultTimeZone];
    //转换后源日期与世界标准时间的偏移量
    NSInteger toGMTOffset = [toTimeZone secondsFromGMTForDate:[NSDate date]];
    [dateFormatter setTimeZone: [NSTimeZone timeZoneForSecondsFromGMT:toGMTOffset]];
    NSMutableArray *array = [NSMutableArray arrayWithCapacity:12];
    for (int i = 1; i < 13; i++) {
        NSString *firstDay = [year stringByAppendingFormat:@"-%02d-01", i];
        NSDate *date = [dateFormatter dateFromString:firstDay];
        NSInteger days = [self getMonthNumberDaysWithDate:date];
        NSMutableArray *daysArray = [NSMutableArray arrayWithCapacity:days];
        for (int j = 1; j <= days; j++) {
            [daysArray addObject:[NSString stringWithFormat:@"%02d", j]];
        }
        array[i-1] = daysArray;
    }
    return array;
}

该方法返回二维数组，可直接显示每个月的每一天。

2.滚动到1月1号和12月31号的时候如何能够无缝的显示？

想着和无限轮播图一样实现，但这个cell又不是整屏显示的，根本没办法实现。
后台也是在网上受到的启发，直接更改数据源，我只显示一年12个月的时间，因此我直接把数据改为36个月，我显示的时候只显示中间12个月的时间，这样就能够顺滑的显示。
^^正常应该没人会手动滑365个cell看我的边界吧 ^^
如果有大神知道更好的方法，希望能给我留言，万分感谢！！！

- (void)setSelectedIndexPath:(NSIndexPath *)selectedIndexPath {
    /// 选中数据后放到中间组显示
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:selectedIndexPath.row inSection:selectedIndexPath.section+12];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:(UICollectionViewScrollPositionCenteredHorizontally) animated:YES];
}

- (void)setDataArray:(NSArray *)dataArray {
    /// 创建三组数据,避免边界值不能选择的问题
    NSMutableArray *mutableArray = dataArray.mutableCopy;
    [mutableArray addObjectsFromArray:dataArray];
    [mutableArray addObjectsFromArray:dataArray];
    _dataArray = mutableArray.copy;
    [self.collectionView reloadData];
}

模糊&渐变

这也是比较常规代码，就不赘述了，直接上代码：

/// 增加模糊效果
    CGFloat space = 10;
    CGFloat widthRatio = 0.15;
    CGFloat viewHeight = self.frame.size.height - space;
    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:(UIBlurEffectStyleExtraLight)];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.alpha = 0.5;
    effectView.frame = CGRectMake(self.collectionView.frame.origin.x, self.collectionView.frame.origin.y + space, self.frame.size.width * widthRatio, viewHeight);
    [self addSubview:effectView];

/// 增加渐变效果
    UIColor *color = [UIColor lightGrayColor];
    CAGradientLayer *viewALayer = [CAGradientLayer layer];
    viewALayer.frame = effectView1.bounds;
    viewALayer.colors = [NSArray arrayWithObjects:
                       (id)[UIColor whiteColor].CGColor,
                       (id)color.CGColor, nil];
    viewALayer.startPoint = CGPointMake(0, 0);
    viewALayer.endPoint = CGPointMake(1, 0);
    [effectView1.layer addSublayer: viewALayer];

Demo地址

tips: 使用Xcode 11创建的项目，如果使用低版本的Xcode运行可能会报错。
实现的过程比较曲折和匆忙，如有bug请留言反馈，谢谢。

---