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/2)];
    [backgroundPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.origin.y+self.bounds.origin.y+self.bounds.size.height/2)];
    [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/2)];
    [barPath addLineToPoint:CGPointMake(self.bounds.size.width*_barProgress, self.bounds.origin.y+self.bounds.origin.y+self.bounds.size.height/2)];
    [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 = 16;
    textLayer.alignmentMode = kCAAlignmentLeft;
    
    textLayer.bounds = barLayer.bounds;
    textLayer.position = CGPointMake(self.bounds.size.width*3/2 + 5 , self.bounds.size.height/2);
    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 = 16;
    tittleLayer.alignmentMode = kCAAlignmentRight;

    tittleLayer.bounds = barLayer.bounds;
    tittleLayer.position = CGPointMake(-self.bounds.size.width/2 - 5 , self.bounds.size.height/2);
    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

#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 = 20;
    }
    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 > 25){
        barHeight = 25;
    }
    float barWidth = 0;
    
    for(int i = 0;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 = 0;
    for (id num in _numLabels) {
        if ([num floatValue] > _maxNum) {
            _maxNum = [num floatValue] ;
        }
    }
}
@end

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

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

最终效果：

 

希望大家喜欢~

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