美文网首页Swift
iOS UIView设置圆角、阴影、边框、虚线

iOS UIView设置圆角、阴影、边框、虚线

作者: gaookey | 来源:发表于2020-06-30 23:09 被阅读0次
    extension UIView {
        
        enum BorderPosition: Int {
            case top
            case bottom
            case left
            case right
        }
        
        
        /// 圆角边框
        /// - Parameters:
        ///   - maskedCorners: 圆角位置
        ///   - cornerRadius: 圆角大小
        ///   - borderColor: 边框颜色
        ///   - borderWidth: 边框宽度
        func corner(maskedCorners: CACornerMask, cornerRadius: CGFloat, borderColor: UIColor = .clear, borderWidth: CGFloat = 0) {
            
            layer.masksToBounds = true
            layer.cornerRadius = cornerRadius
            layer.borderColor = borderColor.cgColor
            layer.borderWidth = borderWidth
            if maskedCorners != [] {
                layer.maskedCorners = maskedCorners
            }
        }
        
        /// 圆角边框虚线
        /// - Parameters:
        ///   - rect: frame
        ///   - corner: 圆角位置
        ///   - cornerRadius: 圆角大小
        ///   - borderColor: 边框颜色
        ///   - borderWidth: 边框宽度
        ///   - lineDashPattern: 虚线
        func corner(clipRect rect: CGRect, corner: UIRectCorner = .allCorners, cornerRadius: CGFloat = 0, borderColor: UIColor = .clear, borderWidth: CGFloat = 0, lineDashPattern: [NSNumber] = []) {
            
            let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corner, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
            
            let maskLayer = CAShapeLayer()
            maskLayer.path = path.cgPath
            layer.mask = maskLayer
            
            let borderLayer = CAShapeLayer()
            borderLayer.path = path.cgPath
            borderLayer.lineWidth = borderWidth * 2
            borderLayer.fillColor = UIColor.clear.cgColor
            borderLayer.strokeColor = borderColor.cgColor
            borderLayer.lineDashPattern = lineDashPattern
            layer.addSublayer(borderLayer)
        }
        
        /// 边框
        /// - Parameters:
        ///   - position: 边框位置
        ///   - borderColor: 边框颜色
        ///   - borderWidth: 边框宽度
        func border(position: [BorderPosition], borderColor: UIColor, borderWidth: CGFloat) {
            
            for p in position {
                let borderLayer = CAShapeLayer()
                borderLayer.backgroundColor = borderColor.cgColor
                layer.addSublayer(borderLayer)
                
                switch p {
                case .top:
                    borderLayer.frame = CGRect(x: 0, y: 0, width: frame.width, height: borderWidth)
                case .bottom:
                    borderLayer.frame = CGRect(x: 0, y: frame.height - borderWidth, width: frame.width, height: borderWidth)
                case .left:
                    borderLayer.frame = CGRect(x: 0, y: 0, width: borderWidth, height: frame.height)
                case .right:
                    borderLayer.frame = CGRect(x: frame.width - borderWidth, y: 0, width: borderWidth, height: frame.height)
                }
            }
        }
        
        /// 阴影
        /// - Parameters:
        ///   - color: 阴影颜色
        ///   - offset: 阴影偏移量,默认{0, -3}。(width和height都为0(CGSize.zero),阴影在四周。width为负值,阴影朝左。width为正值,阴影朝右。height为负值,阴影朝上。height为正值,阴影朝下。)
        ///   - radius: 阴影模糊度
        ///   - opacity: 阴影透明度
        func shadow(color: UIColor, offset: CGSize, radius: CGFloat, opacity: Float) {
            layer.shadowColor = color.cgColor
            layer.shadowOffset = offset
            layer.shadowRadius = radius
            layer.shadowOpacity = opacity
        }
    }
    

    图片

    #import "UIImageView+CircleImage.h"
    
    @implementation UIImageView (CircleImage)
    
    - (void)circleImage:(CGFloat)cornerRadius {
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 1.0);
        [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:cornerRadius] addClip];
        [self.image drawInRect:self.bounds];
        self.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }
    
    - (void)circleImage:(CGFloat)cornerRadius rectCorner:(UIRectCorner)rectCorner {
    
        self.contentMode = UIViewContentModeScaleAspectFill;
        
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
        shapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(cornerRadius, cornerRadius)].CGPath;
        self.layer.masksToBounds = YES;
        self.layer.mask = shapeLayer;
        shapeLayer.frame = self.layer.bounds;
    }
    
    @end
    
    #import "UIImage+CircleImage.h"
    
    @implementation UIImage (CircleImage)
    
    /**
     contentMode = UIViewContentModeScaleToFill
     */
    - (UIImage *)circleImage {
        
        UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0);
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        CGContextAddEllipseInRect(ctx, rect);
        CGContextClip(ctx);
        [self drawInRect:rect];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return image;
    }
    
    @end
    
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"image"];
    [self.view addSubview:imageView];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(28, 28)];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    imageView.layer.mask  = layer;
    

    文字

    UILabel *lable = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    lable.text = @"测试文本";
    lable.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:lable];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:lable.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(28, 28)];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    lable.layer.mask  = layer;
    

    UIBezierPath

    class SpView: UIView {
        
        override init(frame: CGRect) {
            super.init(frame: frame)
            
            backgroundColor = .clear
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        override func draw(_ rect: CGRect) {
            
            let points = [
                CGPoint(x: bounds.width * 0.5 - 9, y: bounds.height - 8),
                CGPoint(x: bounds.width * 0.5 + 9, y: bounds.height - 8),
                CGPoint(x: bounds.width * 0.5, y: bounds.height)
            ]
            
            let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height - 8), cornerRadius: 16)
            path.move(to: points[0])
            for i in 1..<points.count {
                path.addLine(to: points[i])
            }
            
            UIColor.white.set()
            path.stroke()
            path.fill()
            
            let shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height - 8), cornerRadius: 16)
            layer.shadowColor = UIColor.red.cgColor
            layer.shadowOffset = .zero
            layer.shadowRadius = 12
            layer.shadowOpacity = 1
            
            shadowPath.move(to: points[0])
            for i in 1..<points.count {
                shadowPath.addLine(to: points[i])
            }
            
            layer.shadowPath = shadowPath.cgPath
        }
    }
    
    image.png

    相关文章

      网友评论

        本文标题:iOS UIView设置圆角、阴影、边框、虚线

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