背景
来公司第2周，开发一个图表方面的公共控件。基本的样子如下：
chart.png
基本思路
查了一下，旧的工程里已经有关于图标的控件了，纯代码写的控件，功能也很全，基本能用。这次想来点不一样的实现方法。
- X坐标，Y坐标等用xib实现
- 具体的画图部分，仍然用代码实现
- 代码写界面的view可以在xib中预览
第3点，代码界面在xib中预览好像只能用Swift做，这里没有做
技术储备
贝塞尔曲线
+ (instancetype)bezierPath;
+ (instancetype)bezierPathWithRect:(CGRect)rect;
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
- (void)moveToPoint:(CGPoint)point;
- (void)addLineToPoint:(CGPoint)point;
- (void)closePath;
@property(nonatomic) CGFloat lineWidth;
- (void)fill;
- (void)stroke;
CALayer
+ (instancetype)layer;
@property CGRect bounds;
@property CGRect frame;
@property(getter=isHidden) BOOL hidden;
@property(nullable, readonly) CALayer *superlayer;
@property(nullable, copy) NSArray *sublayers;
- (void)addSublayer:(CALayer *)layer;
- (void)removeFromSuperlayer;
- (void)insertSublayer:(CALayer *)layer atIndex:(unsigned)idx;
- (void)insertSublayer:(CALayer *)layer below:(nullable CALayer *)sibling;
- (void)insertSublayer:(CALayer *)layer above:(nullable CALayer *)sibling;
- (void)replaceSublayer:(CALayer *)layer with:(CALayer *)layer2;
@property(nullable, strong) CALayer *mask;
@property BOOL masksToBounds;
- (CGPoint)convertPoint:(CGPoint)p fromLayer:(nullable CALayer *)l;
- (CGPoint)convertPoint:(CGPoint)p toLayer:(nullable CALayer *)l;
- (CGRect)convertRect:(CGRect)r fromLayer:(nullable CALayer *)l;
- (CGRect)convertRect:(CGRect)r toLayer:(nullable CALayer *)l;
- (void)setNeedsDisplay;
- (void)setNeedsDisplayInRect:(CGRect)r;
@property(nullable) CGColorRef backgroundColor;
@property CGFloat cornerRadius;
@property CGFloat borderWidth;
@property(nullable) CGColorRef borderColor;
@property(nullable) CGColorRef shadowColor;
@property CGSize shadowOffset;
@property CGFloat shadowRadius;
CAShapeLayer
@property(nullable) CGPathRef path;
@property(nullable) CGColorRef fillColor;
@property(nullable) CGColorRef strokeColor;
@property CGFloat lineWidth;
CAGradientLayer
@property(nullable, copy) NSArray *colors;
@property CGPoint startPoint;
@property CGPoint endPoint;
这个是填充path围起来的区域的渐变颜色的
CATextLayer
@property(nullable, copy) id string; // 可接受属性字符串
@property(nullable) CFTypeRef font;
@property CGFloat fontSize;
@property(nullable) CGColorRef foregroundColor;
@property(getter=isWrapped) BOOL wrapped;
@property(copy) NSString *truncationMode;
@property(copy) NSString *alignmentMode;
注意事项
- 变换约束之后，更新界面，取得正确的frame
- (void)adjustYAxisLabelConstraint {
NSInteger const yAxisCellNumber = 5;
CGFloat labelToLabelOffset = self.plotView.bounds.size.height / yAxisCellNumber;
for (NSLayoutConstraint *item in self.yAxisLabelConstraintArray) {
item.constant = labelToLabelOffset;
}
// 变换约束之后，重新布局
[self layoutIfNeeded];
}
当时由于
[self layoutIfNeeded]这句没加，导致frame的数值没更新，画图页面异常。
在用frame之前，调用[self layoutIfNeeded]是一个好习惯
- (void)loadPAGridLayer {
if (!self.loadGridLayer) {
return;
}
if (nil == self.gridLayer) {
// 这里要取frame，所以先更新一下autolayout，防止数据是旧的
[self layoutIfNeeded];
self.gridLayer = [[PAGridLayer alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
[self.layer addSublayer:self.gridLayer];
}
}
- 由于layer还只能用frame，不能用autolayout，所以显示和隐藏用重绘所有图层，是否加载相应的图层比较方便
-
CAGradientLayer对封闭的区域起作用。如果给的路径不封闭，它自己会自动给闭。
- (CGPathRef)drawLineWithMin:(CGFloat)min max:(CGFloat)max datas:(NSArray *)datas {
UIBezierPath *path = [UIBezierPath bezierPath];
NSArray *xAxisArray = [self generateXAxisArrayWithCount:datas.count];
NSArray *yAxisArray = [self generateYAxisArrayWithMin:min max:max datas:datas];
for (NSInteger i = 0; i < xAxisArray.count; i++) {
CGPoint point = CGPointMake([xAxisArray[i] floatValue], [yAxisArray[i] floatValue]);
if (0 == i) {
[path moveToPoint:point];
} else {
[path addLineToPoint:point];
}
}
return path.CGPath;
}
这样写，就会是一个折线的区域填充，自动闭合，一个不规则的区域。
- (CGPathRef)drawLineWithMin:(CGFloat)min max:(CGFloat)max datas:(NSArray *)datas {
UIBezierPath *path = [UIBezierPath bezierPath];
NSArray *xAxisArray = [self generateXAxisArrayWithCount:datas.count];
NSArray *yAxisArray = [self generateYAxisArrayWithMin:min max:max datas:datas];
for (NSInteger i = 1; i < xAxisArray.count; i++) {
CGPoint startPoint = CGPointMake([xAxisArray[i - 1] floatValue], [yAxisArray[i - 1] floatValue]);
CGPoint endPoint = CGPointMake([xAxisArray[i] floatValue], [yAxisArray[i] floatValue]);
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[path closePath];
}
return path.CGPath;
}
这样写，就出现一个渐变的折线了。看上去是折线，实际上上是一堆闭合直线的组合。不过这样做有一个缺点，就是折线结合部不连续，很容易看出有一个缺口。原因就是这是N个闭合区域的组合，各组合之间有空隙，要补起来就会很困难。
- (CGPathRef)drawLineWithMin:(CGFloat)min max:(CGFloat)max datas:(NSArray *)datas {
UIBezierPath *path = [UIBezierPath bezierPath];
NSArray *xAxisArray = [self generateXAxisArrayWithCount:datas.count];
NSArray *yAxisArray = [self generateYAxisArrayWithMin:min max:max datas:datas];
// CAGradientLayer 是对一个区域做颜色渐变。所以折线从起点到终点又回到原点，表示闭合的区域
// 往前画折线
for (NSInteger i = 0; i < xAxisArray.count; i++) {
CGPoint point = CGPointMake([xAxisArray[i] floatValue], [yAxisArray[i] floatValue]);
if (0 == i) {
[path moveToPoint:point];
} else {
[path addLineToPoint:point];
}
}
// 按原路返回
for (NSInteger i = (xAxisArray.count - 2); i > 0; i--) {
CGPoint point = CGPointMake([xAxisArray[i] floatValue], [yAxisArray[i] floatValue]);
[path addLineToPoint:point];
}
// 形成封闭区域
[path closePath];
return path.CGPath;
}
这样做，就成为一个闭合区域，折角处的缺口就不见了。
例子代码
zhangxusong888/PAChartView-xib
这里用到了第三方库Masonry，方便代码加限制，用的时候，要先装CocoaPods，执行以下pod install命令，从git下载这个库的源代码才能编译通过。这也是CocoaPods的一个弱点，用Carthage就不会有这种问题，它是用framework的，不会整合库的源代码进工程。
zhangxusong888/PAChartView-code
代码调用的图表控件，功能一样
参考文章
可视化开发，IB 的新时代
onevcat/ClockFaceView
CALayer详解
CAShapeLayer和CAGradientLayer
使用CAShapeLayer与UIBezierPath画出想要的图形
UIBezierPath精讲
CAGradientLayer的一些属性解析