iOS简易柱状图(带动画)--新手入门篇

叨逼叨

好久没更新博客了，才几个月，发生了好多事情，处理了好多事情。不变的是写代码依然在继续。

做点啥子

看看objective-c的书，学着写了个柱状图，只是练习的demo而已，iOS上的图表控件已经有非常好的解决方案了。

PNChart:https://github.com/kevinzhow/PNChart

这个控件是是挺不错了，喜欢的朋友可以看看，本文很多地方借鉴了PNChart，就当学习源码也可以

动手动手

先上图先上图，配色直接用PNChart的了，还蛮喜欢这种配色风格，一直不太喜欢把手机横过来，所以做了个竖版的，还有很多不完善，学的时间也短，大家别见笑哈~

ps：附带赠送双色球号码一注，大家可以去买，万一中了呢，由于女朋友老爹热爱福利事业，就写一个给他老人家玩玩，具体实现有人需要在贴吧，哈哈，我就是这么骗回复的

               

相关知识点

毕竟是新手入门的东西，列一下相关的知识点，如果后面有时间再一个个展开吧

OC语法方面：

NSArray，NSString，@interface，@property，@nonatomic，@implementation，id，alloc等

iOS方面：

UIView，CAShapeLayer，UIBezierPath，CATextLayer，UIColor，CABasicAnimation

撸代码

言归正传，看看代码实现部分

首先需要定义LZBar.h，包含了基本的声明，当然还缺少了X轴的文字说明，大家可以自己扩展下:

 #import <UIKit/UIKit.h>
 #import <QuartzCore/QuartzCore.h>

 @interface LZBar : UIView{
     CAShapeLayer *backgroundLayer; //背景层
     UIBezierPath *backgroundPath; //背景赛贝尔路径
     CAShapeLayer *barLayer; //柱状层
     UIBezierPath *barPath; //柱状赛贝尔路径
     CATextLayer *textLayer; //数值文字显示层
     CATextLayer *tittleLayer; //标题文字说明层
 }

 @property (nonatomic) UIColor *backgroundColor;//背景色
 @property (nonatomic) UIColor *barColor;//柱的颜色
 @property (nonatomic) float barProgress;//柱子长度 0-1之间
 @property (nonatomic) float barWidth;//柱子宽度
 @property (nonatomic) NSString *barText;//数值
 @property (nonatomic) NSString *barTittle;//标题

 @end

 #import "LZBar.h"

 @implementation LZBar

 //初始化
 - (id)initWithFrame:(CGRect)frame
 {
     self = [super initWithFrame:frame];
     if (self)
     {
         backgroundLayer = [CAShapeLayer new];
         [self.layer addSublayer:backgroundLayer];
         backgroundLayer.strokeColor = LZGrey.CGColor;
         backgroundLayer.frame = self.bounds;

         barLayer = [CAShapeLayer new];
         [self.layer addSublayer:barLayer];
         barLayer.strokeColor = LZGreen.CGColor;
         barLayer.lineCap = kCALineCapButt;
         barLayer.frame = self.bounds;

         self.barWidth = self.bounds.size.width;
     }
     return self;
 }

 //设置背景
 - (void)setBackground
 {
     backgroundPath = [UIBezierPath bezierPath];
     [backgroundPath moveToPoint:CGPointMake(self.bounds.origin.x, self.bounds.origin.y+self.bounds.origin.y+self.bounds.size.height/)];
     [backgroundPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.origin.y+self.bounds.origin.y+self.bounds.size.height/)];
     [backgroundPath setLineWidth:_barWidth];
     [backgroundPath setLineCapStyle:kCGLineCapSquare];
     backgroundLayer.path = backgroundPath.CGPath;
 }

 //设置百分百（显示动画）
 - (void)setProgress
 {
     barPath = [UIBezierPath bezierPath];
     [barPath moveToPoint:CGPointMake(self.bounds.origin.x, self.bounds.origin.y+self.bounds.origin.y+self.bounds.size.height/)];
     [barPath addLineToPoint:CGPointMake(self.bounds.size.width*_barProgress, self.bounds.origin.y+self.bounds.origin.y+self.bounds.size.height/)];
     [barPath setLineWidth:_barWidth];
     [barPath setLineCapStyle:kCGLineCapSquare];

     CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
     pathAnimation.duration = 1.0;
     pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
     pathAnimation.fromValue = @0.0f;
     pathAnimation.toValue = @1.0f;
     [barLayer addAnimation:pathAnimation forKey:nil];

     barLayer.strokeEnd = 1.0;

     barLayer.path = barPath.CGPath;
 }

 //设置柱子的宽度
 - (void)setBarWidth:(float)progressWidth
 {
     _barWidth = progressWidth;
     backgroundLayer.lineWidth = _barWidth;
     barLayer.lineWidth = _barWidth;

     [self setBackground];
     [self setProgress];
 }

 //设置背景色
 - (void)setBackgroundColor:(UIColor *)backgroundColor
 {
     backgroundLayer.strokeColor = backgroundColor.CGColor;
 }

 //设置柱子颜色
 - (void)setBarColor:(UIColor *)barColor
 {
     barLayer.strokeColor = barColor.CGColor;
 }

 //设置柱子进度
 - (void)setBarProgress:(float)progress
 {
     _barProgress = progress;
     [self setProgress];
 }

 //设置数值
 - (void)setBarText:(NSString*)text{
     textLayer = [CATextLayer layer];
     textLayer.string = text;
     textLayer.foregroundColor = [[UIColor blackColor] CGColor];
     textLayer.fontSize = ;
     textLayer.alignmentMode = kCAAlignmentLeft;

     textLayer.bounds = barLayer.bounds;
     textLayer.position = CGPointMake(self.bounds.size.width*/ +  , self.bounds.size.height/);
     CABasicAnimation *fade = [self fadeAnimation];
     [textLayer addAnimation:fade forKey:nil];
     [self.layer addSublayer:textLayer];
 }

 //设置标题
 - (void)setBarTittle:(NSString*)tittle{
     tittleLayer = [CATextLayer layer];
     tittleLayer.string = tittle;
     tittleLayer.foregroundColor = [[UIColor blackColor] CGColor];
     tittleLayer.fontSize = ;
     tittleLayer.alignmentMode = kCAAlignmentRight;

     tittleLayer.bounds = barLayer.bounds;
     tittleLayer.position = CGPointMake(-self.bounds.size.width/ -  , self.bounds.size.height/);
     CABasicAnimation *fade = [self fadeAnimation];
     [tittleLayer addAnimation:fade forKey:nil];
     [self.layer addSublayer:tittleLayer];
 }

 //渐变动画
 -(CABasicAnimation*)fadeAnimation
 {
     CABasicAnimation* fadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
     fadeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
     fadeAnimation.toValue = [NSNumber numberWithFloat:1.0];
     fadeAnimation.duration = 2.0;

     return fadeAnimation;
 }
 @end

有了Bar之后问题就变的简单的多了，我们可以在构建一个Chart，方便我们直接使用，防止内容过长，看起来累，代码我就折叠了~

 #import <UIKit/UIKit.h>

 @interface LZChart : UIView{
     CGSize size;//图表大小
 }

 @property (nonatomic)NSArray *numLabels;//值
 @property (nonatomic)NSArray *nameLabels;//名称
 @property (nonatomic)float maxNum;//最大值

 @property (nonatomic)NSInteger barSpacing;//两根柱状图的间距

 @property (nonatomic) CGFloat chartMarginLeft;
 @property (nonatomic) CGFloat chartMarginRight;
 @property (nonatomic) CGFloat chartMarginTop;
 @property (nonatomic) CGFloat chartMarginBottom;

 - (void)show;//现实图标

 @end

LZChart.h

 #import "LZChart.h"
 #import "LZBar.h"

 @implementation LZChart

 -(id)initWithFrame:(CGRect)frame{
     self = [super initWithFrame:frame];
     if (self) {
         size = frame.size;
         _chartMarginTop = 30.0;
         _chartMarginBottom = 30.0;
         _chartMarginLeft = 30.0;
         _chartMarginRight = 30.0;
         _barSpacing = ;
     }
     return self;
 }

 -(void)show{
     [self setMaxNum];

     float barCount = [_numLabels count];
     float barMaxWidth = size.width - _chartMarginLeft - _chartMarginRight ;
     float barHeight = (size.height - _chartMarginTop - _chartMarginBottom) / barCount - _barSpacing;
     //防止柱状图太粗
     if(barHeight > ){
         barHeight = ;
     }
     float barWidth = ;

     for(int i = ;i<barCount;i++){
         LZBar *bar = [[LZBar alloc] initWithFrame:CGRectMake(_chartMarginLeft, _chartMarginTop + i*(barHeight + _barSpacing), barMaxWidth, barHeight)];
         barWidth = [_numLabels[i] floatValue];
         bar.barProgress = barWidth/_maxNum;
         bar.barWidth = barHeight;
         bar.barText = [NSString stringWithFormat:@"%.1f",barWidth];
         bar.barTittle = [NSString stringWithFormat:@"%@",_nameLabels[i]];
         [self addSubview:bar];
     }
 }

 -(void)setMaxNum{
     _maxNum = ;
     for (id num in _numLabels) {
         if ([num floatValue] > _maxNum) {
             _maxNum = [num floatValue] ;
         }
     }
 }
 @end

LZChart.m

然后在需要添加的UIView直接调用，是不是很容易呢

     LZChart *chart = [[LZChart alloc] initWithFrame:CGRectMake(, , , )];
     chart.numLabels = [NSArray arrayWithObjects:@,@,@,@, nil];
     chart.nameLabels = [NSArray arrayWithObjects:@"第一",@"第二",@"第三",@"第四", nil];
     [self.view addSubview:chart];
     [chart show];

最终效果：

希望大家喜欢~

博客地址： http://www.cnblogs.com/nightcat/
博客版权： 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。
如文中有不妥或者错误的地方还望高手的指出，以免误人子弟。如果觉得本文对您有所帮助请【推荐】一下！如果你有更好的建议，不妨留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。