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/
博客版權： 本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接。
如文中有不妥或者錯誤的地方還望高手的指出，以免誤人子弟。如果覺得本文對您有所幫助請【推薦】一下！如果你有更好的建議，不妨留言一起討論，共同進步！ 再次感謝您耐心的讀完本篇文章。