iOS 各种边框

2021-09-07 03:06:54

https://www.jianshu.com/p/4944977376c5

一、实线边框

实线边框.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

作者：Zhui_Do
链接：https://www.jianshu.com/p/4944977376c5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。