iOS中如何用纯代码绘制比较复杂图表UI
2017-06-16 16:59
375 查看
首先给出产品需求的视觉效果图,如下:
下面是实现的效果图,如下:
看了两者的效果图,基本上满足产品的要求。需要再次说明下:档位是不固定的,可能是三档、四档、五档,但超过五档,也可以没有,也可以是一档。如果是固定的档位,其实实现起来还简单些,如果是全动态的布局的话,那考虑的东西和难度是会增加的。所以简单的也不用说,直接上动态布局后实现的代码。
头文件如下,里面基本上没有什么,只有一个数据源。
真正的硬菜来了。.m文件的代码内容如下:
下面再给出数据源的数据结构助大家更好理解。如下图所示:
最后,欢迎大家批评指正
。
下面是实现的效果图,如下:
看了两者的效果图,基本上满足产品的要求。需要再次说明下:档位是不固定的,可能是三档、四档、五档,但超过五档,也可以没有,也可以是一档。如果是固定的档位,其实实现起来还简单些,如果是全动态的布局的话,那考虑的东西和难度是会增加的。所以简单的也不用说,直接上动态布局后实现的代码。
头文件如下,里面基本上没有什么,只有一个数据源。
// // MTAReductionTradeAmountView.h // Pods // // Created by yuzhuo on 2017/6/13. // // #import <UIKit/UIKit.h> @interface MTAReductionTradeAmountView : UIView /** data */ @property (nonatomic,strong) NVModelBaseCommiReduceStair *data; @end
真正的硬菜来了。.m文件的代码内容如下:
// // MTAReductionTradeAmountView.m // Pods // // Created by yuzhuo on 2017/6/13. // // #import "MTAReductionTradeAmountView.h" @interface MTAReductionTradeAmountView() @property (nonatomic,strong) UILabel *topLocateOne, *topLocateTwo, *topLocateThree, *topLocateFour, *topLocateFive, *topLocateSix; @property (nonatomic,strong) UILabel *nowTradeAmount; @property (nonatomic,strong) UILabel *levelOneReduction, *levelTwoReduction, *levelThreeReduction, *levelFourReduction, *levelFiveReduction; @property (nonatomic,strong) UIView *leftHighLightLine; @property (nonatomic,strong) UIImageView *circleImageView; @property (nonatomic,strong) NSMutableArray<UILabel *> *topLoacteArr, *levelReductionArr, *leveNameArr; /** verticalLineArr */ @property (nonatomic,strong) NSMutableArray<UIView *> *verticalLineArr; @property (nonatomic,assign) CGFloat seperatorWidth; /** levelCount */ @property (nonatomic,assign) NSInteger levelCount, locateLevel; /** amount */ @property (nonatomic,assign) double reduceAmount; /** font_13 */ @property (nonatomic,strong) UIFont *font_13; @end @implementation MTAReductionTradeAmountView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.topLoacteArr = [NSMutableArray new]; self.levelReductionArr = [NSMutableArray new]; self.leveNameArr = [NSMutableArray new]; self.verticalLineArr = [NSMutableArray new]; self.font_13 = [UIFont systemFontOfSize:12.f]; [self initSubViews]; } return self; } - (void)initSubViews{ [self createTopLocateView]; [self createReductionLevelView]; [self addToArray]; [self createVerticalLine]; [self createHorizenLine]; [self createHighLightLine]; [self createCircleImage]; [self createNowTradeAmount]; [self createLevelLabel]; } - (void)layoutSubviews{ [super layoutSubviews]; self.nowTradeAmount.left = ScreenWidth/2 - self.nowTradeAmount.width/2; self.nowTradeAmount.height = 25; self.nowTradeAmount.width = self.nowTradeAmount.width + 20; for (int i =0; i<self.levelCount; i++) { self.verticalLineArr[i].left = 29.5 + i * self.seperatorWidth; self.leveNameArr[i].left = i * self.seperatorWidth + 30 + (self.seperatorWidth - self.leveNameArr[i].width)/2; self.topLoacteArr[i].centerX = 30 + i * self.seperatorWidth; if(i == self.levelCount - 1){ self.topLoacteArr[self.levelCount].centerX = 30 + self.levelCount * self.seperatorWidth; self.verticalLineArr[self.levelCount].left = 29.5 + self.levelCount * self.seperatorWidth; } self.levelReductionArr[i].bottom = self.topLocateOne.bottom + 95; self.levelReductionArr[i].left = i * self.seperatorWidth + 30 + (self.seperatorWidth - self.levelReductionArr[i].width)/2; } self.leftHighLightLine.left = 30; if(self.locateLevel <0){ self.leftHighLightLine.width = 0; }else if(self.locateLevel <=self.levelCount){ self.leftHighLightLine.width = ((self.locateLevel - 1) + [self getLineRate])* self.seperatorWidth; }else{ self.leftHighLightLine.width = SCREEN_WIDTH - 60-3; } self.leftHighLightLine.top = self.topLocateOne.bottom + 49; self.circleImageView.left = self.leftHighLightLine.right; } - (void)createTopLocateView{ self.topLocateOne = [[UILabel alloc]init]; [self initLocateLabel:self.topLocateOne index:0]; self.topLocateTwo = [[UILabel alloc]init]; [self initLocateLabel:self.topLocateTwo index:1]; self.topLocateThree = [[UILabel alloc]init]; [self initLocateLabel:self.topLocateThree index:2]; self.topLocateFour = [[UILabel alloc]init]; [self initLocateLabel:self.topLocateFour index:3]; self.topLocateFive = [[UILabel alloc]init]; [self initLocateLabel:self.topLocateFive index:4]; self.topLocateSix = [[UILabel alloc]init]; [self initLocateLabel:self.topLocateSix index:5]; } - (void)createReductionLevelView{ self.levelOneReduction = [[UILabel alloc]init]; [self createLevelReduction:self.levelOneReduction index:0]; self.levelTwoReduction = [[UILabel alloc]init]; [self createLevelReduction:self.levelTwoReduction index:1]; self.levelThreeReduction = [[UILabel alloc]init]; [self createLevelReduction:self.levelThreeReduction index:2]; self.levelFourReduction = [[UILabel alloc]init]; [self createLevelReduction:self.levelFourReduction index:3]; self.levelFiveReduction = [[UILabel alloc]init]; [self createLevelReduction:self.levelFiveReduction index:4]; } - (void)initLocateLabel:(UILabel *)locateLabel index:(NSInteger) index{ locateLabel.top = 0; locateLabel.textColor = [UIColor nvColorWith999]; locateLabel.font = self.font_13; locateLabel.height = self.font_13.lineHeight; [self addSubview:locateLabel]; } - (void)createVerticalLine{ for (int i = 0; i<6; i++) { UIView *line = [[UIView alloc]init]; line.top = self.topLocateOne.bottom + 5; line.backgroundColor = [UIColor nvColorWithf0]; line.width = 1; line.height = 90; [self addSubview:line]; [self.verticalLineArr addObject:line]; } } - (void)createHorizenLine{ UIView *line = [[UIView alloc]initWithFrame:CGRectMake(30, self.topLocateOne.bottom + 49, ScreenWidth - 60, 2)]; line.backgroundColor = [UIColor nvColorWithccc]; [self addSubview:line]; } - (void)createHighLightLine{ self.leftHighLightLine = [[UIView alloc]init]; self.leftHighLightLine.left = 30; self.leftHighLightLine.top = self.topLocateOne.bottom + 49; self.leftHighLightLine.backgroundColor = [UIColor nvColorWithf63]; self.leftHighLightLine.height = 2; [self addSubview:self.leftHighLightLine]; } - (void) createCircleImage{ self.circleImageView = [[UIImageView alloc] init]; self.circleImageView.width = 6; self.circleImageView.height = 6; self.circleImageView.backgroundColor = [UIColor whiteColor]; [self.circleImageView.layer setBorderColor:[UIColor nvColorWithf63].CGColor];//边框颜色 [self.circleImageView.layer setMasksToBounds:YES]; [self.circleImageView.layer setCornerRadius:3]; //设置矩形四个圆角半径 [self.circleImageView.layer setBorderWidth:2.0]; //边框宽度 self.circleImageView.top = 47 + self.topLocateOne.bottom; [self addSubview:self.circleImageView]; } - (void)createNowTradeAmount{ self.nowTradeAmount = [[UILabel alloc]init]; self.nowTradeAmount.textColor = [UIColor nvColorWithf63]; self.nowTradeAmount.textAlignment = NSTextAlignmentCenter; self.nowTradeAmount.font = self.font_13; self.nowTradeAmount.top = self.topLocateOne.bottom + 15; self.nowTradeAmount.height = 25; self.nowTradeAmount.backgroundColor = [UIColor colorWithRed:1 green:0.4 blue:0.2 alpha:0.1]; [self addSubview:self.nowTradeAmount]; } - (void)createLevelLabel{ for (int i = 0; i<5; i++) { UILabel *levelLabel = [[UILabel alloc]init]; levelLabel.top = self.topLocateOne.bottom + 54.5 + 5; levelLabel.textColor = [UIColor nvColorWith999]; levelLabel.font = self.font_13; switch (i) { case 0: levelLabel.text = @"一档"; break; case 1: levelLabel.text = @"二档"; break; case 2: levelLabel.text = @"三档"; break; case 3: levelLabel.text = @"四档"; break; case 4: levelLabel.text = @"五档"; break; default: levelLabel.text = @"一档"; break; } [self.leveNameArr addObject:levelLabel]; [self addSubview:levelLabel]; } } - (void)createLevelReduction:(UILabel *)levelLabel index:(NSInteger) index{ levelLabel.textColor = [UIColor nvColorWith999]; levelLabel.font = self.font_13; levelLabel.bottom = self.topLocateOne.bottom + 95; levelLabel.left = index * self.seperatorWidth + 30 + (self.seperatorWidth - levelLabel.width)/2; [self addSubview:levelLabel]; } - (void)addToArray{ [self.topLoacteArr addObject:self.topLocateOne]; [self.topLoacteArr addObject:self.topLocateTwo]; [self.topLoacteArr addObject:self.topLocateThree]; [self.topLoacteArr addObject:self.topLocateFour]; [self.topLoacteArr addObject:self.topLocateFive]; [self.topLoacteArr addObject:self.topLocateSix]; [self.levelReductionArr addObject:self.levelOneReduction]; [self.levelReductionArr addObject:self.levelTwoReduction]; [self.levelReductionArr addObject:self.levelThreeReduction]; [self.levelReductionArr addObject:self.levelFourReduction]; [self.levelReductionArr addObject:self.levelFiveReduction]; } - (void)setData:(NVModelBaseCommiReduceStair *)data{ _data = data; self.levelCount = data.gearconfigdtos.count; if(self.levelCount > 0) self.seperatorWidth = (SCREEN_WIDTH- 60)/self.levelCount; self.reduceAmount = data.currentradeamount.floatValue; for (int i = 0; i<self.levelCount; i++) { if(i == 0){ self.topLoacteArr[i].text = @"0"; }else{ self.topLoacteArr[i].text = [NSString stringWithFormat:@"%@%@", data.gearconfigdtos[i].beginamount, @"k"]; } [self.topLoacteArr[i] sizeToFit]; if(i == self.levelCount - 1){ self.topLoacteArr[self.levelCount].text = [NSString stringWithFormat:@"%@%@", data.gearconfigdtos[i].endamount, @"k"]; [self.topLoacteArr[self.levelCount] sizeToFit]; if(self.reduceAmount > data.gearconfigdtos[i].endamount.integerValue * 1000){ self.locateLevel = self.levelCount + 1; } } self.levelReductionArr[i].text = data.gearconfigdtos[i].savedcommission; [self.levelReductionArr[i] sizeToFit]; [self.leveNameArr[i] sizeToFit]; if(self.reduceAmount <= data.gearconfigdtos[i].endamount.integerValue*1000 &&self.reduceAmount > data.gearconfigdtos[i].beginamount.integerValue * 1000){ self.locateLevel = i + 1; } } if(self.reduceAmount<0){ self.locateLevel = -1; } [self setAmount:data.currentradeamount]; } - (void)setAmount:(NSString *)amount{ self.nowTradeAmount.text = [NSString stringWithFormat:@"%@%@", @"截止到昨日的交易额:",amount]; [self.nowTradeAmount sizeToFit]; } - (CGFloat)getLineRate{ NSInteger begianInt = self.data.gearconfigdtos[self.locateLevel - 1].beginamount.integerValue; NSInteger endInt = self.data.gearconfigdtos[self.locateLevel - 1].endamount.integerValue; return (self.reduceAmount - begianInt*1000)/((endInt - begianInt)*1000); } @end
下面再给出数据源的数据结构助大家更好理解。如下图所示:
最后,欢迎大家批评指正
。
相关文章推荐
- IOS中如何绘制带有边框的button的按钮,附代码;
- (转)iOS并发编程笔记,包含GCD,Operation Queues,Run Loops,如何在后台绘制UI,后台I/O处理,最佳安全实践避免互斥锁死锁优先级反转等,以及如何使用GCD监视进程文件文件夹,并发测试的方案等
- iOS并发编程笔记,包含GCD,Operation Queues,Run Loops,如何在后台绘制UI,后台I/O处理,最佳安全实践避免互斥锁死锁优先级反转等,以及如何使用GCD监视进程文件文件夹,并发测试的方案等
- IOS开发-UI学习-使用代码创建button
- ios开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- 如何在ASP.NET中用OWC绘制图表(1)
- 程序员如何才能提高自己?通过一次重构代码讲解自己的感受【有代码比较】
- 如何用ios 5开发ipad上的复杂应用程序
- iOS如何获取当前日期前后N天的时间示例代码
- Android 和 iOS 团队开发中如何快速定位代码修改者等提交信息
- iOS绘制图表时几种动画展示特效
- Libgdx中如何绘制带透明度的3D模型相关实现代码 2种方案
- iOS开发UI基础—11应用程序管理之从代码的逐步优化看MVC
- Unity5.1 创建IOS的Xcode项目. 如何手动增量更新应用的资源和代码.
- JS中如何比较两个Json对象是否相等实例代码
- 实时显示iOS编写UI代码效果
- 如何使用iOS 8 指纹识别,代码、示例
- ios如何利用系统邮件发送反馈 代码
- 利用iOS绘制图片生成随机验证码示例代码
- iOS_Swift — UI控件代码大全