iOS 各种边框

作者: Zhui_Do | 来源:发表于2017-04-21 11:27 被阅读3008次
        UIView *View = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, 100, 100))];
        View.center = self.view.center;
        [self.view addSubview:View];
        View.backgroundColor = [UIColor grayColor];
    

    一、实线边框

    实线边框.png
        View.layer.borderColor = [UIColor redColor].CGColor;
        View.layer.borderWidth = 1;
    

    二、虚线边框

    1.虚线边框主要实现是通过增加一个layer绘制一个虚线的矩形,lineDashPattern 第一个参数代表线段长度,第二个参数代表线段间距。

        CAShapeLayer *dottedLineBorder  = [[CAShapeLayer alloc] init];
        dottedLineBorder.frame = CGRectMake(0, 0, View.frame.size.width, View.frame.size.height);
        [dottedLineBorder setLineWidth:2];
        [dottedLineBorder setStrokeColor:[UIColor redColor].CGColor];
        [dottedLineBorder setFillColor:[UIColor clearColor].CGColor];
        dottedLineBorder.lineDashPattern = @[@10,@20];//10 - 线段长度 ,20 - 线段与线段间距
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:dottedLineBorder.frame];
        dottedLineBorder.path = path.CGPath;
        [View.layer addSublayer:dottedLineBorder];
    
    
    虚线.png

    2.流动的虚线
    有一些图片裁剪时会显示一个矩形虚线,而虚线还在流动。
    这里通过改变线的长度来实现虚线的流动,如果要求不严谨,只要粗略的实现这样实现:

        __block NSNumber * i = @10;
        [NSTimer scheduledTimerWithTimeInterval:0.5 repeats:YES block:^(NSTimer * _Nonnull timer) {
            i = [NSNumber numberWithInt:([i intValue]+1)];
            dottedLineBorder.lineDashPattern = @[i,@10];
            if ([i intValue]>=20) {
                 i = [NSNumber numberWithInt:10];
            }
        }];
    

    三内边距边框

    内边距边框.png
        CGRect viewRect = View.frame;
        CGFloat borderMargin = 20;//内边距
        CGSize borderOffset = CGSizeMake(0, 0);//边框x,y偏移量
        
        UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(viewRect.origin.x+borderOffset.width, viewRect.origin.y+borderOffset.height, viewRect.size.width, viewRect.size.height)];
        [self.view addSubview:lineView];
        
        CAShapeLayer *dottedLineBorder  = [[CAShapeLayer alloc] init];
        dottedLineBorder.frame = CGRectMake(-borderMargin/2, -borderMargin/2, View.frame.size.width+borderMargin*2, View.frame.size.height+borderMargin*2);
        [dottedLineBorder setLineWidth:2];
        [dottedLineBorder setStrokeColor:[UIColor redColor].CGColor];
        [dottedLineBorder setFillColor:[UIColor clearColor].CGColor];
       // dottedLineBorder.lineDashPattern = @[@10,@20];//10 - 线段长度 ,20 - 线段与线段间距
        //矩形
         UIBezierPath *path = [UIBezierPath bezierPathWithRect:dottedLineBorder.frame];
        dottedLineBorder.path = path.CGPath;
        [lineView.layer addSublayer:dottedLineBorder];
        [self.view sendSubviewToBack:lineView];
    

    四、偏移的边框

    偏移边框.png
    设置borderOffset即可指定边框的xy偏移量
    

    五、指定某角为圆角的边框

    指定某角为圆角的边框.png
     UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:dottedLineBorder.frame byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:(CGSizeMake(10, 10))];
    

    六、圆形内镂空的边框

    圆形镂空边框.png
        /*圆形镂空边框*/
         UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:dottedLineBorder.frame];
         
         UIBezierPath *circlePath = [UIBezierPath bezierPathWithRect:CGRectMake(borderMargin/2, borderMargin/2, lineView.frame.size.width, lineView.frame.size.height)];
         [path appendPath:circlePath];
         [path setUsesEvenOddFillRule:YES];
         dottedLineBorder.fillRule = kCAFillRuleEvenOdd;
         dottedLineBorder.fillColor  = [UIColor redColor].CGColor;
    

    七、诡异的边框

    诡异的边框.png
     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:dottedLineBorder.frame];
        
        UIBezierPath *circlePath = [UIBezierPath bezierPathWithRect:(CGRectMake(0, 0, View.frame.size.width+borderMargin, View.frame.size.height+borderMargin))];
        [path appendPath:circlePath];
        [path setUsesEvenOddFillRule:YES];
        dottedLineBorder.fillRule = kCAFillRuleEvenOdd;
        dottedLineBorder.fillColor  = [UIColor redColor].CGColor;
    

    其实说了半天哪里说的是边框,明明就是贝塞尔曲线,哈哈。
    Demo:https://github.com/Z-hui/borderDemo

    相关文章

      网友评论

      本文标题:iOS 各种边框

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