带刻度尺的日期选择器

1.概述2.试着使用UIPickerView实现3.使用UICollectionView实现1.获取一年12个月的数据：2.滚动到1月1号和12月31号的时候如何能够无缝的显示？ 4. 模糊&渐变

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

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

---

版权声明：本文为博主原创文章，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/hongyangcao/article/details/102854331

1.概述

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

2.试着使用UIPickerView实现

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

3.使用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]; }

4. 模糊&渐变

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

/// 增加模糊效果 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请留言反馈，谢谢。

---