UIBezierPath实现UIView的某几个角为圆角

如果需要将UIView的4个角全部都为圆角,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架)。而若要指定某几个角(小于4)为圆角而别的不变时,这种方法就不好用了。

一个View里面有4个角,需要指定任意几个角为圆角(<4),实现的最简单的方式就是使用UIBezierPath了。

let maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [UIRectCorner.TopLeft, UIRectCorner.TopRight], cornerRadii: CGSize(width: viewCorner, height: viewCorner))
let maskLayer = CAShapeLayer()
maskLayer.frame = self.bounds
maskLayer.path = maskPath.CGPath
self.layer.mask = maskLayer

上面代码指定UIView的左上角、右上角显示圆角,显示如图:

UIBezierPath实现UIView的某几个角为圆角_第1张图片
Snip20160406_1.png

swift中UIBezierPath的用法和Objective-C有点差异,特别是byRoundingCorners里面的参数,若想用@IBDesignable和@IBInspectable实现直接在Storyboard里面直接动态配置,byRoundingCorners就很有意思了。实现的代码如下:

@IBDesignable
class CustomCornerView: UIView {
    
    @IBInspectable var viewCorner:CGFloat = 6.0
    
    @IBInspectable var showLeftCorner:Bool = true
    @IBInspectable var showRightCorner:Bool = true
    @IBInspectable var showBottomLeftCorner:Bool = true
    @IBInspectable var showBottomRightCorner:Bool = true
    
    override func drawRect(rect: CGRect) {
        var corners:UIRectCorner = UIRectCorner.TopLeft
        
        if showLeftCorner {
            corners.insert(UIRectCorner.TopLeft)
        }
        else {
            corners.remove(UIRectCorner.TopLeft)
        }
        
        if showRightCorner {
            corners.insert(UIRectCorner.TopRight)
        }
        
        if showBottomLeftCorner {
            corners.insert(UIRectCorner.BottomLeft)
        }
        
        if showBottomRightCorner {
            corners.insert(UIRectCorner.BottomRight)
        }
        
        let maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: viewCorner, height: viewCorner))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = maskPath.CGPath
        self.layer.mask = maskLayer
    }

}

实现上面的代码后,角度大小、哪个角显示圆角,都可以直接在Storyboard里面直接看到,不需要运行程序。
拖一个UIView进入Storyboard,以下是相关配置:

UIBezierPath实现UIView的某几个角为圆角_第2张图片
Snip20160406_4.png

这样,修改viewCorner、showLeftCorner、showRightCorner、showBottomLeftCorner、showBottomRightCorner就可以看到相关的结果。上图就是设置显示UIView的左上角、右上角圆角的结果。
以上方法不止适用于UIView,其它类似UIImage之类的都可以的。

代码下载:LessonUIBezierPath

参考资料:stackoverflow

你可能感兴趣的:(UIBezierPath实现UIView的某几个角为圆角)