Swift 中 UIButton 的圆顶角

Question

我知道我可以使用以下方法将所有四个角都圆化：

 myBtn.layer.cornerRadius = 8
 myBtn.layer.masksToBounds = true

因为我只想打第二轮，所以我做了一些研究，发现 this:

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

这样称呼：

view.roundCorners([.TopLeft , .TopRight], radius: 10)

但这不适用于 UIButton。当我将扩展名切换为 UIButton 类型并将其传递给按钮时，输出如下所示：

问题是，我如何调整它以在 UIButton 上工作？

Answer 1

使用此代码，

let path = UIBezierPath(roundedRect:viewTo.bounds, byRoundingCorners:[.TopRight, .TopLeft], cornerRadii: CGSizeMake(20, 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.CGPath
viewTo.layer.mask = maskLayer

希望对您有所帮助

Answer 2

您忘记设置形状图层的边框：

mask.frame = layer.bounds

Answer 3

将你的扩展更新成这样：

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

形状层（遮罩）需要知道框架

Answer 4

添加 UIButton 扩展：

extension UIButton{
    func roundedButton(){
        let maskPath1 = UIBezierPath(roundedRect: bounds,
            byRoundingCorners: [.topLeft , .topRight],
            cornerRadii: CGSize(width: 8, height: 8))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

呼入viewDidAppear/viewDidLayoutSubviews:

btnCorner.roundedButton()

按钮角输出：

Answer 5

对于swift 3 Kirit Modi的回答改为：

extension UIButton {
   func roundedButton(){
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: [.topLeft , .topRight],
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

在扩展文件的开头不要忘记添加：

import UIKit

如果您想要 UIView 的扩展，可以选择圆顶角或底角，您可以使用：

extension UIView {
   func roundedCorners(top: Bool){
       let corners:UIRectCorner = (top ? [.topLeft , .topRight] : [.bottomRight , .bottomLeft])        
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

一个按钮被调用为：

myButton.roundedCorners(top: true)

Answer 6

iOS 11 使圆角变得非常容易。下面的代码将左上角和右下角圆化。

myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

Answer 7

Swift 4: 最新的 iOS 11 之后

override func viewDidLoad() {
    super.viewDidLoad()

    if #available(iOS 11.0, *) {
        self.viewToRound.clipsToBounds = true
        viewToRound.layer.cornerRadius = 20
        viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    } else {
        // Fallback on earlier versions
    }
}

早期 iOS（10,9 等）版本（也适用于 iOS11）

override func viewDidLayoutSubviews() {
    self.viewToRound.clipsToBounds = true
    let path = UIBezierPath(roundedRect: viewToRound.bounds,
                            byRoundingCorners: [.topRight, .topLeft],
                            cornerRadii: CGSize(width: 20, height: 20))

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    viewToRound.layer.mask = maskLayer
}

Answer 8

对于swift5和最大的灵活性

定义一个带有圆角函数的扩展

extension UIButton {
    func roundCorners(corners: UIRectCorner, radius: Int = 8) {
        let maskPath1 = UIBezierPath(roundedRect: bounds,
                                     byRoundingCorners: corners,
                                     cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

调用圆角函数

myButton.roundCorners(corners: [.topLeft, .topRight])

或具有特定半径

myButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)

Answer 9

四舍五入应用于 view/Button .. 的角，但在按钮的边框上，它没有正确应用。我可以解决这个问题吗？ @

这是我使用的代码，它在 iOS11.0 及更高版本（<11.0）

中有效（边框）

if #available(iOS 11.0, *) {
        self.layer.cornerRadius = radius
        self.layer.maskedCorners = maskedCorners
    } else {
        let shapeLayer = CAShapeLayer()
        shapeLayer.position = self.center
        self.layer.masksToBounds = true
        self.clipsToBounds = true
        let bezirePath = UIBezierPath(roundedRect: self.bounds,
                                      byRoundingCorners: corners,
                                      cornerRadii: CGSize(width: radius, height: radius))
        shapeLayer.bounds = frame
        shapeLayer.path = bezirePath.cgPath

        self.layer.mask = shapeLayer

Answer 10

这就是帮助我的原因

extension UIView {

   func roundCorners(
      corners: UIRectCorner, 
      radius: CGFloat
   ) {
      let path = UIBezierPath(
         roundedRect: bounds,
         byRoundingCorners: corners,
         cornerRadii: CGSize(
            width: radius, 
            height: radius
         )
      )

      let mask = CAShapeLayer()
      mask.path = path.cgPath
      layer.mask = mask
   }
}

注意，如果你附加了布局约束，你必须在你的 UIView 子类中按如下方式刷新它：

override func viewDidLayoutSubviews() {
   super.viewDidLayoutSubviews()

   yourButtonOutletName.roundCorners(
      corners: [.topLeft, .topRight],
      radius: yourButtonOutletName.frame.height / 2
   )
}

Swift 中 UIButton 的圆顶角

Round Top Corners of a UIButton in Swift

ios

swift

uibutton

rounded-corners