在Swift中将UIView的圆角设置为圆形顶部

Question

我正在尝试使用下面的代码来调整顶部圆角：

func roundCorners(corners:UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = path.cgPath
        self.layer.mask = maskLayer
    }

使用 myView.roundCorners(corners:[.topLeft, .topRight], radius: radius) 方法。

但它只会将视图的一侧圆角化：

这是在tableView的sectionHeader中，如果我向下滚动再向上滚动，它将使用相同的代码进行圆角化：

而且顶部折扣视图的角也是使用相同的函数进行圆角化。

感谢您的帮助。

更新 如果我在视图上修复宽度，则它可以正常工作。

- Abdul Rehman

---

你在哪里调用了 myView.roundCorners(...) 方法？ - Paolo

在 viewForHeaderInSection 委托方法中。 - Abdul Rehman

@Paolo 请检查更新。 - Abdul Rehman

问题可能是由于标题视图的框架基于tableView的框架，而在第一次加载时没有设置。当标题滚动离开屏幕并回来时，标题使用更新后的视图大小，并正确显示。 - Paolo

@Paolo 是的，你说得对。这是因为当代码执行时，视图没有根据屏幕正确布局。 - Abdul Rehman

Answer 1

iOS 11引入了maskedCorners属性，可以得到更加平滑和高质量的结果。您仍然可以在函数调用中使用UIRectCorner，并将其转换为CACornerMask：

Swift 5：

extension UIView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        if #available(iOS 11.0, *) {
            clipsToBounds = true
            layer.cornerRadius = radius
            layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
        } else {
            let path = UIBezierPath(
                roundedRect: bounds, 
                byRoundingCorners: corners, 
                cornerRadii: CGSize(width: radius, height: radius)
            )
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }
}

- José

---

你美丽、聪明。谢谢你做这件事。 - gabuchan

Answer 2

在@Paolo的帮助下解决了这个问题，下面是可行的代码。

Swift 3.2

extension UIView {

    func roundCorners(corners:UIRectCorner, radius: CGFloat) {

        DispatchQueue.main.async {
            let path = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii: CGSize(width: radius, height: radius))
            let maskLayer = CAShapeLayer()
            maskLayer.frame = self.bounds
            maskLayer.path = path.cgPath
            self.layer.mask = maskLayer
        }
    }
}

使用以下代码调用此函数，并指定要圆角的角落

self.myView.roundCorners(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 8.0)

- Abdul Rehman

Answer 3

也可以这样完成

extension UIView {

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
    if #available(iOS 11.0, *) {
        clipsToBounds = true
        layer.cornerRadius = radius
        corners.forEach { corner in 
         layer.maskedCorners = CACornerMask(rawValue: corner.rawValue)
        }
    } else {
        corners.forEach { corner in
            let path = UIBezierPath(
                roundedRect: bounds,
                byRoundingCorners: corner,
                cornerRadii: CGSize(width: radius, height: radius)
            )
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }
}

}

并且可以用作

yourView.roundCorners(.topLeft, .topRight, radius: 8)

- Rishabh Shukla