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

推荐阅读更多精彩内容