美文网首页鲸落消零派
不带底边或顶边的圆角边框

不带底边或顶边的圆角边框

作者: 林大鹏 | 来源:发表于2019-10-17 00:03 被阅读0次

因为项目中需要用到一个视图不带底边圆角边框,因此封装了一个类别方法。
效果如下:

不带底边或者顶边的圆角边框.png

代码如下:

// 边框 显示 方向
typedef NS_ENUM(NSUInteger, FJFViewBorderType) {
    FJFViewBorderTypeTop,
    FJFViewBorderTypeBottom,
    FJFViewBorderTypeAll,
};

// 设置 带圆角的边框
- (CAShapeLayer *)fjf_setCornerRadius:(CGFloat)cornerRadius
                         borderWidth:(CGFloat)borderWidth
                         borderColor:(UIColor *)borderColor
                      viewBorderType:(FJFViewBorderType)viewBorderType{

    return [UIView fjf_setCornerRadius:cornerRadius borderView:self borderWidth:borderWidth borderColor:borderColor viewBorderType:viewBorderType];
}





//
//  UIView+FJFCornerBorder.m
//  FJFViewBorderDemoo
//
//  Created by macmini on 16/10/2019.
//  Copyright © 2019 macmini. All rights reserved.
//

#import "UIView+FJFCornerBorder.h"


@implementation UIView (FJFCornerBorder)
// 设置 带圆角的边框
- (CAShapeLayer *)fjf_setCornerRadius:(CGFloat)cornerRadius
                         borderWidth:(CGFloat)borderWidth
                         borderColor:(UIColor *)borderColor
                      viewBorderType:(FJFViewBorderType)viewBorderType{

    return [UIView fjf_setCornerRadius:cornerRadius borderView:self borderWidth:borderWidth borderColor:borderColor viewBorderType:viewBorderType];
}


+ (CAShapeLayer *)fjf_setCornerRadius:(CGFloat)cornerRadius
                          borderView:(UIView *)borderView
                         borderWidth:(CGFloat)borderWidth
                         borderColor:(UIColor *)borderColor
                      viewBorderType:(FJFViewBorderType)viewBorderType  {

  
    CGFloat viewX = 0;
    CGFloat viewY = 0;
    CGFloat viewWidth = borderView.bounds.size.width;
    CGFloat viewHeight = borderView.bounds.size.height;
    
    
    // 第一条线两点
    CGPoint firstPoint = CGPointMake(viewX + cornerRadius, viewY);
    CGPoint secondPoint = CGPointMake(viewWidth - cornerRadius, viewY);
    
    // 第一个 圆角
   UIBezierPath *firstCornorPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(viewWidth - cornerRadius, viewY + cornerRadius) radius:cornerRadius startAngle:M_PI * 1.5 endAngle:(M_PI * 2) clockwise:YES];
    
    // 第二条线两点
    CGPoint threePoint = CGPointMake(viewWidth, viewY + cornerRadius);
    CGPoint fourPoint = CGPointMake(viewWidth, viewHeight - cornerRadius);
    // 第二个 圆角
    UIBezierPath *secondCornorPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(viewWidth - cornerRadius, viewHeight - cornerRadius) radius:cornerRadius startAngle:0 endAngle:M_PI / 2.0f clockwise:YES];
    
    // 第三条线两点
    CGPoint fivePoint = CGPointMake(viewWidth - cornerRadius, viewHeight);
    CGPoint sixPoint = CGPointMake(viewX + cornerRadius, viewHeight);
    // 第三个 圆角
    UIBezierPath *threeCornorPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(viewX + cornerRadius, viewHeight - cornerRadius) radius:cornerRadius startAngle:M_PI / 2.0f endAngle:M_PI  clockwise:YES];
    
    // 第四条线两点
    CGPoint sevenPoint = CGPointMake(viewX, viewHeight - cornerRadius);
    CGPoint eightPoint = CGPointMake(viewX, viewY + cornerRadius);
    
    // 第四个 圆角
    UIBezierPath *fourCornorPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(viewX + cornerRadius, viewY + cornerRadius) radius:cornerRadius startAngle:M_PI  endAngle:M_PI * 1.5  clockwise:YES];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
   
    if (viewBorderType == FJFViewBorderTypeAll) {  // 边框 圆角
       // 左边线
       [path moveToPoint:sevenPoint];
       [path addLineToPoint:eightPoint];
       [path appendPath:fourCornorPath];

       // 上边线
       [path addLineToPoint:firstPoint];
       [path addLineToPoint:secondPoint];
       [path appendPath:firstCornorPath];

       // 右边线
       [path addLineToPoint:threePoint];
       [path addLineToPoint:fourPoint];
       [path appendPath:secondCornorPath];

       // 底边线
       [path addLineToPoint:fivePoint];
       [path addLineToPoint:sixPoint];
       [path appendPath:threeCornorPath];
    }
    else if (viewBorderType == FJFViewBorderTypeTop) {  // 上半部分
        
        // 左边线
      sevenPoint = CGPointMake(viewX, viewHeight);
      [path moveToPoint:sevenPoint];
      [path addLineToPoint:eightPoint];
      [path appendPath:fourCornorPath];
        
       // 上边线
       [path addLineToPoint:firstPoint];
       [path addLineToPoint:secondPoint];
       [path appendPath:firstCornorPath];
       
       // 右边线
       fourPoint = CGPointMake(viewWidth, viewHeight);
       [path addLineToPoint:threePoint];
       [path addLineToPoint:fourPoint];
       
    }
    else if(viewBorderType == FJFViewBorderTypeBottom){ // 下半部分
        // 右边线
        threePoint = CGPointMake(viewWidth, viewY);
        [path moveToPoint:threePoint];
        [path addLineToPoint:fourPoint];
        [path appendPath:secondCornorPath];

        // 底边线
        [path addLineToPoint:fivePoint];
        [path addLineToPoint:sixPoint];
        [path appendPath:threeCornorPath];

          // 左边线
        eightPoint = CGPointMake(viewX, viewY);
        [path moveToPoint:sevenPoint];
        [path addLineToPoint:eightPoint];
    }
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = borderView.bounds;
    shapeLayer.path = path.CGPath;
    shapeLayer.lineWidth = borderWidth;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = borderColor.CGColor;
    [borderView.layer addSublayer:shapeLayer];
    
    return shapeLayer;
}
@end

demo地址

最后

如果大家有什么疑问或者意见向左的地方,欢迎大家留言讨论。

相关文章

  • 不带底边或顶边的圆角边框

    因为项目中需要用到一个视图不带底边的圆角边框,因此封装了一个类别方法。效果如下: 代码如下: demo地址 最后 ...

  • 玩转CALayer视觉效果

    圆角: cornerRadius 设置圆角的半径 边框: borderWidth 和borderColor 设置边...

  • CSS边框圆角--跟着李南江学编程

    1.什么是边框圆角? 就是把矩形边框变成圆角边框,就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...

  • 25.边框圆角渐变

    边框 什么是边框圆角?将直角的边框变为圆角的边框 边框圆角的格式?border-radius: 左上 右上 右下 ...

  • Flutter-Border

    边框(Border) 单侧边框 全部边框 圆角(borderRadius) 全部圆角 单侧圆角 阴影(BoxSha...

  • CSS3边框

    border-radius 设置边框圆角 border-image 用图片作为边框的修饰 box-shadow 边...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • 实用的css

    outline使用 outline 常用去除input输入框的边框设置元素描边( 双重边框 )制作内部是圆角外部为...

  • 常用CSS3 一目了然

    1.css3边框 圆角边框 border-radius: 5px;(圆角半径) 边框阴影 box-shadow: ...

  • android中实现view的圆角

    一、实心圆角 二、空心圆角、有边框

网友评论

    本文标题:不带底边或顶边的圆角边框

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