iOS ~ 贝塞尔曲线（24小时天气📈折线图：添加渐变色，使用m
2022-03-17 本文已影响0人
阳光下的叶子呵
天气折线图📈渐变色
原理：两种方法：
（1）、直接全view（绿色部分的view）设置渐变色
CAGradientLayer，再将贝塞尔曲线的path上边部分加上一个CAShapeLayer进行遮挡覆盖，将其CAShapeLayer颜色设置成和背景色相同的颜色。
（2）、使用gradient.mask = bottomLayer;设置mask 遮罩图层（添加这个，将遮挡gradient.path边界之外的内容）
第一种：这里就不在重复了，可以点击链接查看其实现过程-->>
第二种：1、先看效果图，左边是添加
mask，右边则是不加的效果（注意：layer.lineWidth 线宽是layer在设置贝塞尔path描绘之后的边界线的宽度，实际边界是lineWidth的中间位置，所以下边设置为2时，渐变色要在path位置的Y轴的1位置）
2、gradient.frame = self.chartContentView.bounds;(这样也可以，设置mask时，将path路径外的遮罩住，但是在lineWidth边线的中间，视觉效果时看到了线宽的一半，真正边线的边界开始遮挡的)
添加mask的效果： |
不加mask的效果： |
|---|---|
121647507060_.pic.jpg
|
111647507060_.pic.jpg
|
本文还要着重研究的是CALayer的mask属性
首先mask是CALayer的一个属性，它本身也是一个CALayer类，但是mask比较特殊。当一个CALayer当做mask遮罩层时，那么这个CALayer的color属性就没有效果了；影响显示效果的透明度。其中backgroundCorlor可以设置透明度，而contents赋值为图片时，图片也是要区分有无透明通道。
比如layer1.mask = layer2,那么layer2就是遮罩图层，layer1就是被遮罩图层。
当layer2为透明(透明度为0)时，遮罩区域将不会显示出来；
当layer2为不透明(透明度为1)时，遮罩区域将会显示出来；
而当layer2为半透明(透明度为(0-1))时，遮罩区域也将会是半透明。
【相关链接🔗：iOS 实现渐变圆环并了解CALayer的mask属性】
代码：
//
// GWCW_Club_ActualWeatherHourlyNewCell.m
// Gorgeouswindofgolf
//
// Created by Geraint on 2022/3/16.
//
#import "GWCW_Club_ActualWeatherHourlyNewCell.h"
#import "GWCW_Club_ActualWeatherHourlyNewChildCell.h"
@interface GWCW_Club_ActualWeatherHourlyNewCell ()<UIScrollViewDelegate, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
@property (nonatomic, strong) UILabel *titleL;
@property (nonatomic, strong) UIView *backView;
/** 展开时：折线图📈 */
@property (nonatomic, strong) UIView *chartBackView; // 背景view
@property (nonatomic, strong) UIScrollView *myContentScrollView;
@property (nonatomic, strong) UIView *chartContentView; // 折线图的view
@property (nonatomic, strong) CALayer *chartContentView_Backlayer; // self.chartContentView.layer
@property (nonatomic, strong) CAShapeLayer *chartLayer; // 添加一个父layer
@property (nonatomic, strong) CAShapeLayer *tempLayer; // 添加一个父layer
// 紫外线 ：柱状图📊
@property (nonatomic, strong) UIView *histoGramContentView; // 折线图的view
@property (nonatomic, strong) CAShapeLayer *histoGram_Backlayer;
@property (nonatomic, strong) UICollectionView *collectionView;
// 滑动进度条
@property (nonatomic, strong) UIView *progressBackView;
@property (nonatomic, strong) UIView *progressView;
@property (nonatomic, strong) NSArray<HourlyDataItem *> *hourlyDatas;
@end
@implementation GWCW_Club_ActualWeatherHourlyNewCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.selectionStyle = UITableViewCellSelectionStyleNone;
self.backgroundColor = RGBA(248, 249, 250, 1);
[self setupUI];
// [UIScreen mainScreen].bounds.size.width/375*(285 + 46+ 20);
}
return self;
}
- (void)prepareForReuse {
[super prepareForReuse];
self.titleL.text = nil;
[self.chartLayer removeFromSuperlayer];
[self.tempLayer removeFromSuperlayer];
[self.histoGram_Backlayer removeFromSuperlayer];
self.collectionView.hidden = YES;
self.progressBackView.hidden = YES;
self.progressView.hidden = YES;
}
- (void)setWeatherModel:(GWActualMatchWeatherModel *)weatherModel {
_weatherModel = weatherModel;
self.hourlyDatas = [_weatherModel.hourlyData copy];
self.titleL.text = @"24小时预报";
/** 1、创建父layer */
_chartLayer = [[CAShapeLayer alloc] init];
_chartLayer.strokeColor = [UIColor clearColor].CGColor;
UIBezierPath *bezierPath = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake(0, 0, self.chartContentView.width, [UIScreen mainScreen].bounds.size.width/375*58)
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake([UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0)];
_chartLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*0.01;
// 颜色
_chartLayer.strokeColor = [UIColor clearColor].CGColor;
// 背景填充色
_chartLayer.fillColor = [UIColor clearColor].CGColor;
// [bezierPath closePath];
_chartLayer.path = [bezierPath CGPath];
[self.chartContentView.layer addSublayer:self.chartLayer];
/** 天气贝塞尔曲线 */
UIBezierPath *weatherPath = [UIBezierPath bezierPath];
/// 先找到最大温度和最低温度，在这个范围内设置温度的最大范围：
CGFloat maxTemp = 0;
CGFloat minTemp = 0;
for (int j = 0; j < self.hourlyDatas.count; j++) {
HourlyDataItem *hourModel = self.hourlyDatas[j];
CGFloat i_temp = [[NSString stringWithFormat:@"%ld", hourModel.temp] floatValue];
// NSLog(@"一天的温度😆😆 %.2f 😆😆", i_temp);
if (j == 0) {
maxTemp = i_temp;
minTemp = i_temp;
}
if (maxTemp > i_temp) {
maxTemp = maxTemp;
} else {
maxTemp = i_temp;
}
if (minTemp > i_temp) {
minTemp = i_temp;
} else {
minTemp = minTemp;
}
}
// 温度之差 的 温度范围：温度三种情况都是这个减法获取温度的范围
CGFloat maxTempRange = maxTemp - minTemp;
NSMutableArray *circleArray = [NSMutableArray arrayWithCapacity:0];
// 设置path的 起始点 和 其他点
for (int i = 0; i < self.hourlyDatas.count; i++) {
HourlyDataItem *hourModel = self.hourlyDatas[i];
// CGFloat temp = fabsl(hourModel.temp);
CGFloat temp = [[NSString stringWithFormat:@"%ld", hourModel.temp] floatValue];
// CGFloat myPointY = [UIScreen mainScreen].bounds.size.width/375* 0.58*temp;
// NSLog(@"一天的温度😆😆 %.2f 😆😆", temp);
// 温度折线图📈，最高温60摄氏度，最低温-40 度℃，(temp - minTemp) = 当前的温度，减去最小的温度，载乘以等份
if (i == 0) {
[weatherPath moveToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(-2), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 +8+2))];
//
[weatherPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(-2), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)))];
[weatherPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)))];
// [weatherPath moveToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)))];
// 端点位置CGPoint
CGPoint circlePoint = CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)));
NSValue* circleValue = [NSValue valueWithCGPoint:circlePoint];
[circleArray addObject:circleValue];
/**
/// 因为CGPoint不是对象，所以不能存到数组，需要转成NSValue
// CGPoint 转 NSValue
NSValue* value = [NSValue valueWithCGPoint:CGPointMake(10, 50)];
// NSValue 转 CGPoint
CGPoint pt = [value CGPointValue];
*/
} else if (i == self.hourlyDatas.count-1) {
[weatherPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*i)), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)))];
// 端点位置CGPoint
CGPoint circlePoint = CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*i)), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)));
NSValue* circleValue = [NSValue valueWithCGPoint:circlePoint];
[circleArray addObject:circleValue];
[weatherPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*i) + 25 +2+2), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)))];
}
else { // 其他
[weatherPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*i)), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)))];
// 端点位置CGPoint
CGPoint circlePoint = CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*i)), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 - 40/maxTempRange * (temp - minTemp)));
NSValue* circleValue = [NSValue valueWithCGPoint:circlePoint];
[circleArray addObject:circleValue];
}
}
// 终点
[weatherPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*(self.hourlyDatas.count-1)) + 25 +2+2), [UIScreen mainScreen].bounds.size.width/375*(58 - 8 +8+2))];
self.chartContentView.backgroundColor = [UIColor greenColor];
_tempLayer = [CAShapeLayer layer];
// 线宽
self.tempLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*2;
// 线条的颜色
// self.tempLayer.strokeColor = RGBA(135, 190, 241, 1).CGColor;
self.tempLayer.strokeColor = [UIColor redColor].CGColor;
// 背景填充色
self.tempLayer.fillColor = [UIColor clearColor].CGColor;
// 起始点和终点，连接起来。（可以先添加”起始点“和”终点“的y轴为0，加上这句之后，范围内的填充颜色。）
[weatherPath closePath];
// 将UIBezierPath类转换成CGPath，类似于UIColor的CGColor
self.tempLayer.path = [weatherPath CGPath];
[self.chartLayer addSublayer:self.tempLayer]; // 这行代码之前，将执行[self.tempLayer removeFromSuperlayer];，再执行这行代码
/**************************************/
/** 添加渐变色：设置mask */
CAGradientLayer *gradient = [CAGradientLayer layer];
// 写成固定的大小（和self.backView的frame一样）
// gradient.frame = self.chartContentView.bounds; // (这样也可以，设置mask时，将path路径外的遮罩住，但是在lineWidth边线的中间，视觉效果时看到了线宽的一半，真正边线的边界开始遮挡的)
gradient.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.width/375*1, weatherPath.bounds.size.width, weatherPath.bounds.size.height); // Y轴设置1，是因为要把边线完整的显示出来lineWidth
gradient.colors = [NSArray arrayWithObjects:
// [UIColor redColor].CGColor,
(id)[UIColor colorWithRed:88/255.0 green:159/255.0 blue:232/255.0 alpha:1].CGColor,
(id)[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1].CGColor,
nil];
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(0, 1);
CAShapeLayer *bottomLayer = [CAShapeLayer layer];
bottomLayer.path = [weatherPath CGPath];
gradient.mask = bottomLayer; // 设置mask 遮罩图层（添加这个，将遮挡gradient.path边界之外的内容）
[self.tempLayer addSublayer:gradient];
/**************************************/
/** 折线图📈中的小圆点 + 虚线*/
for (NSValue *circleValue in circleArray) {
/** 折线图📈中的小圆点 */
CGPoint circlePoint = [circleValue CGPointValue];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
// 线宽
circleLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*1; // 10 - 6 = 4
circleLayer.lineCap = kCALineCapRound; // 端点样式
circleLayer.lineJoin = kCALineCapRound; // 终点处理
// 线条的颜色
circleLayer.strokeColor = RGBA(135, 190, 241, 1).CGColor;
// 背景填充色
circleLayer.fillColor = [UIColor whiteColor].CGColor;
// 设置线宽、线间距（虚线）
// [circleLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2], [NSNumber numberWithInt:2], nil]];
// 设置半径
CGFloat circleRadius = [UIScreen mainScreen].bounds.size.width/375*3;
// 初始化一个路径：创建圆弧 ，startAngle：起始点，endAngle：终止点，clockwise：顺时针方向 ，M_PI == π：3.1415926
// bezierPathWithArcCenter 中心点，下面就让addSublayer了，那么就设置self.bezierBackImg.layer的 中心点就好了，宽/2,高/2
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:circlePoint radius:circleRadius startAngle:(0*M_PI) endAngle:(2*M_PI) clockwise:YES]; // 终止点（60%几率时）：(2*0.6 - 0.25)*M_PI，clockwise 顺时针 YES， 逆时针 NO
// 将UIBezierPath类转换成CGPath，类似于UIColor的CGColor
circleLayer.path = [circlePath CGPath];
[self.chartLayer addSublayer:circleLayer]; // 这行代码之前，将执行[self.tempLayer
/** 虚线的 path */
UIBezierPath *linePath = [UIBezierPath bezierPath];
// 起始点
CGPoint lineStartPoint = CGPointMake(circlePoint.x, circlePoint.y + [UIScreen mainScreen].bounds.size.width/375*5);
[linePath moveToPoint:lineStartPoint];
// 末端
CGPoint lineEndPoint = CGPointMake(circlePoint.x, [UIScreen mainScreen].bounds.size.width/375*(58 - 4));
[linePath addLineToPoint:lineEndPoint];
/** 渐变色条，在上面添加虚线CAShapeLayer */
CAGradientLayer *gradient = [CAGradientLayer layer];
// 写成固定的大小（和self.backView的frame一样）
gradient.frame = CGRectMake(lineEndPoint.x-[UIScreen mainScreen].bounds.size.width/375*0.5, lineStartPoint.y, [UIScreen mainScreen].bounds.size.width/375*1, lineEndPoint.y - lineStartPoint.y);
gradient.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:2/255.0 green:91/255.0 blue:172/255.0 alpha:0.7].CGColor,
(id)[UIColor colorWithRed:2/255.0 green:91/255.0 blue:172/255.0 alpha:0.19].CGColor,
nil];
gradient.startPoint = CGPointMake(0.5, 0);
gradient.endPoint = CGPointMake(0.5, 1);
gradient.masksToBounds = YES;
gradient.cornerRadius = [UIScreen mainScreen].bounds.size.width/375*1;
[self.chartLayer addSublayer:gradient];
/** 虚线*/
CAShapeLayer *lineLayer = [CAShapeLayer layer];
// 线宽
lineLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*2;
// 线条的颜色
lineLayer.strokeColor = RGBA(248, 247, 245, 1).CGColor;
// 背景填充色
lineLayer.fillColor = [UIColor clearColor].CGColor;
// 设置线宽、线间距（虚线）
[lineLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2], [NSNumber numberWithInt:2], nil]];
// 将UIBezierPath类转换成CGPath，类似于UIColor的CGColor
lineLayer.path = [linePath CGPath];
[self.chartLayer addSublayer:lineLayer]; // 这行代码之前，将执行[self.tempLayer
}
/** 2、创建柱状图 父layer */
_histoGram_Backlayer = [[CAShapeLayer alloc] init];
UIBezierPath *histo_BezierPath = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake(0, 0, self.histoGramContentView.width, [UIScreen mainScreen].bounds.size.width/375*40)
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake([UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0)];
_histoGram_Backlayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*0.01;
// 颜色
_histoGram_Backlayer.strokeColor = [UIColor clearColor].CGColor;
// 背景填充色
_histoGram_Backlayer.fillColor = [UIColor clearColor].CGColor;
_histoGram_Backlayer.path = [histo_BezierPath CGPath];
[self.histoGramContentView.layer addSublayer:self.histoGram_Backlayer];
self.histoGramContentView.layer.masksToBounds = YES;
/** 紫外线 贝塞尔曲线 */
UIBezierPath *uviPath = [UIBezierPath bezierPath];
// 设置path的 起始点 和 其他点
for (int i = 0; i < self.hourlyDatas.count; i++) {
HourlyDataItem *hourModel = self.hourlyDatas[i];
// CGFloat temp = fabsl(hourModel.temp);
NSInteger uviNumber = hourModel.uvi;
[uviPath moveToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25 + (57.9*i)), [UIScreen mainScreen].bounds.size.width/375*(40))];
[uviPath addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/375*(25+ (57.9*i)), [UIScreen mainScreen].bounds.size.width/375*(40 - 30/6 * uviNumber))];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
// 线宽
circleLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*8;
circleLayer.lineCap = kCALineCapRound; // 端点样式
circleLayer.lineJoin = kCALineCapRound; // 终点处理
// 线条的颜色
circleLayer.strokeColor = RGBA(153, 162, 241, 1).CGColor;
// 背景填充色
circleLayer.fillColor = RGBA(153, 162, 241, 1).CGColor;
circleLayer.path = [uviPath CGPath];
[uviPath addClip];
[self.histoGramContentView.layer addSublayer:circleLayer]; // 这行代码之前，将执行[self.tempLayer
}
self.collectionView.hidden = NO;
[self refreshCollectionView];
self.progressBackView.hidden = NO;
self.progressView.hidden = NO;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView == self.myContentScrollView) {
if (self.myContentScrollView.contentOffset.x <= 0) {
self.progressView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width/375*18, [UIScreen mainScreen].bounds.size.width/375*3);
} else if (self.myContentScrollView.contentOffset.x >= [UIScreen mainScreen].bounds.size.width/375*(50*24 + 8*23 - 310)) {
self.progressView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/375*(136-18), 0, [UIScreen mainScreen].bounds.size.width/375*18, [UIScreen mainScreen].bounds.size.width/375*3);
} else {
// NSLog(@"😆😆 self.chartContentScrollView.contentOffset.x = %f", self.chartContentScrollView.contentOffset.x);
CGFloat contentOffsetX = ([UIScreen mainScreen].bounds.size.width/375*(136-18)) * self.myContentScrollView.contentOffset.x / ([UIScreen mainScreen].bounds.size.width/375*(50*24 + 8*23 - 310));
// NSLog(@"😆😆 contentOffsetX = %f 😆", contentOffsetX);
self.progressView.frame = CGRectMake(contentOffsetX, 0, [UIScreen mainScreen].bounds.size.width/375*18, [UIScreen mainScreen].bounds.size.width/375*3);
}
}
}
- (void)setupUI {
_titleL = [[UILabel alloc] init];
_titleL.textColor = RGBA(9, 9, 9, 1);
_titleL.textAlignment = NSTextAlignmentLeft;
_titleL.font = [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width/375*16 weight:UIFontWeightMedium];
[self.contentView addSubview:self.titleL];
[self.titleL makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.mas_top).offset([UIScreen mainScreen].bounds.size.width/375*10);
make.left.mas_equalTo(self.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*20);
}];
_backView = [[UIView alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width/375*20, [UIScreen mainScreen].bounds.size.width/375*46, [UIScreen mainScreen].bounds.size.width/375*(335), [UIScreen mainScreen].bounds.size.width/375*(285))];
_backView.backgroundColor = [UIColor whiteColor];
// self.backView.layer.masksToBounds = YES;
self.backView.layer.cornerRadius = [UIScreen mainScreen].bounds.size.width/375*12;
self.backView.layer.shadowColor = RGBA(0, 0, 0, 0.05).CGColor;
self.backView.layer.shadowOffset = CGSizeMake(0, 5);
self.backView.layer.shadowRadius = [UIScreen mainScreen].bounds.size.width/375*6;
self.backView.layer.shadowOpacity = 1;
[self.contentView addSubview:self.backView];
// [self.backView makeConstraints:^(MASConstraintMaker *make) {
// make.top.mas_equalTo(self.mas_top).offset([UIScreen mainScreen].bounds.size.width/375*46);
// make.left.mas_equalTo(self.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*20);
// make.right.mas_equalTo(self.mas_right).offset(-[UIScreen mainScreen].bounds.size.width/375*20);
// make.height.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*285);
// }];
_chartBackView = [[UIView alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width/375*12, [UIScreen mainScreen].bounds.size.width/375*10, [UIScreen mainScreen].bounds.size.width/375*(375-20-20-12-12), [UIScreen mainScreen].bounds.size.width/375*260)];
self.chartBackView.backgroundColor = [UIColor whiteColor];
// self.chartBackView.layer.masksToBounds = YES;
// self.chartBackView.layer.cornerRadius = [UIScreen mainScreen].bounds.size.width/375*5;
[self.backView addSubview:self.chartBackView];
// [self.chartBackView makeConstraints:^(MASConstraintMaker *make) {
// make.top.mas_equalTo(self.backView.mas_top).offset([UIScreen mainScreen].bounds.size.width/375*10);
// make.left.mas_equalTo(self.backView.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*12);
// make.right.mas_equalTo(self.backView.mas_right).offset(-[UIScreen mainScreen].bounds.size.width/375*12);
// make.height.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*260);
// }];
_myContentScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width/375*(310), [UIScreen mainScreen].bounds.size.width/375*260)];
self.myContentScrollView.backgroundColor = [UIColor clearColor];
self.myContentScrollView.delegate = self;
self.myContentScrollView.showsHorizontalScrollIndicator = NO;
self.myContentScrollView.scrollEnabled = YES;
[self.chartBackView addSubview:self.myContentScrollView];
// [self.myContentScrollView makeConstraints:^(MASConstraintMaker *make) {
// make.edges.equalTo(self.chartBackView);
// }];
if (!self.myContentScrollView.contentSize.width) {
self.myContentScrollView.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width/375*(50*24 + 8*23), self.myContentScrollView.frame.size.height);
}
_chartContentView = [[UIView alloc] initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.width/375*(10 +63+23), self.myContentScrollView.contentSize.width, [UIScreen mainScreen].bounds.size.width/375*58)];
[self.myContentScrollView addSubview:self.chartContentView];
self.chartContentView.backgroundColor = [UIColor clearColor];
self.chartContentView.layer.masksToBounds = YES; // 超出layer边界，就裁减掉，防止子layer越界
_histoGramContentView = [[UIView alloc] initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.width/375*(10+63+23 + 58 + 47), self.myContentScrollView.contentSize.width, [UIScreen mainScreen].bounds.size.width/375*40)];
[self.myContentScrollView addSubview:self.histoGramContentView];
self.histoGramContentView.backgroundColor = [UIColor clearColor];
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.sectionHeadersPinToVisibleBounds = NO;
layout.sectionFootersPinToVisibleBounds = NO;
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.myContentScrollView.contentSize.width, self.myContentScrollView.frame.size.height) collectionViewLayout:layout];
// UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
collectionView.backgroundColor = [UIColor clearColor];
// collectionView.backgroundColor = RGBA(176, 100, 200, 0.3);
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.showsVerticalScrollIndicator = NO;
collectionView.scrollEnabled = NO;
[self.myContentScrollView addSubview:collectionView];
// [self addSubview:collectionView];
// [self.collectionView makeConstraints:^(MASConstraintMaker *make) {
// make.edges.equalTo(self.chartContentScrollView);
// }];
[collectionView registerClass:[GWCW_Club_ActualWeatherHourlyNewChildCell class] forCellWithReuseIdentifier:NSStringFromClass([GWCW_Club_ActualWeatherHourlyNewChildCell class])];
self.collectionView = collectionView;
_progressBackView = [[UIView alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width/375*(335-136)/2, [UIScreen mainScreen].bounds.size.width/375*(285-13), [UIScreen mainScreen].bounds.size.width/375*136, [UIScreen mainScreen].bounds.size.width/375*3)];
_progressBackView.backgroundColor = RGBA(248, 247, 245, 1);
self.progressBackView.layer.masksToBounds = YES;
self.progressBackView.layer.cornerRadius = [UIScreen mainScreen].bounds.size.width/375*3/2;
[self.backView addSubview:self.progressBackView];
_progressView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width/375*18, [UIScreen mainScreen].bounds.size.width/375*3)];
self.progressView.backgroundColor = RGBA(255, 196, 15, 1);
self.progressView.layer.masksToBounds = YES;
self.progressView.layer.cornerRadius = [UIScreen mainScreen].bounds.size.width/375*3/2;
[self.progressBackView addSubview:self.progressView];
self.progressBackView.hidden = YES;
self.progressView.hidden = YES;
}
- (void)refreshCollectionView {
[self.collectionView reloadData];
}
#pragma mark -- -- < UICollectionViewDelegate, UICollectionViewDataSource >
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.hourlyDatas.count;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake([UIScreen mainScreen].bounds.size.width/375*50, [UIScreen mainScreen].bounds.size.width/375*260);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
// 水平上下
return [UIScreen mainScreen].bounds.size.width/375*7.9; // 8
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
// 垂直左右
return [UIScreen mainScreen].bounds.size.width/375*1;
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
// section 边界
return UIEdgeInsetsMake([UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0);
}
- (nonnull __kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
GWCW_Club_ActualWeatherHourlyNewChildCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([GWCW_Club_ActualWeatherHourlyNewChildCell class]) forIndexPath:indexPath];
if (self.hourlyDatas.count) {
cell.model = self.hourlyDatas[indexPath.row];
}
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
GWCW_Club_ActualWeatherHourlyNewChildCell *cell = (GWCW_Club_ActualWeatherHourlyNewChildCell *)[collectionView cellForItemAtIndexPath:indexPath];
}
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
@end
