写在前面的话:
最近产品要求做个需求,比较奇葩,选择时间的,本来原生的UIDatePickerView很好用,可是产品非要搞成这个样子:
这样一来就只能自定义了,谁叫程序员不擅长拒绝呢,以下是实现这个页面的一些记录,需要的话文章末尾也有源码,欢迎收藏、star...
版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明。
本文链接:https://www.jianshu.com/p/6730c1b6e81b
概述
这个功能是选择日期的,上部显示的是一个刻度尺,可以左右拖动,可选择全年的日期,选中后下方的按钮会显示出选中的月份和年;点击下方的按钮后会弹出时间选择器,可选择任意时间,选中后也会反显对应的月份和年,上部的刻度尺也会滚动到对应的位置,预览如下:
试着使用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];
tips: 使用Xcode 11创建的项目,如果使用低版本的Xcode运行可能会报错。
实现的过程比较曲折和匆忙,如有bug请留言反馈,谢谢。