美文网首页自己尝试等装一下学学人家的框架牛叉的demo
iOS开发——打钩控件(单选按钮)的实现

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

作者: YY程序猿 | 来源:发表于2017-07-27 11:52 被阅读787次

    需求

    不以切换图片的方式,实现控件点击展示出已选择的效果,再点击取消选择,效果如图(静态+动画),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

    相关文章

      网友评论

      本文标题:iOS开发——打钩控件(单选按钮)的实现

      本文链接:https://www.haomeiwen.com/subject/vphzkxtx.html