网络编程

当前位置:永利402游戏网站-永利402com官方网站 > 网络编程 > iOS表格的落实思路

iOS表格的落实思路

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-09-19 08:49

须要 表格表现看房记录,X轴为星期,Y轴为时间

图片 1需求.png

第一第贰个想到的是用UICollectionView,这样纵然可以画出表格,可是赋值不能精确,最终用TableView的法子贯彻

_times = @[@"18:00-21:00",@"14:00-17:59",@"11:00-13:59",@"9:00-10:59",@"6:00-8:59"];_weeks = @[@"星期一",@"星期二",@"星期三",@"星期四",@"星期五",@"星期六",@"星期日"];- setupFormData { for (NSInteger i = 0; i < self.weeks.count; i++) { [self.timeDatas removeAllObjects]; NSArray *times = [NSArray array]; for (NSInteger j = 0; j < self.times.count; j++) { HCFormItem *item = [[HCFormItem alloc] init]; item.num = 0; if (i == 0 && j == 0) { item.num = 1; item.color = @"#00B0FF"; } if (i == 1 && j == 0) { item.num = 1; item.color = @"#00B0FF"; } if (i == 2 && j == 1) { item.num = 4; item.color = @"#00E5FF"; } if (i == 3 && j == 1) { item.num = 3; item.color = @"#00E5FF"; } if (i == 4 && j == 1) { item.num = 4; item.color = @"#00E5FF"; } if (i == 5 && j == 4) { item.num = 10; item.color = @"#FF3D00"; } if (i == 6 && j == 3) { item.num = 8; item.color = @"#FFBC00"; } [self.timeDatas addObject:item]; } times = self.timeDatas.copy; [self.weekDatas addObject:times]; }}

背景色

self.view.backgroundColor = [UIColor whiteColor];UIView *formBGView = [[UIView alloc] init];formBGView.backgroundColor = [UIColor colorWithHexString:kGray_Light_HC];[self.bgView addSubview:formBGView];formBGView.frame = CGRectMake(78, self.priceChart.bottom, 260, 120);

画表格

for (NSInteger i = 0; i < self.weekDatas.count; i++) { UITableView *tableView = [[UITableView alloc] init]; tableView.tag = 101 + i; tableView.dataSource = self; tableView.delegate = self; tableView.scrollEnabled = NO; tableView.tableFooterView = [self setupFooterView:i]; tableView.showsVerticalScrollIndicator = NO; [self.bgView addSubview:tableView]; CGFloat tableViewX = 36 * i + 1 *  + 78; CGFloat tableViewY = formBGView.top + 1; CGFloat tableViewW = 36; CGFloat tableViewH = 24 * (self.timeDatas.count + 1); tableView.frame = CGRectMake(tableViewX, tableViewY, tableViewW, tableViewH); }

上面实现DataSource和Delegate

#pragma mark - —————————————————————UITableView DataSource&Delegate—————————————————————#pragma mark - UITableView DataSource- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.timeDatas.count;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 200 为Y轴的数据源 if (tableView.tag == 200) { UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"]; cell.selectionStyle = UITableViewCellSelectionStyleNone; UILabel *timeLabel = [[UILabel alloc] init]; [cell.contentView addSubview:timeLabel]; timeLabel.textColor = [UIColor colorWithHexString:KTextGray]; timeLabel.font = [UIFont systemFontOfSize:8]; timeLabel.text = self.times[indexPath.row]; timeLabel.textAlignment = NSTextAlignmentCenter; timeLabel.frame = CGRectMake(0, 4, 78, 20 ); return cell; } HCFormCell *cell = [[HCFormCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"HCFormCell"]; NSInteger index = tableView.tag - 101; NSArray *times = self.weekDatas[index]; HCFormItem *item = times[indexPath.row]; cell.formItem = item; [tableView setSeparatorColor:[UIColor colorWithHexString:kGray_Light_HC]]; cell.selectionStyle = UITableViewCellSelectionStyleNone; return cell;}#pragma mark - UITableView Delegate- tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 24;}#pragma mark - cell分割线填满- tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{ if ([cell respondsToSelector:@selector(setSeparatorInset:)]) { [cell setSeparatorInset:UIEdgeInsetsZero]; } if ([cell respondsToSelector:@selector(setLayoutMargins:)]) { [cell setLayoutMargins:UIEdgeInsetsZero]; } }

X轴由于是在UITableView的底布,全体应用FooterView,而Y轴则是独自在右边手再写三个TableView

X轴

- setupFooterView:(NSInteger)index { UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 36, 24)]; footerView.backgroundColor = [UIColor colorWithHexString:kGray_Light_HC]; UILabel *weekLabel = [[UILabel alloc] init]; weekLabel.font = [UIFont systemFontOfSize:8]; weekLabel.backgroundColor = [UIColor whiteColor]; weekLabel.textColor = [UIColor colorWithHexString:KTextGray]; weekLabel.textAlignment = NSTextAlignmentCenter; weekLabel.text = self.weeks[index]; [footerView addSubview:weekLabel]; weekLabel.frame = CGRectMake(0, 1, footerView.width, footerView.height - 1); return footerView;}

Y轴

UITableView *formY = [[UITableView alloc] init];formY.tag = 200;formY.dataSource = self;formY.delegate = self;formY.scrollEnabled = NO;formY.tableFooterView = [UIView new];formY.showsVerticalScrollIndicator = NO;formY.separatorStyle = UITableViewCellSeparatorStyleNone;[self.bgView addSubview:formY];CGFloat formYX = 0;CGFloat formYY = formBGView.top + 1;CGFloat formYW = 78;CGFloat formYH = 24 * self.timeDatas.count;formY.frame = CGRectMake(formYX, formYY, formYW, formYH);

图片 2效果.png

二零一八年项目中用到了折线图,当时因为项目赶的紧,于是下载了GitHub上排行前几名的图样框架,看一下哪八个与要求最符,最终采取了PNChart(个人觉安妥初的抉择依然很不利的,因为框架只好满足一些基本功用,其余的滑动、触摸、悬浮框,交集点都是索要本身改框架的,PNChart里面包车型大巴代码还是挺轻巧的),直到年后过了那般长日子有个别闲下来才调节看一看里面具体的完毕格局。

第一PNChart无论用什么样开始化方法在里面任何调用了setupDefaultValues,在那些方法里面开端化了一群变量,同期起首化了上下左右多个边距为25.当调用setChartData,首先初步化了数组,同有的时候候安装了CAShapeLayer的局地品质,然后调用了prepareYLabelsWithData方法。

prepareYLabelsWithData方法重如若为着寻找Y轴上的最大值与小小值,况兼只要_showGenYLabels为真,那么调用setYLabels方法。setYLabels方法首假如用来安装Y轴上的Label的frame,同不经常间给它赋值。当上面的步调走完现在调用setNeedsDisplay,系统会调用drawRect方法,若是isShowCoordinateAxis为YES,即只要呈现坐标轴,那么先画坐标轴,画坐标轴的的时候先画的是Y轴,然后才画X轴,注意源点和画Y轴的时候那个起源跟_chartMarginBottom有关,要稳重它是能够转移的,前面又画了Y轴和X轴的箭头。

还要假若showLabel为YES,那么会画X轴和Y轴上的小突起(即每一步的隆起的不行点),即便xUnit和yUnit是有值的,那么会在X轴和Y轴旁边画八个Label并赋值,假若showYGridLines为YES,即网格线展现,那么,不过在画网格线要留意一个题目若是_showLabel为YES,那么网格线的源点不是靠着最左侧的,会有暗中认可值10,当为NO是,暗中同意值为0,所以能够在代码里面改变。同临时间在这一块还决定了网格线是虚线仍然促成,当网格线默感觉虚线,能够改变为实线,只要把那里边的数值改造一下(简来讲之在drawRect方法里面画了坐标轴和坐标轴的箭头以及地点的小突起,还大概有旁边的Label还应该有网格线)

当调用strokeChart的时候,首先在格局内部调用了一个主意,那些办法的第一功效是依照折线的类型来画折线(先算出X轴和Y轴的职位,然后画相应的线),其实这几个折线是私下认可有动画的,能够安装displayAnimated属性为NO来让不让有动画

1.率先设置变量的暗许值

-createDefaultValue{ _nowIndex = 1; _dataArray = [NSMutableArray array]; _lineLayer = [CAShapeLayer layer]; [_lineLayer setLineCap:kCALineCapRound]; [_lineLayer setLineJoin:kCALineJoinRound]; [_lineLayer setLineWidth:1]; [_lineLayer setStrokeColor:[UIColor blackColor].CGColor]; [_lineLayer setFillColor:[UIColor clearColor].CGColor]; _maskLayer = [CAShapeLayer layer]; _gradientLayer = [CAGradientLayer layer]; _gradientLayer.frame = self.bounds;//必须设置渐变涂层的frame,不然渐变涂层出不来 _gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor whiteColor].CGColor]; _gradientLayer.startPoint = CGPointMake; _gradientLayer.endPoint = CGPointMake; for (int i = 0; i < totalCount; i ++) { CGFloat lineW = (self.width - LeftDistance*2)/totalCount; CGFloat linex = LeftDistance + lineW/2.0 + i*lineW; NSInteger w = (self.height - LeftDistance*2 - 60); CGFloat liney = arc4random()% w; CGPoint point = CGPointMake(linex, liney); [_dataArray addObject:[NSValue valueWithCGPoint:point]]; }}

然后绘制折线图的边框和虚线

-drawRect:rect{ CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor blackColor]setStroke]; CGContextSetLineCap(context, kCGLineCapSquare); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextSetLineWidth(context, 1); CGRect lineRect = CGRectMake(LeftDistance, LeftDistance, self.width - LeftDistance*2, self.height - LeftDistance*2); CGContextAddRect(context, lineRect); CGContextStrokePath; CGFloat lineW = (self.width - LeftDistance*2)/LineCount; CGFloat lineH = (self.height - LeftDistance*2)/LineCount; for (int i = 0; i < LineCount; i ++) { CGFloat dash[] = {10,2}; CGContextSetLineDash(context, 0, dash, 2); CGContextMoveToPoint(context, LeftDistance, LeftDistance + *lineH); CGContextAddLineToPoint(context, self.width - LeftDistance , LeftDistance + *lineH); CGContextStrokePath; } for (int i = 0; i < LineCount; i ++) { CGFloat dash[] = {10,2};//当把2改为0的时候其实虚线就变为了实线 CGContextSetLineDash(context, 0, dash, 2); CGContextMoveToPoint(context, LeftDistance + *lineW, LeftDistance ); CGContextAddLineToPoint(context, LeftDistance + *lineW, self.height - LeftDistance); CGContextStrokePath; }}

末段依照数量和等级次序绘制差别的折线

-strokeLinePath{ if (_type == lineAnimation || _type == lineAnimationNone || _type == lineFillAnimationNone) { UIBezierPath *path = [UIBezierPath bezierPath]; for (int i = 0; i < _dataArray.count; i ++) { CGPoint point = [_dataArray[i] CGPointValue]; if { [path moveToPoint:point]; }else { [path addLineToPoint:point]; } } _lineLayer.path = path.CGPath; [self.layer addSublayer:_lineLayer]; //简单的折线图到这里已经绘制完毕 if (_type == lineAnimation) { CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; animate.fromValue = @0; animate.toValue = @1; animate.duration = 4; [_lineLayer addAnimation:animate forKey:@"strokeEnd"]; }//给折线图添加动画 if (_type == lineFillAnimationNone) { CGPoint lastPoint = [_dataArray[totalCount -1] CGPointValue]; CGPoint firstPoint = [_dataArray[0] CGPointValue]; [path addLineToPoint:CGPointMake(lastPoint.x, self.height - LeftDistance)]; [path addLineToPoint:CGPointMake(LeftDistance, self.height - LeftDistance)]; [path addLineToPoint:firstPoint]; _maskLayer.path = path.CGPath; _gradientLayer.mask = _maskLayer; //最关键是这一句,设置渐变涂层的mask [self.layer addSublayer:_gradientLayer]; //其实这一种还有令一种实现,即:// CGPoint lastPoint = [_dataArray[totalCount -1] CGPointValue];// CGPoint firstPoint = [_dataArray[0] CGPointValue];// [path addLineToPoint:CGPointMake(lastPoint.x, self.height - LeftDistance*2)];// [path addLineToPoint:CGPointMake(LeftDistance, self.height - LeftDistance*2)];// [path addLineToPoint:firstPoint];// UIBezierPath *fillPath = [UIBezierPath bezierPathWithCGPath:path.CGPath];// CAShapeLayer *fillLayer = [CAShapeLayer layer];// [fillLayer setLineCap:kCALineCapRound];// [fillLayer setLineJoin:kCALineJoinRound];// [fillLayer setLineWidth:1];// [fillLayer setStrokeColor:[UIColor clearColor].CGColor];// [fillLayer setFillColor:[UIColor orangeColor].CGColor];// fillLayer.path = fillPath.CGPath;// [self.layer addSublayer:fillLayer]; } //带渐变实心色的折线图 }else { _timer = [NSTimer timerWithTimeInterval:3.0/_dataArray.count repeats:YES block:^(NSTimer * _Nonnull timer) { UIBezierPath *path = [UIBezierPath bezierPath]; CGPoint firstPoint = [_dataArray[0] CGPointValue]; CGPoint nextPoint = [_dataArray[_nowIndex] CGPointValue]; [path moveToPoint:firstPoint]; for (int i = 0; i < _dataArray.count; i ++) { if (_nowIndex < i) { break; } if (_nowIndex != 0) { CGPoint point = [_dataArray[i] CGPointValue]; [path addLineToPoint:point]; } } _lineLayer.path = path.CGPath; [self.layer addSublayer:_lineLayer]; [path addLineToPoint:CGPointMake(nextPoint.x, self.height -LeftDistance)]; [path addLineToPoint:CGPointMake(firstPoint.x, self.height - LeftDistance)]; [path addLineToPoint:firstPoint]; _maskLayer.path = path.CGPath; _gradientLayer.mask = _maskLayer; [self.layer addSublayer:_gradientLayer]; _nowIndex ++ ; if (_nowIndex == _dataArray.count) { [_timer invalidate]; } }]; [[NSRunLoop currentRunLoop]addTimer:_timer forMode:NSDefaultRunLoopMode]; }//渐变实心的折线图带动画 }

福寿康宁的作用:折线图未有动画(即lineAnimationNone)

图片 3显示器快照2017-04-05 14.18.13.png

折线图有动画

图片 433655E7FE97C9A071DA5F40741180744.png

折线图带渐变色不拉动画(即lineFillAnimationNone)

图片 5显示屏快照2017-04-05 14.21.25.png

折线图实心带渐变色和动画片(即lineFillAnimation)

图片 6C4A05C3479E982F4131696E149564AD1.png

计算:那是友善写的二个简易折线图的不等等级次序,可是最终一个折线图带渐变色和动画片的是有题指标,因为当数据源分化的时候那几个动画的光阴也会不平等,小编立时取巧用四个长久的年华去除以数据源,可是出来的功力依然跟原本不多分歧,所以最后一种等级次序或许只是用作参考,希望各位有如何好的不二法门落到实处能够告知作者。

本文由永利402游戏网站-永利402com官方网站发布于网络编程,转载请注明出处:iOS表格的落实思路

关键词:

上一篇:下拉实现图片放大

下一篇:没有了