背景
來公司第2周钱骂，開發(fā)一個(gè)圖表方面的公共控件∨才簦基本的樣子如下：
chart.png
基本思路
查了一下见秽，舊的工程里已經(jīng)有關(guān)于圖標(biāo)的控件了，純代碼寫的控件讨盒，功能也很全解取，基本能用。這次想來點(diǎn)不一樣的實(shí)現(xiàn)方法返顺。
- X坐標(biāo)禀苦，Y坐標(biāo)等用xib實(shí)現(xiàn)
- 具體的畫圖部分，仍然用代碼實(shí)現(xiàn)
- 代碼寫界面的view可以在xib中預(yù)覽
第3點(diǎn)遂鹊，代碼界面在xib中預(yù)覽好像只能用Swift做振乏，這里沒有做
技術(shù)儲(chǔ)備
貝塞爾曲線
+ (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<CALayer *> *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;
這個(gè)是填充path圍起來的區(qū)域的漸變顏色的
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;
注意事項(xiàng)
- 變換約束之后，更新界面稿辙，取得正確的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];
}
當(dāng)時(shí)由于
[self layoutIfNeeded]這句沒加，導(dǎo)致frame的數(shù)值沒更新邻储，畫圖頁面異常。
在用frame之前旧噪，調(diào)用[self layoutIfNeeded]是一個(gè)好習(xí)慣
- (void)loadPAGridLayer {
if (!self.loadGridLayer) {
return;
}
if (nil == self.gridLayer) {
// 這里要取frame吨娜，所以先更新一下autolayout，防止數(shù)據(jù)是舊的
[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宦赠，所以顯示和隱藏用重繪所有圖層，是否加載相應(yīng)的圖層比較方便
-
CAGradientLayer對(duì)封閉的區(qū)域起作用。如果給的路徑不封閉勾扭，它自己會(huì)自動(dòng)給閉毡琉。
- (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;
}
這樣寫，就會(huì)是一個(gè)折線的區(qū)域填充妙色，自動(dòng)閉合桅滋，一個(gè)不規(guī)則的區(qū)域。
- (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;
}
這樣寫身辨，就出現(xiàn)一個(gè)漸變的折線了丐谋。看上去是折線煌珊，實(shí)際上上是一堆閉合直線的組合号俐。不過這樣做有一個(gè)缺點(diǎn)，就是折線結(jié)合部不連續(xù)定庵，很容易看出有一個(gè)缺口吏饿。原因就是這是N個(gè)閉合區(qū)域的組合，各組合之間有空隙蔬浙，要補(bǔ)起來就會(huì)很困難找岖。
- (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 是對(duì)一個(gè)區(qū)域做顏色漸變。所以折線從起點(diǎn)到終點(diǎn)又回到原點(diǎn)敛滋，表示閉合的區(qū)域
// 往前畫折線
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];
}
// 形成封閉區(qū)域
[path closePath];
return path.CGPath;
}
這樣做许布，就成為一個(gè)閉合區(qū)域，折角處的缺口就不見了绎晃。
例子代碼
zhangxusong888/PAChartView-xib
這里用到了第三方庫Masonry蜜唾，方便代碼加限制，用的時(shí)候庶艾，要先裝CocoaPods袁余，執(zhí)行以下pod install命令，從git下載這個(gè)庫的源代碼才能編譯通過咱揍。這也是CocoaPods的一個(gè)弱點(diǎn)颖榜，用Carthage就不會(huì)有這種問題，它是用framework的煤裙，不會(huì)整合庫的源代碼進(jìn)工程掩完。
zhangxusong888/PAChartView-code
代碼調(diào)用的圖表控件，功能一樣
參考文章
可視化開發(fā)硼砰，IB 的新時(shí)代
onevcat/ClockFaceView
CALayer詳解
CAShapeLayer和CAGradientLayer
使用CAShapeLayer與UIBezierPath畫出想要的圖形
UIBezierPath精講
CAGradientLayer的一些屬性解析
