如何开发一个评分控件(二)：CALayer遮罩(mask)
2016-10-08 本文已影响233人
前尘如梦
评分控件的最终效果
前一篇文章已经把UIBezierPath对象的一些操作基础都做了说明，现在离最终效果只差最后一步了。需要了解前面文章的内容，可以点击链接如何开发一个评分控件(一)进行查看。
如果只想直接使用已经封装好的控件，可以直接点击https://github.com/aijun198600/AJScoreView使用。
下面开始正文吧， 我们将会使用两种不同的方法来实现，一种是在UIView的drawRect方法中直接绘制，一种是使用CAShapeLayer的mask来实现。
准备开始
首先我们需要先下载一张svg矢量图，比如twitter的小鸟图标，然后svg拖动到PaintCode里面，就可以自动生成UIBezierPath对象的代码了。
PaintCode矢量图.png
通过PaintCode生成的UIBezierPath对象代码，我们只需要UIBezierPath的对象，不需要颜色填充，整理后代码如下:
UIBezierPath* path3611Path = [UIBezierPath bezierPath];
[path3611Path moveToPoint: CGPointMake(93.72, 242.19)];
[path3611Path addCurveToPoint: CGPointMake(267.68, 68.23) controlPoint1: CGPointMake(206.18, 242.19) controlPoint2: CGPointMake(267.68, 149.02)];
[path3611Path addCurveToPoint: CGPointMake(267.5, 60.33) controlPoint1: CGPointMake(267.68, 65.58) controlPoint2: CGPointMake(267.62, 62.95)];
[path3611Path addCurveToPoint: CGPointMake(298, 28.67) controlPoint1: CGPointMake(279.44, 51.7) controlPoint2: CGPointMake(289.82, 40.93)];
[path3611Path addCurveToPoint: CGPointMake(262.89, 38.29) controlPoint1: CGPointMake(287.05, 33.54) controlPoint2: CGPointMake(275.26, 36.82)];
[path3611Path addCurveToPoint: CGPointMake(289.78, 4.48) controlPoint1: CGPointMake(275.51, 30.72) controlPoint2: CGPointMake(285.2, 18.75)];
[path3611Path addCurveToPoint: CGPointMake(250.95, 19.32) controlPoint1: CGPointMake(277.96, 11.48) controlPoint2: CGPointMake(264.88, 16.57)];
[path3611Path addCurveToPoint: CGPointMake(206.32, 0) controlPoint1: CGPointMake(239.79, 7.43) controlPoint2: CGPointMake(223.91, 0)];
[path3611Path addCurveToPoint: CGPointMake(145.18, 61.13) controlPoint1: CGPointMake(172.56, 0) controlPoint2: CGPointMake(145.18, 27.38)];
[path3611Path addCurveToPoint: CGPointMake(146.76, 75.07) controlPoint1: CGPointMake(145.18, 65.93) controlPoint2: CGPointMake(145.71, 70.6)];
[path3611Path addCurveToPoint: CGPointMake(20.74, 11.19) controlPoint1: CGPointMake(95.95, 72.52) controlPoint2: CGPointMake(50.89, 48.19)];
[path3611Path addCurveToPoint: CGPointMake(12.46, 41.92) controlPoint1: CGPointMake(15.49, 20.23) controlPoint2: CGPointMake(12.46, 30.72)];
[path3611Path addCurveToPoint: CGPointMake(39.67, 92.82) controlPoint1: CGPointMake(12.46, 63.13) controlPoint2: CGPointMake(23.25, 81.86)];
[path3611Path addCurveToPoint: CGPointMake(11.98, 85.17) controlPoint1: CGPointMake(29.64, 92.51) controlPoint2: CGPointMake(20.21, 89.75)];
[path3611Path addCurveToPoint: CGPointMake(11.97, 85.95) controlPoint1: CGPointMake(11.97, 85.43) controlPoint2: CGPointMake(11.97, 85.68)];
[path3611Path addCurveToPoint: CGPointMake(61.02, 145.88) controlPoint1: CGPointMake(11.97, 115.56) controlPoint2: CGPointMake(33.04, 140.28)];
[path3611Path addCurveToPoint: CGPointMake(44.9, 148.04) controlPoint1: CGPointMake(55.88, 147.28) controlPoint2: CGPointMake(50.48, 148.04)];
[path3611Path addCurveToPoint: CGPointMake(33.41, 146.93) controlPoint1: CGPointMake(40.96, 148.04) controlPoint2: CGPointMake(37.13, 147.65)];
[path3611Path addCurveToPoint: CGPointMake(90.52, 189.4) controlPoint1: CGPointMake(41.19, 171.23) controlPoint2: CGPointMake(63.76, 188.9)];
[path3611Path addCurveToPoint: CGPointMake(14.58, 215.57) controlPoint1: CGPointMake(69.6, 205.8) controlPoint2: CGPointMake(43.23, 215.57)];
[path3611Path addCurveToPoint: CGPointMake(-0, 214.72) controlPoint1: CGPointMake(9.66, 215.57) controlPoint2: CGPointMake(4.79, 215.29)];
[path3611Path addCurveToPoint: CGPointMake(93.72, 242.19) controlPoint1: CGPointMake(27.06, 232.07) controlPoint2: CGPointMake(59.19, 242.19)];
path3611Path.miterLimit = 4;
我们将这段代码复制到drawRect方法中，并将上一篇文章中的复制平移的代码复制过来:
//复制平移操作
CGRect pathBounds = path3611Path.bounds;
UIBezierPath *totalPath = [UIBezierPath bezierPath];
for (int i = 0; i < 5; i ++) {
UIBezierPath *copyPath = [UIBezierPath bezierPath];
[copyPath appendPath:path3611Path];
[copyPath applyTransform:CGAffineTransformMakeTranslation((pathBounds.size.width + 5.0)*i,0)];
[totalPath appendPath:copyPath];
}
//缩放操作
CGRect totalPathRect = totalPath.bounds;
CGFloat scale;
if (totalPathRect.size.width / totalPathRect.size.height >= rect.size.width / rect.size.height) {
scale = rect.size.width / totalPathRect.size.width;
}else {
scale = rect.size.height / totalPathRect.size.height;
}
[totalPath applyTransform:CGAffineTransformMakeScale(scale,scale)];
//修正origin的x，y值, 使path位置居中
totalPathRect = totalPath.bounds;
CGFloat x = (rect.size.width - totalPathRect.size.width) / 2.0;
x = x - totalPathRect.origin.x;
CGFloat y = (rect.size.height - totalPathRect.size.height) / 2.0;
y = y - totalPathRect.origin.y;
[totalPath applyTransform:CGAffineTransformMakeTranslation(x, y)];
[[UIColor greenColor] setFill];
[totalPath fill];
和我们预期的一样，五只小鸟出来了！
五只小鸟.png
DrawRect实现
现在我们继续和上一篇文章一样，画出3.5分的效果，即是让3.5只小鸟一种颜色，2.5只小鸟，中间的那只小鸟会有两种颜色，这和我们上一篇文章绘制半个星星的原理是一样的。
首先也是选择部分的正方形的UIBezierPath对象，盖住3.5只小鸟的地方，然后使用设置setUsesEvenOddFillRule为YES，反转两次就会得到右边剩下的UIBezierPath对象。
CGFloat score = 3.5;
NSInteger i = floor(score);
CGFloat decimal = score - i;
CGFloat scaleW = pathBounds.size.width * scale;
CGFloat scalePadding = 5.0 * scale;
CGFloat selectW = (scaleW + scalePadding) * i + scaleW * decimal;
CGRect selectRect = CGRectMake(0, 0, selectW, rect.size.height);
UIBezierPath *selectRectPath = [UIBezierPath bezierPathWithRect:selectRect];
[totalPath appendPath:selectRectPath];
[totalPath setUsesEvenOddFillRule:YES];
[totalPath addClip];
[totalPath appendPath:selectRectPath];
[totalPath setUsesEvenOddFillRule:YES];
[totalPath addClip];
[[UIColor grayColor] setFill];
[totalPath fill];
其中scaleW = pathBounds.size.width * scale是缩放后的小鸟的frame大小，5.0 * scale是每个小鸟之间的间距。
3.5只小鸟.png
看起来我们的目标已经达到了，后续封装只要把UIBezierPath和score存起来就可以了，当score设置时，只要调用[self setNeedDisplay]强制重绘界面就可以了。
CAShapeLayer实现
使用CAShapeLayer和mask来实现评分控件，代码很多地方都是一样的，因为都是使用同样的UIBezierPath对象来进行填充。
首先创建一个AJScoreView类继承于UIView，然后添加两个CAShapeLayer用来显示两种不同的颜色，然后添加一个CALayer作为选择颜色的maskLayer。因为这次我们需要根据UIView的frame来调整大小，因为我们这次把代码挪动到layoutSubviews方法中。下面就是我们新建类的m文件，其中包括初始的方法。
#import "AJScoreView.h"
@implementation AJScoreView {
CAShapeLayer *unSelectedLayer;
CAShapeLayer *selectedLayer;
CALayer *maskLayer;
}
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if(self != nil) {
[self commonInit];
}
return self;
}
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if(self != nil) {
[self commonInit];
}
return self;
}
#pragma mark - Data Init methods
- (void)commonInit {
unSelectedLayer = [CAShapeLayer layer];
selectedLayer = [CAShapeLayer layer];
maskLayer = [CALayer layer];
maskLayer.backgroundColor = [UIColor blackColor].CGColor;
[self.layer addSublayer:unSelectedLayer];
[self.layer addSublayer:selectedLayer];
[self setNeedsLayout];
}
- (void)layoutSubviews {
[super layoutSubviews];
CGRect rect = self.bounds;
}
@end
我们把第一步生成五只小鸟的代码也复制到layoutSubviews方法的后面，然后把填充的颜色赋值进去。
//确定背景颜色
unSelectedLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
unSelectedLayer.path = totalPath.CGPath;
unSelectedLayer.fillColor = [UIColor grayColor].CGColor;
selectedLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
selectedLayer.path = totalPath.CGPath;
selectedLayer.fillColor = [UIColor greenColor].CGColor;
运行之后的效果就和第一步是一样的，都是五只绿色的小鸟，不过实际绿色的layer底部还有一层灰色的layer。现在我们需要将绿色的layer设置一个蒙版，将底部的那部分灰色的layer露出来。
//确定选择的区域
CGFloat score = 3.5;
NSInteger i = floor(score);
CGFloat decimal = score - i;
CGFloat scaleW = pathBounds.size.width * scale;
CGFloat scalePadding = 5.0 * scale;
CGFloat selectW = (scaleW + scalePadding) * i + scaleW * decimal;
CGRect selectRect = CGRectMake(0, 0, selectW, rect.size.height);
maskLayer.frame = selectRect;
selectedLayer.mask = maskLayer;
像上面的代码一样，selectRect的计算的区域还是和drawRect部分是一样。
DrawRect 上、CAShapeLayer下.png
可以看出来两个效果是一样的。我们现在只需要将score和path剥离出来就可以组成复用的控件了。两者的区别是，当score设置时，当使用DrawRect时需要调用[self setNeedDisplay];强制重绘界面，而使用CAShapeLayer时就需要调用[self setNeedsLayout];强制重新调整布局就好了。
下一章我们将讲解storyboard的支持，以及控件事件的支持。本文详细的代码可以查看https://github.com/aijun198600/AJScoreViewExample。
