iOS开发——打钩控件(单选按钮)的实现

需求

不以切换图片的方式，实现控件点击展示出已选择的效果，再点击取消选择，效果如图(静态+动画)，demo下载地址在文章结尾。

效果图

实现思路

自定义UIView，通过- (void)drawRect:(CGRect)rect方法，无动画效果的利用UIBezierPath绘制图案，有动画效果的利用UIBezierPath、CAShapeLayer、CABasicAnimation等绘图并添加动画

无动画效果的

主要技术点在于背景的绘制，勾的绘制，代码如下

        /** 填充背景 */
        CGPoint center = CGPointMake(rect.size.width*0.5,rect.size.height*0.5);
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width*0.5 - rect.size.width*0.03) startAngle:0 endAngle:M_PI*2 clockwise:YES];
        //设置颜色
        [self.backColor set];
        // 填充：必须是一个完整的封闭路径,默认就会自动关闭路径
        [path fill];
        
        /** 绘制勾 */
        UIBezierPath *path1 = [UIBezierPath bezierPath];
        path1.lineWidth = rect.size.width*0.06;
        // 设置起点
        [path1 moveToPoint:CGPointMake(rect.size.width*0.23, rect.size.height*0.43)];
        // 添加一根线到某个点
        [path1 addLineToPoint:CGPointMake(rect.size.width*0.45, rect.size.height*0.7)];
        [path1 addLineToPoint:CGPointMake(rect.size.width*0.79, rect.size.height*0.35)];
        //设置颜色
        [self.tickColor set];
        // 绘制路径
        [path1 stroke];

绘制非选中时的灰色圆环，与绘制勾类似，先设置好路线，再stroke

        CGPoint center = CGPointMake(rect.size.width*0.5,rect.size.height*0.5);
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width*0.5 - rect.size.width*0.03) startAngle:0 endAngle:M_PI*2 clockwise:YES];
        [[UIColor lightGrayColor] set];
        [path stroke];

有动画效果的

主要是勾的绘制不一样，像这种有有动画的，一般的思路都是以下四步
1、利用贝瑟尔线把路线设定好；
2、创建图层CAShapeLayer，让图层的路线等于贝瑟尔线的路线；
3、利用CABasicAnimation给图层添加动画；
4、把图层添加到view的图层(layer)上，以显示出来。
代码

        /** 绘制勾 */
        //1、设置路线
        UIBezierPath *path1 = [UIBezierPath bezierPath];
        path1.lineWidth = rect.size.width*0.06;
        [path1 moveToPoint:CGPointMake(rect.size.width*0.23, rect.size.height*0.43)];
        [path1 addLineToPoint:CGPointMake(rect.size.width*0.45, rect.size.height*0.7)];
        [path1 addLineToPoint:CGPointMake(rect.size.width*0.79, rect.size.height*0.35)];
        //2、创建CAShapeLayer
        CAShapeLayer *shape=[CAShapeLayer layer];
        self.shape = shape;//记录以便重绘时移除
        shape.path = path1.CGPath;
        shape.lineWidth = path1.lineWidth;
        shape.fillColor = [UIColor clearColor].CGColor;
        shape.strokeColor = self.tickColor.CGColor;
        shape.lineCap = kCALineCapRound;//线帽(线的端点)呈圆角状
        shape.lineJoin = kCALineJoinRound;//线连接处呈圆角状
        //3、给CAShapeLayer添加动画
        CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        checkAnimation.duration = 0.5;
        checkAnimation.fromValue = @(0.0f);
        checkAnimation.toValue = @(1.0f);
        [shape addAnimation:checkAnimation forKey:nil];
        //4、把CAShapeLayer添加给自己view的layer
        [self.layer addSublayer:shape];

备注

1、所有图形绘制的方法，都应该写在drawRect方法里，因为从代码角度或者性能角度等方面考虑，这个方法里绘制图形的时机都是最好的。在需要切换状态时，调用[self setNeedsDisplay]方法进行重绘，在drawRect根据自己定义的一些参数来判断到底应该绘制哪个图案。
2、demo下载地址:https://github.com/YYProgrammer/YYTickViewDemo