叨逼叨
好久没更新博客了，才几个月，发生了好多事情，处理了好多事情。不变的是写代码依然在继续。
做点啥子
看看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/
博客版权： 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。
如文中有不妥或者错误的地方还望高手的指出，以免误人子弟。如果觉得本文对您有所帮助请【推荐】一下！如果你有更好的建议，不妨留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。
