Swift 实现部分圆角

Posted 2020-10-08 yucaijiang

圆角一直是开发中经常遇到的问题。

为了实现部分圆角的效果，我去查了一下用 OC 如何实现。

 

可惜直接语法转换以后是不能用的，因为 mas_maskContraints (是 Masonry 这个库的语法，感谢isaced)方法在 Swift 中我并没有找到。在 Stack Overflow 中的搜索结果更加感人：

 

我最终放弃了，选择了另一种实现：

 

把他用 Swift 的方式实现：

extension UIView {

    /// 部分圆角
    ///
    /// - Parameters:
    ///   - corners: 需要实现为圆角的角，可传入多个
    ///   - radii: 圆角半径
    func corner(byRoundingCorners corners: UIRectCorner, radii: CGFloat) {
        let maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radii, height: radii))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = maskPath.cgPath
        self.layer.mask = maskLayer
    }
}

调用的时候需要注意一点：

// 调用没有任何问题，将左上角与右上角设为圆角。
button.corner(byRoundingCorners: [UIRectCorner.topLeft, UIRectCorner.topRight], radii: 5)

// 编译错误
let corners = [UIRectCorner.topLeft, UIRectCorner.topRight]
button.corner(byRoundingCorners: corners, radii: 5)

 

需要转换一下类型：

let corners: UIRectCorner = [UIRectCorner.bottomLeft, UIRectCorner.bottomRight]

// 类型可省略
let corners: UIRectCorner = [.bottomLeft,.bottomRight]

在 UIBerizePath 类中，我们看到的 byRoundingCorners 参数接收的是一个 UIRectCorner ，并非数组类型，所以需要做一步类型转换，同时设置多个圆角。

 

在性能方面，我简单做了个1000行圆角Button和Label的表格，滚动起来十分流畅。用instrument种的CoreAnimation测试，可能会产生离屏渲染。根据WWDC 2014: Advanced Graphics and Animations for iOS Apps，系统圆角使用 mask 的方式实现的，现在无论硬件性能还是优化肯定要比当年做的好。